株式会社アテンド0CSSの文法HTMLに文法があったように、CSSにも文法があります。p要素にCSSでデザインをしたい場合、まずは下のように書きます。{}このように装飾したい要素を指定して、「{}」(波括弧)の内側に装飾する内容を書き込んでいきます。ちなみに、装飾を適用させる対象となる要素を「セレクタ」、波括弧の部分を「宣言ブロック」と呼びます。試しに文字を20px、太字にする場合は宣言ブロックへ以下のように書きます。{font-size:20px;font-weight:bold;}宣言ブロックの中は、「プロパティ」「値」の順に書き込みます。上記の例だと、プロパティは「font-size」「font-weight」、値は「20px」「bold」という事です。これでp要素で囲んだ中の文字はすべて「20px・太字」の文字に変化します。CSSを書くとき、プロパティの後ろには「:(コロン)」、値の後ろには「;(セミコロン)」を必ず書きこんでください。CSSを書いているのに、要素に変化がない時に注意深くチェックすると、「コロンとセミコロンを間違えている」だとか、「抜けている」ということが時々あります・・・:(コロン);(セミコロン)は間違えたり忘れたりしやすい要素ですので、注意してください。CSSは要素を指定して、プロパティ、値を入力する先ほど説明したように、CSSを使って装飾したい要素を指定して、それからどのような装飾を加えるのかを書き込んできます。「どこに?」を指定してあげて、次に「何を?」を教え、最後に「具体的な内容」を伝える。覚えておいてください。事例では「p」を指定しましたが、「h1」に書き換えてあげれば、h1要素の文字が20px、太字の文字に装飾されます。ホームページに適応させるには基本的な文法は先ほど説明したとおりです。続いてはどこに書き込んだらホームページにデザインが反映されるのかを解説しましょう。CSSをホームページに適用させるには3つの方法があります。1.HTMLファイルに直接書き込む方法この方法はhead要素内にstyle要素を使って書き込みます。実際に書いてみましょう。HTMLには以下のように書き込みます。{font-size:20px;font-weight:bold;}</style>このように複数の指定をstyle要素の中に書き込んでいく事ができます。これをhead要素の内側に書き込んでいけば、上記の例であればそのページ内のh1要素とp要素がそれぞれ装飾できます。2.専用のCSSファイルを作成してホームページに読み込ませる方法この方法は、先ほど説明したstyle要素の中身を「.css」の拡張子で作成されたファイルに記述して、ページに読み込ませる方法です。HTMLファイルに直接書き込む場合だと、h1要素のデザインを変えたい。なった場合、全てのファイルを編集する必要があるため、間違えや抜けが発生しやすくなってしまいます。ファイルを1箇所にしてまとめ、HTMLファイルに読み込ませれば、編集するファイルが1箇所で済むのでとてもお手軽で、オススメです。作成する方法は、テキストファイルを「.css」の拡張子に変更して、そのファイルへCSSを書き込むだけ。これで外部CSSファイルの完成です。CSSのファイル名はHTMLファイルと同じで日本語は使わず、半角英数字を使う様にしましょう。記号も「_(アンダーバー)」や「-(ハイフン)」程度にとどめる様にしておいた方が無難です。続いて、ホームページへ読み込ませるには、head要素内へlink要素を使って書き込みます。例として、CSSのファイル名は「style.css」とします。href=”style.css“>赤字で示した箇所は、そのHTMLファイルから見たCSSファイルがある場所です。フォルダの中にCSSファイルを入れてあるなら、「フォルダ名/style.css」となります。※フォルダ名も半角英数字を使いましょう。3.HTMLタグに直接書き込む方法この方法はWebサイトの中でも1回しか使わないような、スポット的にCSSを適用させる時に使われる方法です。font-weight:bold;”>ここだけ20px・太字になる</p><p>ここは変化なし</p>一部だけCSSが適用されるので、デザインする時には重宝しそうに見えますが、ホームページのデザイン変更や調整を行う際には非常に厄介な方法です。CSSをひとまとめにする方法でも、ちゃんと個別にCSSを適用させる方法がありますので、あまり多用しないようにしましょう。個別にCSSを適用させる方法については次の機会にご紹介します。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。