IDの使い方
今回は主にIDの使い方を勉強しました。
IDの使い方
まず今回の記述です。
/*記事一覧のページ*/
#posts article img {
float: left;
margin-right: 20px;
}
#posts article h1{
font-size: 24px
}
#posts section
{
width: 900px;
margin-left: auto;
margin-right: auto;
}
#posts header{
margin-bottom: 20px;
}
HTML
<body id="posts">
こうして振り返ってみると、CSSで書いていることが多い＝HTMLの記述が多い、は成立しないことがわかります。ではさっそくIDの使い方を勉強していきます。
HTMLでの書き方は、<body id="posts">のように、
<使いたい要素 id="ID名">となります。このID名はアルファベットと数字、ハイフンとアンダーバーを使って自由に決めることができます。使いたい装飾に適したIDを付けるよ良いと言われています。
CSSでの書き方は、
#posts article imgのように、#ID名 使う場所 で構成されています。
#posts article imgの場合で言えば、postsがID名、article imgが使う場所です。
使う場所を記入する必要はありませんが、この記述の優先順位が下がってしまうため、確実に表示させるなら、使う場所まで記述するとより確実です。
今回の場合で言えば、postsというID名しか使用していませんが、それぞれ使う場所が異なるため、結果的にセクション名が異なる形になっています。
まとめ
IDはこれから間違いなく使っていくことになるので、使い方をしっかり覚えておきたいです。一発で覚えることができなかったとしても、何度なく使っていけば、自然と覚えると思うので、めげずに勉強していこうと思います。
以下今回のBeforeAfterです。
Before
After
お知らせと記事部分が揃っているのがわかると思います。もっと言うと、フォントサイズを変えたり、余白の調整をしていますが、ぱっと見ではほとんどわからない変化です。
引き続き勉強していきます。
