横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
もう一度基礎をおさらいしてみよう [おさらい]
:「Q太郎さん、これで 「フォント」・「背景」・「ボーダー」終了なの」 :「ああ、そうだな。 細かく言えばまだあるが、すぐに使うのは前回までに 説明したものだろう」 :「じゃあ、もう一度 CSSの種類とCSSが該当する範囲を復習してみるね」
フォント | 要素 | CSS名 | ★に入る値(具体例) |
文字の太さ | font-weight:★ | 100~900 | |
文字の大きさ | font-size:★ | 数字+単位 pt,pxなど | |
文字の種類 | font-family:★ | MS 明朝 | |
斜体 | font-style:★ | italic | |
文字の色 | color:★ | red,#0000ff | |
背景 | 背景色 | background-color:★ | blue,#ff0000 |
背景画像 | background-image:url(★) | アップロード済みのファイルを クリックしてください | |
背景画像の位置 | background-position:★ | right,left,center | |
背景画像繰り返し | background-repeat:★ | repeat,repeat-x,repeat-y,none | |
背景画像の一括指定 | background:★ | ファイルURL 位置要素の値 繰り返し要素の値 | |
枠線 | 枠線の種類 | border-style:★ | solid,dotted,dashed,double ridge,groove,inset,outset |
枠線の色 | border-color:★ | yellow,#ffff00 | |
枠線の太さ | border-width:★ | 数字+単位 pt,pxなど | |
枠線の一括指定 | border:★ | 枠線の種類の値 枠線の太さの値 枠線の色の値 |
区切り | ------{ } | 影響を及ぼす個所 |
①/*-----Common-----*/ | a | ブログ内のリンク個所 |
body | ブログ全体 | |
blockquote | 引用部分 | |
#container | バナー画像 | |
#banner | ブログタイトル+サブタイトル | |
#banner h1 | ブログタイトル | |
#banner h1 a | ブログタイトルのリンク | |
#lead | サブタイトル | |
区切り | ------{ } | 影響を及ぼす個所 |
②/*-----Content-----*/ | #content | サイドバーと記事部分 |
.archive-title | 前の10件/次の10件 前の記事/次の記事 ブログトップの部分 | |
.archive-bottom | 記事下の前の10件/次の10件 前の記事/次の記事 ブログトップの部分 | |
.archive-name | 前の記事(前の10件)|次の記事(次の10件)の部分 | |
.previousLink | 前の記事(前の10件)の部分 | |
.nextLink | 次の記事(次の10件)の部分 | |
.archive-links | ブログトップの部分 | |
#main | ピンクの+が敷き詰められている部分 | |
.articles | 記事部分(タイトル部分含む) | |
.articles-title a | 記事タイトルのリンク部分 | |
.articles-body | 記事本体部分 | |
.articles-bottom | なし | |
.articles-body img | 記事に挿入した画像 | |
.posted | 記事投稿した時間やNice・コメント・トラックバック数 | |
③/*-----Entry-----*/ | entry | Nice・コメント・コメント欄・トラックバックエリア |
.entry h4 | 上記.entry欄のNice・コメント・コメントを書く トラックバックの文字 | |
#nice h4 | Nice!欄のNiceの文字 | |
#nice li | Nice!欄のユーザーアイコン | |
.each-comment | 送信されたコメント1つごと | |
.each-comment img | コメントを送信したユーザーのアイコン | |
each-comment input | コメントを消すためのチェックボックス | |
.comments-body | 送信されたコメント内容 | |
each-comment input | コメントを消すためのチェックボックス | |
#nice li | Nice!欄のユーザーアイコン | |
#comment-write textarea | コメントを書く場所 | |
.comment-input | コメントの送信ボタン so-netユーザー以外の名前・URL入力 | |
#trackback-write p | トラックバックの段落 | |
#trackback-write form | トラックバックの入力フォーム・送信ボタン | |
.each-trackback | トラックバック一つごと | |
④/*-----Side-----*/ | #side-a, #side-b | サイドバーの領域全体 |
.sidebar | サイドバーの区切りごと | |
.sidebar-title | サイドバータイトル | |
.sidebar-body | サイドバーの中身の部分 | |
.sidebar-body li | サイドバーの中身の部分の序列 | |
.new | 読んでいるブログに表示されるNEWの文字 | |
dt.profile-img | プロフィール内 ブログオーナーの画像 | |
dd.profile-status | プロフィール内 Nice・記事(数) | |
#profile .profileLink | プロフィール内 プロフィールという文字 | |
.nice | プロフィール内Niceの文字 | |
#calendar table | カレンダーの << 2010 X月>>の部分 | |
#calendar th | カレンダーのマス目の見出し(曜日) | |
#calendar td | カレンダーの日付 | |
#calendar td.link | カレンダーの日付のリンク | |
#search .sidebar-body | 検索ボックス | |
.search-tbox | 検索ボタン | |
#rssRegist | ブログを作って読者登録部分 | |
rssRegist a | 上記リンク部分 | |
#powered img | so-netブログロゴ | |
#rssfeed | RSS1.0|RSS2.0部分 | |
⑤/*-----Footer-----*/ | #footer | フッター全体 |
.copyright | 左下 So-netトップ - ブログ - ソネットポイント部分 |