(初回投稿日:2015年07月27日)今回は、CSSの基本の「書き方」や「HTML上に置く場所」を見てみよう。いうカタチが基本です。ブラウザに向けての指令です。(中かっこ)」で囲みます。セレクタ(selector)とは、HTML要素をセレクトするもの。HTML要素を特定します。HTML要素の名前、id名(HTML要素のid属性の値)、class名(class属性の値)など、いろいろな種類があります。「color」なら文字の色、「background-color」なら背景色、「font-size」ならフォントサイズ、といった具合で、だいたい英語そのまんまなのでわかりやすい。これもたくさん種類があります。値(value)はもちろんプロパティの値。スタイルをどうしたいかを書きます。色なら「red」とか「#ff0000」とか、サイズなら「20px」や「2em」といったかんじで、プロパティによって値の書き方もいろいろあります。複数のスタイルを指定する方法1つのセレクタに複数のスタイルを指定するには、プロパティと値のセットを「;(セミコロン)」で区切ります。「;」が抜けてると、エラーになるよ。指定の最終行の「;」は、あっても無くてもOK。}上の書き方は、読みやすいように改行していますが、改行やスペースはあっても無くてもOK。h1{color:red;font-size:120%;line-height:1em}ただ、CSSのショートハンド(複数の値をいっぺんに指定する方法)を使う時は、値を半角スペースで区切るルールがあり、その半角スペースは省略不可。(ショートハンドについては、後日まとめます。複数の「セレクタ」に同じスタイルを指定したい時は「,(カンマ)」で区切ってひとまとめにして、同じ指定をすることができます。直前)に「,」があるとエラーになるので要注意です。(こういう細か〜いタイプミスに気をつけなきゃいけないのがCSS。}これも、改行やスペースは必須ではありません。/*CSSのコメントはこのように書きます。*/CSSを置く場所CSSをHTMLファイルに読み込む方法です。下記の4つの方法があります。それぞれの方法に利点がありますので、臨機応変に使い分けよう。<style>要素でHTMLの<head>内に直接CSSを書く外部CSSファイルにして<head>内に<link>要素で読み込む各要素にインラインで書く<style>要素で<body>内に書く(5.1仕様外)<style>要素でHTMLの<head>内に直接CSSを書くHTMLの<head>部分で、<style>〜</style>の中に直接CSSを書く方法です。この方法で書いたCSSは、そのHTMLファイルだけに有効。すべてのHTMLファイルに同じスタイルを適用したい場合は、全部のHTMLファイルに同じコトを書かなきゃなりません。これじゃ編集作業も大変ですね。この方法はあまりお勧めしません。外部CSSファイルにしたほうが編集が楽だから。そのページにしか使わないスタイルを書く時には有効な方法です。期間限定の特設ページなどの場合。そのHTMLファイルが不要になった場合、CSSも一緒に始末できるので便利です。type属性を略しています。type属性のデフォルトは「text/css」なので、type属性が無ければブラウザはこのMIMEタイプで解釈します(HTML5から)。HTML内に書いてみよう」をご覧ください。外部CSSファイルにして<head>内に<link>要素で読み込むこれが最もスタンダードな方法です。「○○○.css」と拡張子をつけてCSSを別ファイルにし、<link>要素でHTMLに読み込ませる方法。編集するときは、たくさんのHTMLファイルを修正するのではなく、外部CSSファイルを直すだけで済むので効率的なんです。文字エンコードの宣言(@charset使用)についてもこちらで触れています。複数の外部CSSファイルを読み込むこともできます<link>要素を複数書いて、複数の外部CSSファイルをHTMLに読み込むことができます。CSSファイルを分けたほうが、編集しやすいので、複数に分けると便利ですね。ブラウザのデフォルトスタイルをリセットするためのCSSは、1度書いたらめったに修正しないので、分けておいたほうがいい。他のCSSの編集の時に邪魔にならないし、間違っていじってしまうことも避けられます。PCビューでのスタイルと、タブレットやスマホ用のスタイルも分けたほうが、自分がわかりやすいです。></head>この場合、書く順番(外部CSSファイルを読み込む順番)が大事です。CSSには「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあるので。2.レイアウト用のCSSという流れで、サイトのスタイルを整えています。これを逆に書いちゃったら、せっかく指定したスタイルをリセットしちゃうことに。ここでは相対URLを使っていますが、絶対URLでもOK。ほかのサーバに上げたCSSも持って来れます。相対パス)をご覧ください。使っても、複数のCSSファイルを読み込めます。これはWordPressを使う時にも便利です。全部書いてもいいんですが、分けたほうが編集しやすいので。読み込むほかのCSSは「CSS」ディレクトリにまとめることができて便利です。外部CSSファイルの中で、複数の他のCSSファイルを指定します。/*レスポンシブ用*/HTMLのhead部分には、1つだけ外部CSSファイルを指定します。使えば、それぞれのCSSファイルを「ディスプレイ用」「印刷用」などと切り替えることもできます。この場合も、書く順番(外部CSSファイルを読み込む順番)が大事です。CSSは「前に読み込まれたものを、後で読み込んだものが上書きする」というルールがあるので。各要素にインラインで書く要素に「style属性」を使って、直接その要素だけのスタイルを書くこともできます。ページ内のある要素だけに特にスタイルを与えたい時に、使います。W3Cで「HTML文書とCSSを分離する」ことが推奨されているので、この方法は多用せず、ここぞという時にだけ使おう。コレを使うと、あとで編集したい時にメッチャ大変だから。</p>このインラインで書く方法はCSSの優先度的に最強。他のどんなスタイル指定よりも、インラインスタイルが最優先で適用されます。<style>要素で<body>内に書く(5.1仕様外)HTML5.0の策定中に「scoped属性」が仕様にありましたが、勧告で削除されました。<body>内に置けるという仕様で、その親要素の範囲内にのみスタイルが適用されるというものでした。一度もサポートしていません。内のスタイルは、HTML全体に適用する機能は残しています。<head>内に制限」とされてはいますが。<style>要素を書くのが便利だったため、勧告前の各ブラウザの実装で、多くのユーザーが使用したためではないかと思います。勧告後に文法違反となったわけですが、急に実装を止められても困るユーザーが多いのではないでしょうか。このような書き方をしても、たいていは意図通りに表示されます。この段落のborderは赤。Recommendation)」になっています(次の段階で「勧告」)が、そこに下記の記述があります。<style>要素を使用することをお勧めします。使用すると、スタイルの変更や上書きが起こりますので注意して使用すべきです。<body>内で使えるかも。勧告時にこの部分が削除される可能性もありますけど、期待したいところです。次回は「セレクタ」の種類についてざっくり見てみましょう。セレクタの種類によって「CSSの優先度のルール」が決まるので、どんな種類があるかだけ、ざっと紹介します。カスケーディングって何?Tweetやる気を保つためにランキングに参加しています。(ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。わかりやすい管理画面で、初めてでもすんなり使えます。両方とも、なんといっても料金が安いです。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。そのままオートリンクになる仕様です。当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません。メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。titleライブドアブログのカスタマイズについて質問です。法人用テンプレート2というテンプレートの記事表示を(たとえばトップに10記事表示するとすれば上の4記事だけモザイクブロックというテンプレートのような記事表示、その他の記事はそのまま)のようにしたいと思うのですがやり方をご存知でしたら教えていただけないでしょうか?よろしくお願いします。私は残念ながらライブドアブログはやったことがなくて、詳細わかりません。法人用テンプレってことは有料ですよね?ライブドアにお問い合わせください。もったいないよお金が。基礎から覚える、深く理解できる。yuki★hataせめて月1回の更新をめざします~。