【こnoページの場所】
 
カスタマイズする!ブログ講座 CSSやHTMLを使ってソース編集に挑戦!
1 CSSとは? 5 リンクの設定を変更しよう
2 「ブロガリ」でCSSソース編集に挑戦 6 文字の変更してみよう
3 タイトル画像を変更してみよう 7 罫線のデザインを変更しよう
4 ページの背景を変更しよう    
※BLOGari(ブロガリ)の高度なデザイン編集はサポート外となります。
 本ページをご参考にお試し下さい。
ブログがもっと楽しくなる!CSSを始めよう!
ZAQのブログサービス「ブロガリ」 ブログサービスを利用して毎日の出来事や趣味についてなど記事を書いていると、「記事の内容にあったデザインにしたい!」「もっと自分らしいページにしてみたい!」と思うことありませんか?実はブログのデザインってあらかじめ用意されたものを選ぶだけではなく、自由にデザインすることが出来るのです。それを可能にするのが今回ご紹介するCSS(スタイルシート)。CSSを使えば、ブログをオリジナルのデザインにカスタマイズすることができるのです。もっとブログを楽しむために。それではCSSとは何かから見ていきましょう。

cssとは?

CSSとはWebページのレイアウトや文字の大きさ、書体、色、行間の幅などの装飾部分を作るための雛形で、これを使うとページの見ばえを自由にきめ細かく指定・一括管理することができます。CSSを用いることデザイン変更が簡単にできたり、検索エンジンにヒットしやすくなるなど、多くのメリットがあり、「装飾情報はCSS、文書情報はHTML」というふうに分離して作られるようになってきました。

cssの仕組み

※スタイルシートの属性の中には、ブラウザーによっては反映されないものや見た目が変わるものなどもあります。
スタイルシートの基本ルール

スタイルシートでは、まず「なにに対してデザインを加えるか」を指定し、その後に「どのようなデザイン効果を与えるか」を{〜}で囲まれた記号によって指示します。たとえば見出し(h1)の色を赤(#FF3300)に変える場合なら、下のような記述になります。

例)見出し(h1)の色を変える
上のようにスタイルシートの記述は、セレクタと{プロパティ: 値; }がワンセットになります。プロパティとその値はコロン(:)で区切って記述、プロパティと値のペアはセミコロン(;)で区切って複数記述することができます。文字はすべて半角で入力してください。
この基本ルールさえ覚えれば、あとはセレクタと{}内の要素を入れ替えるだけで、さまざまなデザインを指定することができます。
例)見出しの色と大きさを変える
●1回の記述で一気にデザイン変更 HTMLのタグでデザイン要素を指定する場合、たとえば上記のように見出しの色やサイズを変えるなら、見出しを立てるごとに毎回<h1>〜</h1>というタグを書き込んでいかなければなりません。
スタイルシートなら、h1{ color: #XXXXXX; font-size:XXX%; }という指定を1回書き込むだけで、同じページ内のすべての見出しを同じ色、サイズに統一することができます。

idとclass

CSSでは、セレクタ部分をid(特定の何かとしての定義)やclass(ひとつのくくりとしての定義)と指定して記述する方法もあります。これらは、同じタグ名に別のスタイルを指定したり、ブロックでソースを管理する時に役立ちます。
idは「#id名」と記述し、1ページに同じ名前が使えるのは1度きりです。
classは「.class名」と記述し、1ページに同じ名前を何回も使う(何度も同じスタイルを指定する)ことができます。指定が反映される優先順位はidのほうがclassよりも上です。
スタイルシートの書き方
●まずはメタタグを記入 スタイルシートを利用するには、まず最初に「メタタグ」を記入する必要があります。
メタタグとは、HTMLファイルの冒頭にある<head>〜</head>の部分に制作情報などを埋め込むためのタグで、ブラウザー上には表示されません。ホームページを閲覧する人には見えませんが、検索エンジンに対して「このホームページはCSSを使って書いています」という情報を送る役割を果たします。
スタイルシートを使う場合のメタタグ
●スタイルシートの記述方法は3種類 1. 外部ファイルに記述(CSS専用ファイルに書き込む)

HTMLファイルとは別に「CSS専用ファイル」を作り、そこに記述していく方法です。
デザインと文書の分離、個別作成・管理というCSSのメリットを生かすなら、このように別ファイルを使って記述する方法がおすすめ。CSS用のファイルは拡張子を「css」とし、HTMLファイルのHEAD部分にリンクを張って、スタイルシートの指定を反映させます。
ZAQのブログサービス「ブロガリ」でも、この方法を使ってお客さま自身でマイブログのカスタマイズをしていただけるしくみになっています。

2. HTMLファイル(ヘッダー部)にCSSを書き込む

ソース HTMLファイルの冒頭にある<head>〜</head>の部分にCSSをまとめて記述する方法です。この場合、最初に「styleタグ」を入力し、ここがスタイルシートを記述している場所であることを示します。

設定する内容が多い場合や、同じ内容のcssを複数ページに渡って使用する場合は、1の方がおすすめです。

3. HTMLファイル(個別タグ)にCSSを書き込む

HTMLの個別タグに対してCSSを記述し、スタイルを指定する方法もあります。
多用するとソースが煩雑になるので一般的にあまり使われませんが、「この部分だけ」とポイントを絞って指定したい場合などには手軽な記述方法といえるでしょう。

ソース

注意しよう!ブラウザーによる表示のちがい

CSSで作成したWebページは、閲覧するブラウザーによって表示のしかたが多少ちがう部分があります。また、スタイルシートへの対応が不完全な旧ブラウザー(Internet Explorer3.0以前、Netscape Navigator4.0以前など)では、レイアウトが崩れてうまく表示されません。
現在一般に普及率が高いブラウザーはWindows標準搭載のInternet Explorerなので、多くのホームページはその最近のバージョンを想定して作られています。

表示例 【表示のしかたが違う例】
例えば同じ点線の指定でも、ブラウザーによってはこれだけ見え方が違います。

 

  つぎへ>




■よろしければアンケートにご協力ください
  たいへんわかりやすかった
  わかりやすかった
  少しわかりにくかった
  わかりにくかった
■ご意見、ご要望等ございましたらご記入ください

※このフォームからのお問い合わせには、個別に回答させていただくことができませんのであらかじめご了承ください。また、個人情報(お名前、住所、メールアドレス、電話番号など)をご記入にならないよう、ご注意ください。

zaq zaq