CSSに関して - なんぎ星

前回の授業で、「外部」「スタイルシート」と先生がおっしゃっていたのをもとに調べてみました。

CSS（Cascading Style Sheets＝カスケーディング・スタイルシート）
HTMLではスタイルシートと言えば、CSSのことを指しているのが一般的。

CSSをHTMLに適用させる方法は、HTML内に直接記述していく方法と外部ファイルを読み込むという２つの方法がある。

HTMLファイルの内に直接、指定内容を書き加える方法。

<style type="text/css"><!--.style1 {color: #FF00FF}--></style>

同じく内にリンクしてCSSが書いてある外部ファイルを読み込む方法。

CSSを外部ファイルにまとめておく方が、ページ数の多いサイトのレイアウトの管理に便利。

リンクの貼り方は

ファイル名.cssを指定のファイルにする。

CSSで作成するメリット

複数のページのレイアウトの変更が簡単に変更できる

CSSを外部のファイルとして作成すれば、HTMLファイルからリンク要素で結び付けることによって、複数のページでスタイルを共有するできる。
スタイルシートのスタイルを変更することにより、一度に複数のファイルのデザイン、レイアウトを変更することができ、ホームページの更新とメンテナンスが楽になる。
また、HTMLファイルを新規作成するときもリンクでCSSファイルと結び付ければ、あらかじめ、用意したデザイン、レイアウトを簡単に適用することができる。

HTMLファイルがスッキリ！

HTMLファイルからデザイン・レイアウトの見栄えの要素を切り離すことにより、HTMLファイルのソースがシンプルになる。そのためHTMLファイルを書くのも楽になり、他の人が修正する際も、わかりやすくなる。

ブラウザでの表示が速い

HTMLファイルの容量が減り、軽くなったことでブラウザでの表示が速くなる。表示が少しでも早くなればインターネットの速度が遅いユーザーにもやさしい。

シンプルでスタイリッシュなデザインができる

デザイン、レイアウトをHTMLファイル、分離することにより、凝ったデザインをシンプルに構築することができるようになり、より詳細かつスタイリッシュにデザインを構築できるようになる。

アクセシビリティ

CSSは凝ったデザインのためだけではなく、ウェブアクセシビリティを考慮するうえでも役に立つ。

アクセシビリティ→すべての人に優しいホームページを構築すること。見る人を選ばないホームページ作成を心がけて作っていくこと。

最低限のアクセシビリティとは。

文字が読みやすく、リンク先のページ内容が安易に想像できる。
画像ファイルに代替テキストを記載し、視覚障害の方が音声で理解できるようにする。
サイトの構成がわかりやすく、サイト内で迷子にならないようなつくりにする。
ページの内容がわかりやすい見出しと文章の設定。
インターネットの通信速度が遅い人にもホームページを閲覧できるようにする。

上記のことに、本当に共感します。
年配の人や障害のある人にも、また見たくなるようなページを作ることができればいいなと思います。
GWに帰省するたびに、周囲の人々をみていつもそう思います。