上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 スタイルシートって、色々な書き方があります。
 スタイルシートが、何が何だか分からなくなってきますよね。

 一度整理してみましょう。


タグに直接書く。

 例えば、こんな時です。

 今日は、久々の晴れ模様。<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>

 HTML文書の「<head> ~ </head>」内に、上記太字の部分をそのまま書きます。
 「<!--」から「-->」内は、自由にスタイルシートを記述することができます。もちろん「旗印(クラス)」も当てることができます。
 FC2ブログで言えば、「スタイルシートの編集」部分を、直接「HTML編集」の部分に書いてしまおうということです。
 もちろん、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>

 この太字の部分が、呼び出しの命令文です。
 その中の赤字の部分を、アップロードしておいた「スタイルシートファイル」のURLに置き換えると言うわけです。

 やっぱり、一番スマートなのがこの方法なので(HTMLファイル部分がごちゃごちゃしてワケが分からなくなりにくい。もしかしたら、ロボットも迷っているかもという噂もありますが…)この流儀を使っているホームページが日本では多いみたいです。

 ただ、サーバーの調子がかんばしくない場合は、まとめた方がいいような気もします。HTMLだけ読み込まれて、CSSファイルが読み込まれなかったりすると…すっぴんのHTMLがそのまま…



■前のページに戻る。
スタイルシートってなに?

■次のページはコチラです。
テンプレCSSの書き方

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