• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / CSS初心者 / 13.CSSを書いてレイアウトやデザインを施す(後編)

13.CSSを書いてレイアウトやデザインを施す(後編)

池田祐太郎 | 2013年11月2日 公開

目次

  • 1 bodyに対して全体に適用させるスタイルを定義する
    • 1.1 div id=”wrap”
  • 2 ヘッダー部分のCSS
    • 2.1 header ul liと最後のli
    • 2.2 aタグはblock要素に変換
    • 2.3 floatしたら必ず解除を
  • 3 メインコンテンツエリアのCSS
    • 3.1 フォントサイズの書き方と定義するセレクタ
    • 3.2 回り込みをさせる画像のスタイル
  • 4 サイドバーのCSS
    • 4.1 asideの設定
    • 4.2 aside h4のネガティブマージン
    • 4.3 listのmargin-bottom
  • 5 フッターのCSS
    • 5.1 余白を得るため#mainにmargin-bottoomを追加
    • 5.2 h5をulの中へ移動
        • 5.2.0.1 ■サービス紹介
    • 5.3 ulのfloat、横幅、margin-right
  • 6 CSSの完成
  • 7 初心者のためのホームページ制作 まとめ
    • 7.1 ご協力ください
    • 7.2 個別のフォローも対応

bodyに対して全体に適用させるスタイルを定義する

まずはページの大本となるbodyタグに対してCSSを定義していきます。

基本文字サイズを16px
色は黒にほぼ近い#404040
行の高さは100%に
フォントの設定
背景色は白へ

上記を定義すると以下の様なCSSになります。

body {
    font-size: 16px;
    color: #404040;
    line-height: 100%;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    background: #fff;
}

div id=”wrap”

同時に先ほど追加したdiv id=”wrap”にも追加します。

このタグは全体を囲っているタグなので横幅を指定
marginにauto設定することで中央に寄る(厳密には左右のみautoをかけてあげればOK)
左右に10pxの内側余白を設け、要素全体の横幅は960pxに

#wrap {
    width: 940px;
    margin: auto;
    padding: 0 10px;
}

ヘッダー部分のCSS

続いてヘッダー付近のCSSです。
ここでは主にグローバルメニューの作り方について解説します。
押させておくべきポイントは以下です。

h1の画像の上下の幅はpaddingで
メニューの上下の線
liはfloatさせ、左から順にメニューが並ぶように
それぞれのliの右側はmarginであけるが、最後のliだけはmarginを0に
aタグにdisplay: blockを指定することでインライン要素からブロック要素に変わり、リンクの幅が増える
このままだとfloatが解除されないままなので、次の要素である#mainにclear指定する

かけるCSSがこちら。
※わかりやすくするため適用した順に記述しています。見やすいように並び替えてOK

h1 {
    padding-top: 33px;
    padding-bottom: 34px;
}
header ul {
    border-top: 1px solid #9d9d9d;
    border-bottom: 1px solid #9d9d9d;
    padding: 20px 10px;
    height: 38px;
}
header ul li {
    float: left;
    width: 200px;
    margin-right: 40px;
}
header ul li.lastChild {
    margin-right: 0;
}
header ul li a {
    display: block;
}
#main {
    clear: both;
}
header {
    margin-bottom: 40px;
}

重要な部分を説明します。

header ul liと最後のli

メニューは大体フロートさせることが多いのです。displayプロパティでも表示可能ですがIE7が非対応なので一応対応しておきましょう。
横幅にも200pxを設定し、それぞれの右側には40pxのmargin。
しかし最後のliはclass名lastChildを設定しているのでここに対してmargin-rightを0にしてあげる。そうすると最後のliの右側余白がなくなりピッタリ収まってくれるはずです。

header_ul_liのcss

aタグはblock要素に変換

aタグは元々インライン要素です。このままだと横幅が画像より小さくなってしまう。
インライン要素のaタグ

そこでaタグにdisplayプロパティのblockという値を設定してあげることでリンクの幅が拡がりました。
ブロック要素になったaタグ

floatしたら必ず解除を

liをfloatして回りこませているので、これをどこかで解除してあげないといけません。基本は次の要素で解除をするので、次の要素であるdiv#mainにclearプロパティをかけてあげます。
これでフロートも解除でき、親要素であるheaderタグに下への余白を40px設けてヘッダーの完成。

ヘッダー完成

メインコンテンツエリアのCSS

