スタイルシートって、色々な書き方があります。
スタイルシートが、何が何だか分からなくなってきますよね。
一度整理してみましょう。
例えば、こんな時です。
タグ、「<div>」とか「<span>」とか「<strong>」も「<table>」も、「<>」で囲まれている部分に直接「style="〇〇"」を取り付けるタイプ。
これは、こんなふうに記述します。
HTML文書の「<head> ～ </head>」内に、上記太字の部分をそのまま書きます。
「<!--」から「-->」内は、自由にスタイルシートを記述することができます。もちろん「旗印（クラス）」も当てることができます。
もうひとつが、ほとんどのブログサービスで使われる方法です。FC2も同じ方法。
さきほどの、「直接HTML」に書いた部分を、「スタイルシートファイル」という、HTMLとはもう一つ別のファイルにして、ページが開かれてHTMLが読み込まれたとき、そのスタイルシートファイルを「読み込み」するタイプです。
「スタイルシートファイル」とか、大層なことを言っても、たいしたことはありません。
ウィンドウズであれば「メモ帳」なんかで簡単に作れます。
スタイルシートを、メモ帳にコピペし、「文字コードをHTMLに合わせて」保存するだけです。
最後に、「～～.txt」となっているファイルを、「～～.css」と書き換えれば、完了。スタイルシートファイルの出来上がりです。
HTML見本は、こんな感じです。
この太字の部分が、呼び出しの命令文です。
その中の赤字の部分を、アップロードしておいた「スタイルシートファイル」のURLに置き換えると言うわけです。
やっぱり、一番スマートなのがこの方法なので（HTMLファイル部分がごちゃごちゃしてワケが分からなくなりにくい。もしかしたら、ロボットも迷っているかもという噂もありますが…）この流儀を使っているホームページが日本では多いみたいです。
■前のページに戻る。
スタイルシートってなに？
■次のページはコチラです。
テンプレCSSの書き方
■CSSメインメニュー
実用的スタイルシート入門
スタイルシートが、何が何だか分からなくなってきますよね。
一度整理してみましょう。
タグに直接書く。
例えば、こんな時です。
今日は、久々の晴れ模様。<strong style="border:1px solid #f00;">ピクニック</strong>にでも行きましょうか？
スタイルシートの勉強は、その後で。
スタイルシートの勉強は、その後で。
タグ、「<div>」とか「<span>」とか「<strong>」も「<table>」も、「<>」で囲まれている部分に直接「style="〇〇"」を取り付けるタイプ。
HTMLに直接書く。
これは、こんなふうに記述します。
<html>
<head>
<style type="text/css">
<!--
body { padding : 0 ; }
strong { border-bottom : 2px solid #f00 ; }
-->
</style>
</head>
<body>
今日は、久々の晴れ模様。<strong>ピクニック</strong>にでも行きましょうか？
スタイルシートの勉強は、その後で。
</body>
</html>
<head>
<style type="text/css">
<!--
body { padding : 0 ; }
strong { border-bottom : 2px solid #f00 ; }
-->
</style>
</head>
<body>
今日は、久々の晴れ模様。<strong>ピクニック</strong>にでも行きましょうか？
スタイルシートの勉強は、その後で。
</body>
</html>
HTML文書の「<head> ～ </head>」内に、上記太字の部分をそのまま書きます。
「<!--」から「-->」内は、自由にスタイルシートを記述することができます。もちろん「旗印（クラス）」も当てることができます。
FC2ブログで言えば、「スタイルシートの編集」部分を、直接「HTML編集」の部分に書いてしまおうということです。
もちろん、FC2でも可能ですが…意味はないかも☆
もちろん、FC2でも可能ですが…意味はないかも☆
呼び出し
もうひとつが、ほとんどのブログサービスで使われる方法です。FC2も同じ方法。
さきほどの、「直接HTML」に書いた部分を、「スタイルシートファイル」という、HTMLとはもう一つ別のファイルにして、ページが開かれてHTMLが読み込まれたとき、そのスタイルシートファイルを「読み込み」するタイプです。
「スタイルシートファイル」とか、大層なことを言っても、たいしたことはありません。
ウィンドウズであれば「メモ帳」なんかで簡単に作れます。
スタイルシートを、メモ帳にコピペし、「文字コードをHTMLに合わせて」保存するだけです。
最後に、「～～.txt」となっているファイルを、「～～.css」と書き換えれば、完了。スタイルシートファイルの出来上がりです。
HTML見本は、こんな感じです。
<html>
<head>
<link rel="stylesheet" href="http://〇〇〇〇.css" type="text/css">
</head>
<body>
今日は、久々の晴れ模様。<strong>ピクニック</strong>にでも行きましょうか？
スタイルシートの勉強は、その後で。
</body>
</html>
<head>
<link rel="stylesheet" href="http://〇〇〇〇.css" type="text/css">
</head>
<body>
今日は、久々の晴れ模様。<strong>ピクニック</strong>にでも行きましょうか？
スタイルシートの勉強は、その後で。
</body>
</html>
この太字の部分が、呼び出しの命令文です。
その中の赤字の部分を、アップロードしておいた「スタイルシートファイル」のURLに置き換えると言うわけです。
やっぱり、一番スマートなのがこの方法なので（HTMLファイル部分がごちゃごちゃしてワケが分からなくなりにくい。もしかしたら、ロボットも迷っているかもという噂もありますが…）この流儀を使っているホームページが日本では多いみたいです。
ただ、サーバーの調子がかんばしくない場合は、まとめた方がいいような気もします。HTMLだけ読み込まれて、CSSファイルが読み込まれなかったりすると…すっぴんのHTMLがそのまま…
■前のページに戻る。
スタイルシートってなに？
■次のページはコチラです。
テンプレCSSの書き方
■CSSメインメニュー
実用的スタイルシート入門
スポンサーリンク
Tue.04.06.2010
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
