はじめに
「CSS」とは「Cascading Style Sheets (カスケーディング・スタイル・シート)の略」でウェブページのスタイルを指定するための言語です。
端的に言うと、ウェブサイトに飾り付けをするための言語です。
もちろん、HTMLでも装飾を目的としたタグや属性も存在していますが、「HTML」は主に情報構造を定義する言語ですので、「HTML」でのスタイリングは行うべきではありません。
また、「HTML」 の要素をどのように表示するかは、ブラウザによって変わってしまうため、開発時に閲覧していたブラウザでは見栄えよくレイアウトが組めたとしても、他のブラウザでは意図しないレイアウトになってしまう事もあります。
以上の事から、 「HTML」では文章構造のみを定義し、スタイルについてはスタイルシートで定義する事が推奨されています。 役割分担みたいなイメージです。
この章では、CSSの基本的な構造について学んで行きましょう。
Step1: 準備
HTMLで使用した、 index.html を以下のように記述してください。
link rel="stylesheet"
「外部のスタイルシートを参照する」という指示になります。
href="css/index.css
この記述で、参照するスタイルシートを指定します。
今回の場合は cssフォルダ内の 「index.css」 となります。
Step2: CSSを記述する
HTML で作成した index.css に記述して行きましょう
上記のコードで index.html 内の <p> タグに対して、 赤を適用するという指示になります。
それでは 「index.html」 をブラウザで確認してみましょう。
下記の画像のように 「Hello World!」 の文字色が赤くなっていれば成功です。
これでは少し面白くないので、どんどん飾り付けをして行きましょう!
いくつかCSSで代表的な、 プロパティを紹介していきます!
background
背景の色を指定できます!
背景が追加されました。 ですが、このままだと少し見栄えが悪いですね。
下記のコードを追加してみましょう!
width
幅を指定することができます。
少しよくなりましたが、文字が背景の真ん中に来れば、もっとよくなりそうですね。
下記のコードも追加してみましょう!
text-align
背景に対して、文字の位置を調整できます。
margin
全体の位置を調整できます。 margin-left:auto;とすると、 自動で左から真ん中を測ります。
今回の場合ですと、左右から真ん中を測ることになりますね。
上記のような、 表示になればOKです!
このようにして、「HTML」に「CSS」 を参照させる事で、いろいろな飾り付けが可能です。
「HTML」と「CSS」 の関係性は覚えておきましょう!