第3回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

001

第3回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

BPDスタッフのたけしたてつおです。

前回に続き「Adobe Dreamweaver CC」でWebサイトを構築していきます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。
楽にHTML/CSS等のコーディングができるそうです。

今回はウェブサイトの幅とヘッダー部分を調整していきます。

ウェブサイト全体の幅を設定する

1.<div id=”wrap”>と<div id=”footer”>の幅を960pxに設定する。

「プロパティ」→「width」を「960px」に設定する。
「プロパティ」→「padding」を「0px」に変更する。

※幅の見た目がわかりにくいので全ての「セレクター」の「padding」を「0px」に変更する。

2.<div id=”container”>の中を2カラム(横並び)に変更する。

<div id=”sidebar”>の幅を「300px」に設定する。
<div id=”main”>に「float」を設定する。
「プロパティ」→「float」を「right」に設定する。
「プロパティ」→「width」を「650px」に変更する。

※ sidebarとmainが重なって見えるが罫線の幅を入れているのでここでは無視します。

<div id=”main”>に「float」を設定すると<div id=”container”>が無視されるので、
<div id=”container”>に「<class=”clearfix”>」(float解除)を追加する。

001

cssに以下を記述する。
.clearfix:after {
display: block;
clear: both;
content: “”;
}

002

※「float」とは、要素がふわふわと宙に浮いた状態で左右に回りこむということです。
そのために親要素である<div id=”container”>が子要素<div id=”main”>の高さを認識できないということです。

ヘッダーにロゴを入れる

1.画像を用意する。

使用する画像を「イラストレーター」や「フォトショップ」などで制作し、指定しているローカルサイトフォルダに「images」フォルダを新規作成して、その中に画像を保存する。

※「イラストレーター」「フォトショップ」はアドビ社が提供しているソフトウェアです。

2.<div id=”header”>の中に<div class=”header_L”>と<div class=”header_R”>を挿入する。

「メニュー」→「挿入」→「Div」で要素(箱)を挿入する。
003

3.<div id=”header”>の中を横並びに変更する。

<div id=”header_L”>の幅を「500px」に設定し、「float」を設定する。
「プロパティ」→「width」を「500px」に変更する。
「プロパティ」→「float」を「left」に設定する。

004

<div id=”header_R”>の幅を「436px」(罫線があるのでその分を引いたサイズ)に設定し、「float」を設定する。
<div id=”header”>の高さが認識できないので「<class=”clearfix”>」(float解除)を追加する。
<div id=”header_L”>の中に<div id=”site-id”>と<div id=”description”>を挿入する。

4.ロゴ画像を挿入する。

「メニュー」→「挿入」→「Image」でロゴ画像を選択し挿入する。

006

5.<div id=”description”>を入力する。

サイトの説明文を<div id=”description”>に入力する。

007

ヘッダー右にユーティリティナビを設定する。

1.<div id=”header_R”>の中に<div class=”utility”>を挿入

div id=”header_R”>の中に<div class=”utility”>を挿入しその中に<ul>(「メニュー」→「挿入」→「番号なしリスト」)その中に<li>(「メニュー」→「挿入」→「リスト項目」)を挿入する。

008

2.CSSでリストを横並びに設定する。

<li>に「display: inline-block;」を設定する。

※inline-block要素はinline要素と同じ物のようなものだが、widthとheightを設定することができる。
※グローバルナビゲーションや、ユーティリティナビゲーションで<li>項目を横並びさせたいときは、display:inline-blockを設定するとリストマーカーが消えて横並びになります。
分かり易いように背景に色も入れておく。

3.リスト項目の隙間を調整する。

display:inline-blockを設定すると<li>と<li>の間に隙間が発生するので、
<ul>に「font-size: 0px;」を設定し、<li>に「 font-size: 13px;」を設定する。
リスト項目を右寄せにしたいので、
<ul>に「float: right;」を設定する。

ヘッダー右にユーティリティナビを設定する。

CSSで以下を追加で修正しました。
#sidebarにfloat: left;を追加
#sidebarのwidth: 286px;に修正(罫線があるのでその分を引いたサイズ)

010

今回はここまでです。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる」第3回目でした。
更新は遅いですが地道に更新していく予定です。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

第2回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

001

第2回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

BPDスタッフのたけしたてつおです。

前回に続き「Adobe Dreamweaver CC」でWebサイトを構築していきます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。
楽にHTML/CSS等のコーディングができるそうです。

今回は<div>でマークアップして、ブロックレベル要素ごとにわけていきます。
※「マークアップ」とは、簡単に言うとHTMLの文章に「タグ」を記述することです。
※「<div>」は範囲を指定するブロックレベル要素(一つの箱を作ること)です。
※「ブロックレベル要素」とは、前後に改行が入る一まとまりの要素(箱)です。縦に一つずつ並び、幅と高さが指定できます。

