おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

レイアウトとデザインを整えよう -『HTML5&CSS3レッスンブック』第2章

f:id:shimehitsu14:20170612235922j:plain

www.okigaru-migaru.net

前回で基本となるページを作成しました。今回は主にCSSを変更してレイアウトとデザインを整えていきます。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

使用しているテキストはエビスコムさんの『HTML5&CSS3レッスンブック』です。くどいようですがこれは毎回紹介しますからね。

レイアウトとデザイン

http://test.okigaru-migaru.net/html5css3/chap02/news01.html

第2章終了時点のページがこちらです。一気に見栄えが出てきましたね!

この章ではマージンやパディングなどの配置、影の表示、Webフォントの使用などを解説されています。

特に影の表示で一気に「おしゃれなページだなぁ〜」と感じましたね。ちょっとした変化ですが、大きく見え方が変わってきます。

今回はHTMLは特に変更がなくCSSのみです。変更点があった記述だけ引用しております。

CSS

@import url(http://fonts.googleapis.com/css?family=Chango);

body {
    background-color: #edede3;
    margin: 0;
}

h1 {
    margin-top: 0px;
    margin-bottom: 0;
}

/* ヘッダー */
header {
    background-color: #ffffff;
    border-bottom: solid 1px #aaaaaa;
    margin-bottom: 30px;
    -webkit-box-shadow: 0 1px 7px #aaaaaa;
    box-shadow: 0 1px 7px #aaaaaa;
    padding: 5px;
}

header h1 {
    font-family: 'Chango', cursive;
    font-size: 24px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 記事 */
article {
    background-color: #ffffff;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #aaaaaa;
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 15px;
    -webkit-box-shadow: 1px 1px 3px #aaaaaa;
    box-shadow: 1px 1px 3px #aaaaaa;
    border-radius: 20px;
}

/* フッター */
footer {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

ボックスのセンタリングはマージンで行う

テキストのセンタリングはtext-alignプロパティで行いますが、ボックス自体のセンタリングは左右のマージンをautoに設定することで行います。

ここではheader h1(タイトル)、article、footerでその設定をしています。

罫線とパディングを加えると幅が大きくなる

articleの横幅は900pxに設定しています。

そこに罫線とパディングを加えると、900pxに罫線とパディング分の横幅がプラスされます。

そこでbox-sizingプロパティの値をborder-boxにしてやることで、元々設定していた900pxで収まるように調整されます。

一部のブラウザではベンダープレフィックスを付けて記述する必要があるとのことで

  • -webkit-:iOS4.xとAndroid2.3.x
  • -moz-:FireFox

をプロパティの頭に付けたものも記述しておきます。

影を付けて立体感を出す

ヘッダーの境界部分とarticleに影が付いています。

所詮はしょっぱい視覚効果……と思ってましたが、これがあるのとないのとでは大違いですね。一気に見た目が良くなりました。

box-shadowプロパティの値は順番に、「横オフセット 縦オフセット ぼかし幅 影の色」の順に並んでいます。ヘッダーの横オフセットが0なのは縦だけでOKだからですね。

逆方向に影を付ける場合はオフセットの値を「-」で記述すれば可能です。

罫線の角を丸くする

articleセレクタのborder-rediusプロパティは罫線の角を丸くするものです。

この数値を大きくするほど丸くなります。pxで指定しているのは半径の大きさを示しているからです。

4つの角ごとに変えることも可能で、値は左上 右上 右下 左下、の順に記述します。

Webフォントを利用する

タイトルはWebフォントを使用しています。

fonts.google.com

ここではGoogle Fontsというサービスを使っています。欧文フォントのみですが無料で使うことができます。

テキストにスクショ付きで使い方の解説がありましたが、だいぶページの仕様が変わっていました。まぁ何となくでわかりますが。

表示されたコードをCSSに記述して、フォントを変えたいセレクタのfont-familyプロパティで指定してやります。今回はChangoというWebフォントですね。代替フォントでcursiveも記述してやります。

次回は画像の表示

次は画像の表示です。今や画像を使わないウェブサイトやブログなんてありませんからね。重要項目です。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック