CSSに関する知識|ホームページ作成

 CSSはカスケードスタイルシート(Cascading Style Sheets)の略語(頭文字)でキャスティングスタイルシートと呼ぶ人もいるようです。ですが、一般的にはスタイルシートと略した表現をする人が多く、ウェブサイトのデザインを担当するプログラム言語と考えて頂けると間違いないでしょう。

 CSSに関する専門書ですが、いぜんはCSSだけを取り上げた書籍が多かったように記憶しておりますが、書店を覗くと、CSSプラスHTML(もしくはXHTML)と言った具合にホームページ作成に必要な知識をまとめて記述しているタイプが多くなっているようです。

 右上の画像は楽天市場で取り扱う これ一冊でわかる!! HTML+スタイルシートとなっております。もちろんアマゾンでも これ一冊でわかる!!HTML+スタイルシートを販売中です。

CSS(スタイルシート)の使い方

 CSS(スタイルシート)の記述は基本的に3パターンあります。一つ目がブログなどで見受けられる、HTMLファイルとは別に専用のファイルを用意し、該当するページへのリンクを張ると共に、そのファイルにスタイルシートを書き込んでいく方法です。

スタイルシート|ひとつ目の使い方

 この方法だと各ファイル(ページ)ごとにCSSを書き込む必要が無いため、手間が省けると言うメリットや、各ファイル(ページ)が同じ様式に仕上がると言うメリットがあります。その反面、同じデザインしか出来ませんので、任意のページで違う表現方法を(例えば特定のページだけ広くしたい場合など)取り入れることが難しくなります。

スタイルシート|ふたつ目の使い方

 CSS(スタイルシート)の使い方、ふたつ目はHTMLファイルのヘッド(HEAD)部分にそのページ(ファイル)で使うスタイルシートだけを書き込む方法です。私が普段使っている手法で、検索エンジン大手のヤフーも同じ手法を使っています。

 メリットとして、各ページごとに違うデザインを取り入れることが容易であると言う点があり、個性を発揮すると言う意味でも優れているでしょう。その反面HTMLファイルのサイズが大きくなりがちで、SEOの観点から見ると劣るのが現実です。また、各ページ毎に記述するため、手間が増えることになります。

スタイルシート|みっつ目の使い方

 CSS(スタイルシート)の使い方、みっつめはページを構成するHTML言語そのものに直接CSSで指令を出す方法です。これも私が良く使う手法で、ページ内の特定箇所(任意の位置)のデザインを微妙に変えることが可能です。

 このページをよく観察して頂くと理解できるでしょう、見出し部分(太字の一列しかない部分)は背景色(薄い緑色)を指定してる場面としていない場面があります。これは「この見出しでは背景色を入れてデザインを優先させ、この部分には入れすぎて見難いから」などと判断したからです。

お勧めのスタイルシート使用方法

 特に初心者にお勧めするCSS(スタイルシート)の記述方法は上記のうち、ふたつ目のヘッド内に書き込む方法です。理由として初心者はサイトのデザインに詳しくありませんから、どうしても自己流になり(もちろん自己流で構わないのですが)、知識が増えるにつれて頻繁にデザインを変えたくなります。

 その結果、全てのファイル(ページ)でひとつのCSSファイルで指定していると変更する手間が大変です。例えばせっかく作り上げたindexページのデザインが崩れたり、あるいは逆にindexページを直すと違うページのデザインが崩れていたり、初心者には向いていません。ですので最初は各ページ毎にスタイルシートを記述する方が無難です。

― END of This page.And Copyright-Suemoritakumu-All Rights Reserved.―

ホームページ作成・簡単製作Topページ

HTMLとCSSでHP作成・メニュー
その他、サイト情報

 サイト内で公開している文章及び画像には全て著作権があります。運営者に許可無く複製、再配布等は著作権法で禁止されています。

拓夢書房・ロゴマーク ホームページ・イメージ画像
スポンサードリンク