続いてメインエリアです。「About SAMPLE SITE」と書かれているところからですね。

#mainに対して横幅設定、float、右側への余白
見出しh2とh3に対するスタイル
フォントの大きさは12pxにする必要があるがpx指定よりemや%といった指定&どのセレクタにかけるのがいいか
pタグの下側に余白
回り込みをさせる画像のスタイル

#wrap {
    width: 940px;
    margin: auto;
    padding: 0 10px;
    font-size: 0.75em;
    line-height: 1.833em;
}
#main {
    clear: both;
    width: 700px;
    float: left;
    margin-right: 20px;
}
#main h2 {
    border-bottom: 1px solid #bababa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
#main p {
    margin-bottom: 50px;
}
#main h3 {
    margin-bottom: 10px;
}
.floatL {
    float: left;
    margin: 0 20px 10px 0;
    border: 1px solid #666;
    padding: 1px;
}

フォントサイズの書き方と定義するセレクタ

フォントサイズは12pxにします。これは相対数値で指定します。※参考:絶対数値と相対数値
今回はemにしましょう。16pxから12pxにしたいので値は0.750emです。(16×0.75=12)

そしてこれをかけるセレクタなんですが、どこにかければいいでしょうか?
pタグに直接かけてもいいんですが、このエリア内にて基本のサイズを決めておいたほうが後々テキストを増やしてサイズを変えるときに12pxが基準となり、そこからemにてかえていけばいいので親要素に定義します。
するとdiv#mainでしょうか?ここでも間違いではないですがこの後サイドバーにもフッターにもテキストはありますので、元々の親要素であるdiv#wrapperに定義します。最初に設定した#wrapにfont-sizeとline-heightを追加します。

回り込みをさせる画像のスタイル

画像を置いてとなりにテキストを表示。よく見るレイアウトですね。画像を直に置くのでは少々味気ないので枠に装飾をかけます。
floatプロパティはマストでかけるとして、marginの使い方が大事になってきます。ここでは「margin: 0 20px 10px 0;」としました。
4つの値がありますが、これは4つの場合「上、右、下、左」という順番でした。※参照:marginなどの値の数によりかけられるエリアの違い
なので右側が20px、下側が10px、上と左は無しという具合。

装飾の方はとてもシンプルで、borderにて全方向に設定し、paddingの1pxを指定するこで余白が生まれ、背景の白が見えるという感じです。
floatをかけたimgの装飾

サイドバーのCSS

回り込みにて右側の空いた部分に回りこんできたサイドバーについてスタイルをかけていきます。

aside全体の横幅、float、内側の余白の設定
h4のネガティブマージン
liの下方向の値に注意

aside {
    width: 200px;
    float: right;
    padding: 0 10px;
}
aside h4 {
    margin-bottom: 20px;
    margin-left: -10px;
}
aside p {
    margin-bottom: 30px;
}
aside li {
    margin-bottom: 23px;
}

asideの設定

#mainにfloatをかけたのでこちらは自動的に右に回り込みます。ではasideの横幅を220pxに設定したいのでwidthプロパティで220pxを設定します。するとfloatによって右側に回りこんでいたのに下に落ちてしまいました。これは横幅を指定することで下に下がってしまうんです。そのためこのasideにもfloatをかけてあげます。値はleftでもrightでもどっちでも一緒ですが右に移動するのでわかりやすいようrightにしておきます。
では内側の余白を設定します。サイドバーは見出し意外は左右に10pxの余白を設けています。内側の余白はpaddingなのでasideにpaddingで左右だけ10pxにしましょう。
するとfloatしたはずのasideがまた落ちてしまいました。これはpaddingで左右に10pxずつ設定したのでaside全体の横幅が220px+20px=240pxになってしまい、#wrapの横幅オーバーしてしまったので収まりきらず落ちてしまったのです。

全体の横幅

この解決方法はとてもシンプルで、足した分のpaddingをwidthから引けばOK。元々220pxだったのでpadding分の20pxをひいてwidthを200pxに再設定してあげます。するとちゃんともどってきました。

aside OK

aside h4のネガティブマージン

ここでネガティブマージンの設定をします。ネガティブマージンとは、marginプロパティにマイナスの値(-10px等)を設定し、通常の逆方向に持っていく手法です。
paddingで内側に入れられてしまったところから、h4だけ左方向に10px動かしましょう。「margin-left: -10px;」を設定すると左へ10px動いてくれます。

