こんにちは! タグツクです。
タグツクでは、比較的簡単かつ使い所満載の
CSSタグの部品を紹介しています。
まだまだ載せきれていない事が沢山あるので、
これからも追加していこうと思っております。
どうぞよろしくお願いします。
このゾーンではタグの作り方を紹介しています。
■タグの構成、打ち方
/* コメント */
セレクタ名{
プロパティ:値; /* コメント */
プロパティ:値; /* コメント */
・
・
・
プロパティ:値; /* コメント */
}
★プロパティ:値;のセットはいくつでも入れることができます。
★{、}(中カッコ)や :、;(コロン、セミコロン)を忘れると正常に機能しないので注意!
★「/*」「*/」で囲まれた文字はCSSには影響しません。
メモ代わりに活用。
後で編集したくなったときにわかりやすいです。
■セレクタ名
.articleTime{ /* ←articleTimeとは日付のことですね */
プロパティ:値;
プロパティ:値;
・
・
・
プロパティ:値;
}
★「今からここを改造していきますよ」
と示すために入力します。
★セレクタ名とはボディ(全体)やヘッダー、記事部分などの
大まかな場所から細かい部品までに
それぞれ名づけられている名称です。
★ブログの画面上で右クリックしてソースを表示します。
その中に、 class=●● や id=●● といった文字が確認できると思います。
その●●の部分がセレクタ名です。
中からタグにしたいセレクタ名を見つけます。
★background-color:black;と入れてみて
色が黒くなった部分を見つければ
それが何のセレクタなのか解ると思います。
★CSSに書くときに、
classセレクタの場合 → 前にピリオドを付けて .●● とする。
idセレクタの場合 → 前にシャープを付けて #●● とする。
例)
↓ソースにて、セレクタを発見。
<span class="articleTime">
このセレクタはclassなので、前にピリオドを付けて
.articleTime{
となります。
■プロパティと値
★プロパティはそのセレクタの何を変えるのかを示します。
★値は、ボックスを変えるなら何色にするのか、線の太さはどうするのかなど、具体的にどうするかを示します。
★タグツクでは プロパティを赤文字で、値を青文字で表記しています。
★赤文字のうち太文字になっているものは一括プロパティといい、
上下左右で統一したいときや、小分けするのが大変なときに便利です。
例1)
overflow-y:auto; /* 縦方向にはみ出す時は縦にスクロールする */
overflow-x:auto; /* 横方向にはみ出す時は横にスクロールする */
このように同じ値を入力している場合は
overflow:auto; /* はみ出す時は縦でも横でもスクロールする */
というように、一括プロパティ「overflow」を使うことによってひとつにまとめることができます。
例2)
border-width:3px; /* 枠線の太さ→3px */
border-style:solid; /* 枠線の種類→一本線 */
border-color:#000000; /* 枠線の色→黒 */
3段も打つとちょっとしんどいし長ったらしいですね。これらは
border:3px solid #000000; /* 枠線→3pxで一本線で黒 */
それぜれの値を半角スペースで区切り、このようにすっきり楽にまとめることができます。
……………………………………………………………
では最後に、簡単なタグを作ってみます!
/* ブログ記事に表示される日付を消すタグ */
.articleTime{
display:none; /* 表示→無し */
タグの作り方がわかれば、
他から貰ってきたタグを自己流にアレンジできたり、
自作タグも作れるようになって自由自在。
アメブロを書くのがもっと楽しくなりそうですね!
では素敵なアメブロライフを!
▼質問ご意見等はここから。