So-net無料ブログ作成
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
おさらい ブログトップ

もう一度基礎をおさらいしてみよう [おさらい]

kyara1.png:「Q太郎さん、これで
「フォント」・「背景」・「ボーダー」終了なの」

kyara2.png:「ああ、そうだな。
細かく言えばまだあるが、すぐに使うのは前回までに
説明したものだろう」

kyara1.png:「じゃあ、もう一度
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-----*/entryNice・コメント・コメント欄・トラックバックエリア
.entry h4上記.entry欄のNice・コメント・コメントを書く
トラックバックの文字
#nice h4Nice!欄の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 imgso-netブログロゴ
#rssfeedRSS1.0|RSS2.0部分
⑤/*-----Footer-----*/#footerフッター全体
.copyright左下 So-netトップ - ブログ - ソネットポイント部分
kyara2.png:「これを覚えておけば、あとは応用だけだ。 どうだ?もう次のステップへ行けるか?」 kyara1.png:「はい、まだやってみたいこともあるので 是非お願いします!!!」 kyara2.png「Good」

おさらい ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。