listのmargin-bottom

バナー部分はliで囲っています。この間は30pxあればいいんですが、何も設定しなくても7px程あいています。なので30px-7px=23px設定すればOK。
リストのmargin-bottom

フッターのCSS

最後にフッターのCSSをやっておしまいです。

footerのclearを忘れずに
余白を得るため#mainにmargin-bottoomを追加
h5をulの中へ移動
h5のspanタグに色づけ
ulのfloat、横幅、margin-right
最後のulのmarginを戻す
liにインデント処理
リンクはaタグ
copyrightのスタイル

#main {
    clear: both;
    width: 700px;
    float: left;
    margin-right: 20px;
    margin-bottom: 60px;
}
footer {
    clear: both;
    padding: 30px 10px;
    border-top: 1px solid #bababa;
}
footer h5 {
    font-size: 1.167em;
    margin-bottom: 20px;
}
footer h5 span {
    color: #009bdb;
}
footer ul {
    float: left;
    width: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
}
footer ul.lastChild {
    margin-right: 0;
}
footer ul li {
    text-indent: 1em;
    margin-bottom: 20px;
}
footer ul li a {
    text-decoration: none;
    color: #404040;
}
footer p {
    clear: both;
    text-align: center;
    color: #bababa;
}

余白を得るため#mainにmargin-bottoomを追加

footerと#mainとの間の余白はどこでとればいいでしょうか?footerのmargin-topでしたいところなんですが、直前までfloatが効いている関係でmargin-topが効きません。そこで#mainのmargin-bottomとして再定義します。

h5をulの中へ移動

ulをfloatにかけ横並びにする関係で、h5をulの中にいれましょう。(最初に気づけばよかったんですが。。。)

    ■サービス紹介
  • HTMLについて
  • CSSについて
  • jQueryについて
  • ホームページを作ろう

ulのfloat、横幅、margin-right

ここはグローバルナビゲーションと同じで対象がulに変わっただけです。最後のulにlastChildというclassをつけているので、これにmargin-rightを0にすればOK。

他も特別難しいことはなく、基本のCSSのみで完結できます。

CSSの完成

これでCSSが出来たはずです。保存し、HTMLファイルをブラウザで開いてみて問題がないか確認しましょう。
どこかが崩れている、完成形と違う、という場合はCSSのどこかが間違っている可能性が大きいです。セレクタのclassやhtmlタグの違いは大丈夫か、プロパティ名は打ち間違えてないか、値の単位は抜けてないか、閉じにかっこ「}」は抜けてないか…など。間違っているときはだいたいこの辺りが考えられます。

無事表示できたら、ファイル一式をいつでも見れるように保存しておきましょう。サイトをつくるときに骨組みとして使っていただいて構いません。これを基本としてカスタマイズして使うのもいいでしょう。

・サンプルサイトの完成版
sample site完成版

・完全版CSSファイル
CSS

初心者のためのホームページ制作 まとめ

ここまで大変お疲れ様でした。初めてのHTML、CSSはなれないことばかりで大変だったかと思います。しかしやってみれば意外と簡単だったりもします。htmlとcssを押さえれば自由にファイルを作ることができます。これにjavascriptやphpなどプログラミング言語を交えればメールフォームやブログのように動的にページ生成したり、スライダーやスライドショーなど動きのあるアニメーションなどもできるようになります。

是非ウェブサイト制作の楽しみを知り、自身で制作・更新する楽しみを身につけていっていただければ幸いです。

ご協力ください

ホームページ制作に関する授業をこのような形で公開します。「こんなスキルを身につけたい」「これがよくわからない」といったことを教えて下さい。

お問い合わせフォームから連絡する

個別のフォローも対応

「マンツーマンで個別で指導してほしい」
という方はオンラインと出張の個人指導ホームページ制作レッスンをご利用ください。全国どちらでも対応可能です。あなたの環境にあったアドバイスをさせていただきます。

←目次に戻る
メールコンサルティング
WordPress保守管理サービス

カテゴリCSS初心者

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

12.CSSを書いてレイアウトやデザインを施す(前編)
2013年10月31日
タグ: css
カテゴリー: CSS初心者
コラム:class名とid名はどうやってつければいい?
2013年10月28日
タグ: css
カテゴリー: CSS初心者
11.HTMLファイルにclassとidをつける
2013年10月26日
タグ: css
カテゴリー: CSS初心者

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.