ホームページの装飾、レイアウト

HTMLとCSSの教科書、第7章各ページの作成までなんとか終わりました。

どんなことをやったか大まかに言いますと、画像の編集と挿入、ページのレイアウト、リンクやナビーゲーションの作成、各ページの作成をやりました。

一気にやったため、各項目ごとで要点を整理したいと思います。

まず画像の編集と挿入について。

画像の切り抜きや大きさの変更などはPixlrというオンラインの画像編集ツールを使いました。

画像をHTMLに挿入する際も、タグを使いファイルを指定するのみです。

<img src="ファイルの場所/ファイル名" alt="代替えテキスト" width="幅" height="高さ">

alt属性は画像を表示しないブラウザなどで画像の代わりに表示されるテキストになります。

width・height属性は実際の画像のサイズを入力します。

実際と違う値を入力してしまうと画像が伸びたりつぶれたりしてしまいます。

その次はページのレイアウトです。

この章はから少しややこしくなってきました。

現状だとブラウザに表示されているページが左に寄っているためセンターに寄せてあげます。

まずブラウザに表示されてる内容をすべてdivタグで囲みます。

ここで初めて出てきたdivタグはそれ自体には意味がなく、範囲を定義する汎用的なタグです。

idを仮に「page」とします。

CSSを開き#pageにwidthプロパティで横幅を指定します。

横幅を指定する際は、よく利用されているモニターサイズの中で最も小さいサイズである1024×768pxのモニターで閲覧した時でもはみ出ないように考慮する必要があります。

そのため、1024×768pxで表示した際、プラウ座の横スクロールバー部分も考慮して左右に適度な余白が生まれるくらいの、900～980px程度にする場合が多いとのこと。

なので今回は横幅980pxとしました。

続けて#pageに対してmarginプロパティで左右のマージンを「auto」に設定します。

これによってブラウザの横幅に対して自動的に計算されたマージンの値が挿入されて、コンテンツ部分を中央に寄せることができます。

#page {

    width: 980px;

    margin: 0 auto;
}

次に、左にメインのコンテンツ（main)、右にお知らせを表示させるためページ(sub)を2段組みにレイアウトします。

まずセンター寄せにしたときと同じように、それぞれのコンテンツの横幅を決めます。

ここでは、ページ全体が980pxあるため「main」を720px、「sub」を220pxとします。

そしてfloatプロパティでmainを左、subを右に寄せます。

#main {

    width: 720px;

    float: left; 

}

#sub {

   width: 220px

    float: right; 

} 

これで左右にコンテンツが分かれて左に720pxのmain、右に220pxのsub、真ん中に40px隙間ができてちょうど980pxとなります。

しかし、問題が一つあり、subの下にあったコピーライトも一緒に右側に来てしまいました。

floatプロパティの特性として画像や要素を左右に寄せると、その下にある内容が反対側に回り込んでしまいます。

つまりここで言うコピーライトという内容が右に回り込んでしまいます。

これを解消するにはmainとsubの親要素にclearfixというテクニックを使います。

#page:after {
    content: "";

    clear: both;

    display: block;

}

擬似要素「:after」が#pageの最後に追加される。contentは内容を入れると文字として出てしまうため空にしておく。

clearによって擬似要素が回り込みを解消する。

displayによってインライン要素からブロックレベルの要素となる。

こうすることで#pageの高さが保たれてコピーライトもちゃんと下に戻ります。

(頭では理解してるつもりですが説明するとなるとなかなか難しいですね…)

ひとまず今日はここまでにして、リンクとナビーゲーションの設定についてはまた明日書きたいと思います！