第３回 初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる！
BPDスタッフのたけしたてつおです。
前回に続き「Adobe Dreamweaver CC」でWebサイトを構築していきます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアです。
楽にHTML/CSS等のコーディングができるそうです。
今回はウェブサイトの幅とヘッダー部分を調整していきます。
ウェブサイト全体の幅を設定する
１．<div id=”wrap”>と<div id=”footer”>の幅を960pxに設定する。
「プロパティ」→「width」を「960px」に設定する。
「プロパティ」→「padding」を「0px」に変更する。
※幅の見た目がわかりにくいので全ての「セレクター」の「padding」を「0px」に変更する。
２．<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解除）を追加する。
cssに以下を記述する。
.clearfix:after {
display: block;
clear: both;
content: “”;
}
※「float」とは、要素がふわふわと宙に浮いた状態で左右に回りこむということです。
そのために親要素である<div id=”container”>が子要素<div id=”main”>の高さを認識できないということです。
ヘッダーにロゴを入れる
１．画像を用意する。
使用する画像を「イラストレーター」や「フォトショップ」などで制作し、指定しているローカルサイトフォルダに「images」フォルダを新規作成して、その中に画像を保存する。
※「イラストレーター」「フォトショップ」はアドビ社が提供しているソフトウェアです。
２．<div id=”header”>の中に<div class=”header_L”>と<div class=”header_R”>を挿入する。
「メニュー」→「挿入」→「Div」で要素（箱）を挿入する。
３．<div id=”header”>の中を横並びに変更する。
<div id=”header_L”>の幅を「500px」に設定し、「float」を設定する。
「プロパティ」→「width」を「500px」に変更する。
「プロパティ」→「float」を「left」に設定する。
<div id=”header_R”>の幅を「436px」（罫線があるのでその分を引いたサイズ）に設定し、「float」を設定する。
<div id=”header”>の高さが認識できないので「<class=”clearfix”>」（float解除）を追加する。
<div id=”header_L”>の中に<div id=”site-id”>と<div id=”description”>を挿入する。
４．ロゴ画像を挿入する。
「メニュー」→「挿入」→「Image」でロゴ画像を選択し挿入する。
５．<div id=”description”>を入力する。
サイトの説明文を<div id=”description”>に入力する。
ヘッダー右にユーティリティナビを設定する。
１．<div id=”header_R”>の中に<div class=”utility”>を挿入
div id=”header_R”>の中に<div class=”utility”>を挿入しその中に<ul>（「メニュー」→「挿入」→「番号なしリスト」）その中に<li>（「メニュー」→「挿入」→「リスト項目」）を挿入する。
２．CSSでリストを横並びに設定する。
<li>に「display: inline-block;」を設定する。
※inline-block要素はinline要素と同じ物のようなものだが、widthとheightを設定することができる。
※グローバルナビゲーションや、ユーティリティナビゲーションで<li>項目を横並びさせたいときは、display:inline-blockを設定するとリストマーカーが消えて横並びになります。
分かり易いように背景に色も入れておく。
３．リスト項目の隙間を調整する。
display:inline-blockを設定すると<li>と<li>の間に隙間が発生するので、
<ul>に「font-size: 0px;」を設定し、<li>に「 font-size: 13px;」を設定する。
リスト項目を右寄せにしたいので、
<ul>に「float: right;」を設定する。
ヘッダー右にユーティリティナビを設定する。
CSSで以下を追加で修正しました。
#sidebarにfloat: left;を追加
#sidebarのwidth: 286px;に修正（罫線があるのでその分を引いたサイズ）
今回はここまでです。
以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる」第３回目でした。
更新は遅いですが地道に更新していく予定です。
