上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」から。
 今回は、タグ分離型スタイルシートの書式です。

 タグの時は…

スタイルシートは<b style="border-bottom:2px solid #f00;">難しくない</b>ですよ~
(*1)

 と、こんな感じで記述していました。タグ(<b>)とCSS(style="~~~")が合体した記述方法です。
 しかし、ブログの「テンプレート管理画面」をみると、「HTMLの編集」「CSSの編集」と言う画面が分かれているサービスのほうが主流なのです。
■こちらも参照してください
CSSが何のことだかわからない(FC2)
スタイルシートの書き方3種類

 この「CSS編集画面」で保存したファイルがスタイルシートファイルです。こちらに記述するときの書式で、上の「タグ一体型CSS」を全く同じ表示にするには…

HTML(記事などの編集も)部分スタイルシート部分
スタイルシートは<b>難しくない</b>ですよ~b { border-bottom:2px solid #f00; }

 こんな風になります。

 頭の「b」が、タグの「<b> ~ </b>」と対応しています。
 例えば「<strong> ~ </strong>」のタグにスタイル指定する場合は

strong { 〇〇 : ◇◇ ; }

 などと記述します。
 部品は半角の「」「」を使い、「」を命令文一文ごと、最後につけるのを忘れないようにしてください。


実際に表示確認してみる(編集可)
【HTML】

【CSS】



 HTML(テキスト記事編集画面も同様)部分は「<b>難しくない</b>」と記述しただけで、「タグ一体型で書いた(style="~~")は書かれていませんが」、きちんと同様のスタイルが当てられます。

■タグ一体型と分離型の特徴の違いは?

 タグ一体型では、そのタグのみの専用のCSSとなります。
 例えば、<b>タグに(style="~~")と書きますが、他の部分にある<b>タグには、このスタイルは当たりません。

 タグ分離型では、(b{~~~})と記述した場合、そのテンプレートを使っている、つまりCSSファイルを使っているすべてのページのすべての<b>タグに、同様のスタイルが当たります。


上手くいかないときは?

 スタイルシートの記述は、すべて半角文字です。上手くいかない場合は、全角文字が使われていないかどうか確認してください。
■全角文字が使える部分

 注意書き部分(きちんとした書式があります。闇雲に注意書きをすると、上手くいかない場合があります。)、フォントスタイル(「メイリオ」等のフォント)など。
■スタイルシートでよく間違える記述例。

①英文や記号の何処かに全角文字が紛れ込んでいる。
②「;」セミコロン忘れ。
③「}」閉じ括弧忘れ。
④「:」コロンと「;」セミコロン打ち間違い。



 また、スタイルシートファイルの記述部分は「半角スペース」「Tabスペース」「改行」は無視されるという特性を使って、スタイルシートファイル記述部分を、見やすく改行、整形することができます。

*こんな感じのイメージ。命令文中の重要な半角スペース以外は無視されます。
strong {
     border:1px solid #000;
     color:#fff;
     padding:5px 20px;
     }
b     {
     border-bottom:5px inset:#752;
     margin:20px;
     }


■次のページへ進む!
テンプレCSSを書く Part.2(クラス)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Sun.03.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。