ブログ練習帳

11月2011

スタイルシートを外部化してみる

なんか、プロの人のサイト見てて、カッコいいなぁと思い、スタイルシートの外部化をしてみたくなりました。

実際は、外部化することで、増えたCSSファイルを効率的に管理したりして、いろーいろ便利なことがあるらしいです。でも、上手にCSSファイルを分割できたりしてないと、あんまり意味ない気もするので、「とりあえず外部化してみたい」という目的でトライです。CSSを適切に分散化させて管理させるとか、本当は、こちらをもっと十分にやることを考えるべきなんでしょうけど…。インポートを使う方法もいくつかあるようです。たとえば、(X)HTMLのhead内で、直接読み込んでしまうこともできるようですが、とりあえず、一種類、一般的に使われている（と思う）方法でトライします。

これが、今回のディレクトリ構造です。

まず、(X)HTMLへの記述です。ここでインポートを実行するCSSファイルを読み込みます。これは普通にlinkで読み込めばいいです。

XTHML

<link href="css/style.css" rel="stylesheet" type="text/css" />

次に、実際にインポートを実行するファイルstyle.cssを記述します。

style.css

@charset "utf-8"; 

@import url("index.css");

インポートするファイルindex.cssの記述方法ですが、インポートを実行するファイルstyle.cssの位置から見ての記述になります。まあ、あたりまえといわれれば、あたりまえなのですが、こういう初歩的なところでつまずくのが、見習いです。index.htmlからの場所として、@import url(“css/index.css”)じゃないのねぇと念押ししてしまう駆け出し用メモです。

例その2CSS

@charset "utf-8"; 

@import url("index.css"); 

@import url("index2.css"); 

p {

padding:1em;

}

例その2CSSのように、インポートを実行するCSSファイル内では、複数のファイルをインポートしたり、直接スタイルを記述できたりしますが、インポートを実行する行より前にスタイルなどの記述をしちゃだめだそうで…。すべてのインポートの記述が書き終わった後ろに、スタイルを書くのはOKです。

2011年11月30日7:38 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

Word Press で予定投稿

Word Pressで投稿の文章を書きおわると、すぐに右上部にある「公開」のところから「公開」をクリックして、そのまますぐに公開してました。でも、同じ日に何回も投稿ばかりしてると、仕事しないで、なにしてるんだ！っていわれそうなので、未来の日付で投稿したいなぁということがあります。（というか、ホントは出張の日にも投稿したいけど、外からアクセスする時間が取れそうにないので、と言い訳）

そんなとき、「予定投稿」というのがあります。めちゃくちゃデフォルトな設定みたいですが、気づきませんでした…。(そっちのほうが問題ですね、こりゃ）

ということで、デフォルトでできるWord Pressの予定投稿ですぅ。