2016
10.29

HTMLで書いたタグにスタイリングして表現方法を学ぶ、楽しむ!

CSS, CSS3

CSSでスタイリングしてみよう

さて、前回に引き続いて、とりあえずコードを書きながら習得していきましょう。

ひとつひとつしっかり理解していきましょう ♪

– – –  – – – –  – – – –  – –  – – – –  –   – – –  – – – – –  – – – – –  – – – –  – – – –  – – – –  – – –

body {         /* bodyタグ全体に適用させる*/
width: 960px;         /* 幅を960pxにする*/
margin: 15px auto;           /*  全体からみたコンテンツ(中身)の位置を指定 */
font-family: Arial, “MS Trebuchet”, sans-serif;         /*フォントを指定 */
}

*ポイント*
どのタグも 適用させたいタグを最初に書いて、 { } でスタイルを指定していきます。

 

p {          /* pタグ全体に適用させる*/
margin:0 0 20px 0;         /*pタグの位置を指定する */
}

p, li {           /* pタグとliタグ全てに適用させる*/
line-height: 20px;        /* 行の高さを20pxにする*/
}

header#header {       /* headerタグのheaderアイディタグ全てに適用させる*/
width: 100%;         /* 横幅を100%表示させる */
}

header#header nav ul, #footer nav li {      /*headerタグのheaderアイディタグとnavタグ、ulタグ、footerタグとliタグにスタイルを適用させる */

list-style: none;       /* リストにスタイルをつけない */

margin: 0;        /* コンテンツの位置を0にする */

padding: 0;      /* コンテンツの位置を0にする  */

}

#header nav ul li, footer#footer nav ul li {          /* headerアイディタグとnavタグ、ulタグ、 footerタグとfooterアイディタグとnavタグ、ulタグ、liタグにスタイルを適用させる */

padding: 0;    /* コンテンツの位置を0にする */

margin: 0 20px 0 0;     /* 内容物の位置を左0 右20px 上0 下0にする */

display: inline;       /*   インライン要素で表示 */

}

section#main_section {              /*セクションタグのmain_sectionアイディにスタイルを適用させる */

float: left;       /* 左に寄せる */

width: 74%;      /* 幅を(全体の)74%にする */

}

section#main_section aside {         /*セクションタグのmain_sectionアイディと asideタグにスタイルを適用させる */

float: right;        /*右に寄せる */

width: 35%;         /*横幅を35%にする */

margin-left: 5%;       /* コンテンツを左から全体の内の5%のところに配置する */

font-size: 20px;         /* フォントサイズを20pxにする */

line-height: 40px;        /* 行の高さを40pxにする */

}

section#sidebar {       /* セクションタグのsidebarアイディにスタイルを適用させる */

float: left;         /*左に寄せる */

width: 25%;         /* 横幅を(全体の)25%にする */

}

footer#footer {         /* footerタグのfooterアイディにスタイルを適用させる */

clear: both;         /* floatタグを解除する */

width: 100%;             /*  横幅を(全体の)100%にする */

display: block;         /*  ブロック要素で表示 */

text-align: center;         /* 文章を中央に寄せる */

}

下図 : 出来上がったページとタグとの関係

 

★完成したウェブページを見る

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。