では早速、
<body>〜</body>の中に以下の<div>マークアップしていきます。
<div id=”wrap”> footer以外の箱(要素)を入れる箱(要素)
<div id=”header”> ウェブサイトの上のヘッダー部分を記述する箱(要素)
<div id=”container”> ウェブサイトのコンテンツ部分全体を記述する箱(要素)
<div id=”main”> コンテンツのメイン部分の箱(要素)
<div id=”sidebar”> コンテンツ横のサイドバー部分の箱(要素)
<div id=”footer”> ウェブサイト下のフッター部分の箱(要素)

「メニュー」→「挿入」→「Div」で「Divを挿入」画面がひらきます。
必要なIDを入力して「OK」すると、<div>の箱(要素)が簡単にできます。

002

※</div>の後に<!– #要素ID end –>を入れておくと後から見るときに分かり易いです。
この要領で他の箱(要素)も挿入していきます。

003

箱(要素)に罫線(デザイン)を入れる

箱(要素)のデザインはCSSファイルに記述していきます。
※CSSファイルとは、ウェブサイトのデザイン(スタイル)を記述するファイルです。

「メニュー」→「ウインドウ」→「CSSデザイナー」で「新規CSSソースを作成」→「ファイル/CSS」にファイル名を記入して「OK」
これで、CSSファイルができます。

005

006

※<head>内に
<link href=”css/layout.css” rel=”stylesheet” type=”text/css”>が記述されます。

1.CSSファイルにスタイルを記述していきます。
セレクターを設定します。
デザインしたい要素を選択し→「CSSデザイナー」の該当のCSSファイルを選択→「セレクター」の「+」をクリック→セレクターが設定されます。

007

2.プロパティとバリューを設定します。
セレクターを設定したら、「プロパティ」と「バリュー(値)」を設定します。
「プロパティ」→「セット表示」のチェックを外す→プロパティの一覧が表示されます。
必要な「プロパティ」と「バリュー(値)」を設定する。
「ライブビュー」を確認すると箱(要素)に罫線が入っています。
この要領で他の箱(要素)も設定していきます。

009

※「ライブビュー」が表示されている場合は変更が自動的に反映されます。
※「control」+セレクターを選択で、スタイルのコピーができます。
※スタイルの設定をしても「ライブビュー」が自動的に反映されない場合はツールバーの更新アイコンをクリックします。

今回の「Adobe Dreamweaver CC」の感想

「Adobe Dreamweaver CC」の操作はまだ二回目なので、不慣れですが、
<div>などのマークアップの記述、CSSのスタイルを記述が楽にできるので、慣れてくると作業を大幅に短縮できそうだ。

今回はここまでです。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる」第2回目でした。

更新は遅いですが地道に更新していく予定です。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

001

初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

BPDスタッフのたけしたてつおです。

ここだけの話ですが、
実は私、BPDのデザイン担当なのですが、
ホームページHTML)が、あまり得意ではありません。

「ソースコードやタグコードなど…」すべて英字で記述していくので、
普段日本語しか目にしない私としては、見た目が…

パッと見ただけで、頭が痛くなります。w( ̄Д ̄;)wワオッ!!

しかし、やらないといけない…

でも、楽にWebサイトを構築したい!!

ということで、
今回、楽にHTML/CSS等のコーディングができるという噂の
「Adobe Dreamweaver CC」でWebサイトを構築してみようとおもいます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアで、
楽にHTML/CSS等のコーディングができるそうです。

そして今回から構築していくウェブサイトは私の個人的さいと「てつお使えるイラストぷらす」が昔に作成したままのダサイデザインなのでこちらをイケテルデザインのウェブサイトへと修正していきたいと思います。

第一回目 新規ドキュメントを制作

では早速、「Adobe Dreamweaver CC」を起動して新規ドキュメントを制作してみます。

※私はMacで作業をしていますので、説明画像はMacの画像です。
Windowsの方は見た目が少し違うと思いますが、大体一緒だと思います。

1.新規ドキュメントを制作
左の項目から「新規ドキュメント」を選択します。
ドキュメントタイプから「HTML」を選択します。
フレームワークは「なし」のタブを選択し、ドキュメントタイプから「HTML5」を選択します。
フレームワークのタイトルを入力して制作をクリックします。
003

2.編集画面を変更
ツールバーを「ライブ」から「分割」に変更して、ライブビューとコードビューを表示させます。
005

3.ドキュメントを保存
メニューの「ファイル」→「保存」→ドキュメントに名前を付けて保存で、「新規サイト」をクリックします。
サイト設定画面が開きますので、各項目を記入して保存します。
サイト名:「サイトの名前」
ローカルサイトフォルダー:「保存するフォルダを選択」
ファイル名:「index.html」
006

今回制作したウェブページの基本的なコードについて

※新規ドキュメントを制作するとウェブページの基本のコードが自動的に制作されます。
<!doctype html>:
HTML5のDOCTYPE宣言です。(使用するHTMLのバージョンを指定します。)
<html>〜</html>:
「これはHTML文章です」と宣言するタグです。
<head>~</head>:
このタグ内にウェブページに関する情報や設定などを記述します。
<meta charset=”UTF-8″>:
エンコードの種類です。
<title>〜</title>:
このタグ内にページのタイトルを記述します。
<body>〜</body>:
このタグ内にウェブサイトで表示するコンテンツなどを記述します。

おまけ

今回、今回制作したウェブページの基本的なコードについてでタグを書いていますが、
「<」と「>」はタグの記号ということなので、
文字として表示する場合はそのまま使用することはできません。
「<」は「&lt;」、「>」は「&gt;」と入力すれば表示されます。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!」第1回目でした。

更新は遅いですが地道に更新していく予定です。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

Illustrator CCでパスファインダーの合流・分割などの精度が悪いときの対処方法

000

イラストレータ(Illustrator CC)の機能【パスファインダー】

BPDスタッフのたけしたてつおです。

イラストレーター(Illustrator CC ※イラストレーターとは、アドビシステムズ社が販売するドロー系アプリケーションソフトのことです。)にはオブジェクトを分割合体させたりできるとっても便利な機能で【パスファインダー】というものがあります。
これはとてもよく使う機能です。

以前のバージョン(Illustrator8)を使っている時には気にしていなかった、
というかなかった。
そんなパスファインダーのトラブルが新しいバージョンのイラストレーター(Illustrator CC)で起きたので、
自分の備忘録としてこのデザインのスタッフブログに書き留めておきます。

Illustrator CCでパスファインダーの合流をすると塗りのヵ所の表示が汚い

Illustrator CCでパスファインダーの合流をすると塗りのヵ所の表示が汚いという現象が起きました。
ちょっと複雑なパスの時に起きるみたいです。

参照画像:
ピクトグラムのチューリップの花びら部分です。
花びらのへこんだヵ所が汚いです。

001

パスファインダーの合流で塗りのヵ所の表示が汚い時の対処方法は
メニュー左上の「Illustrator CC」>「環境設定」>「GPUパフォーマンス」の順で進んで、
「GPUパフォーマンス」のチェックを外すと奇麗に表示されます。

※「GPUパフォーマンス」とはパソコンで使用しているグラフィックプロセッサーを使用する物で処理の内容によっては高速化をしたりする事ができるそうです。
※Illustratorの場合、GPUを切った状態が従来の状態と同じで、
GPUが使用出来ないからアプリケーションが使用出来ないという物ではないということです。

Illustrator CCでパスファインダーの分割をすると筋がはいる

Illustrator CCでパスファインダーの分割をすると筋がはいる現象が起きました。
これは、「アートワークのアンチエイリアス」が原因です。

参照画像:
ピクトグラムのチューリップの花びらを2つ重ねて分割した画像です。
分割したヵ所が汚いです。

002

Illustrator CCでパスファインダーの分割をすると筋がはいる時の対処方法は
メニュー左上の「Illustrator CC」>「環境設定」>「一般」の順で進んで、
「アートワークのアンチエイリアス」にチェックを外すと奇麗に表示されます。

※「アートワークのアンチエイリアス」はモニター上の表現です。
※印刷する場合は、印刷会社様の判断になるようなので、要確認です。

小さなオブジェクトをつなげた物の場合にも、境目に筋がはいります。
この場合も「アートワークのアンチエイリアス」にチェックを外すと奇麗に表示されます。
※結合が可能であれば、結合する事で線は見えなくなります。

Microsoft Office用に保存でPNG形式に書き出ししたときにオブジェクトに筋が入る

「アートワークのアンチエイリアス」のチェックを外すと奇麗に表示されますが、
Microsoft Office用に保存でPNG形式に書き出ししたときにオブジェクトに筋が入る現象が起きます。
この場合は、「ファイル」>「書き出し」でファイル形式でPNGを選択し>「アンチエイリアス」をアートに最適を選択して書き出すと、奇麗に書き出されます。

私の場合、
以前のバージョン(Illustrator8)を使っている時には起きなかった現象なので、
戸惑いました。
ソフトのバージョンが変わるとこういう事があるのですね…

以上
Illustrator CCでパスファインダーの合流・分割などの精度が悪いときの対処方法でした。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