スタイルシートメモ

テキストサンプル

見出し

コンテンツの構造にたがって見出しをつけることによって、SEOやアクセシビリティ、ユーザビリティをあげることができます。
スタイルシートを設定すれば、文字の大きさや色なども変更できるのでうまく活用しましょう。

文字のサイズを相対で指定

アクセシビリティを考慮すると、ユーザーが文字サイズを変更できるように相対サイズで指定したほうがよいと思います。
特に見出しなどは32pxなど大きいサイズで表示されるため、デザイン的にちょっと…ということも。

行間をあけて見やすくする

文字がたくさん並んでいると、書籍でも読みにくいものですが、モニタで見るとさらに文字は読みにくく感じます。
延々と文字がスクロールしても現れてくるページなんて読みたくないですよね…(^_^;)

HTMLの規格に従って、文章を

でマークアップします。
pは文章の段落であることを意味するもので、画面上では上下に余白が挿入されます。
そのため、文章を細かく区切り、読みやすくする効果があります。

さらに文字の行間を変えると、文章をより読みやすくすることができます。

文字の色を指定する

明るい背景の上に、明るい文字色をおいたり、暗い背景の上に暗い文字をおくと、文字が読みにくくなってしまいます。
ストレスなくページを見る事が出来るように、文字の色を指定しましょう。

行揃えでわかりやすく

通常状態だと、テキストは左寄せになります。
たとえば、他の情報と別個のものとしてわかりやすく表示する方法として、テキストを「中央揃え」「右寄せ」にする方法があります。

フォントの指定

タイトルや見出しなどで、画像を使わずにフォントで目立たせたい…
そんな時のために、フォントの種類を指定する事が出来ます。
基本的にマニアックなフォントを指定すると、正しく見られなかったり、読みにくい事のほうが多いので、フォントの指定をする場合は気をつけてください。

フォントの見せ方

引用テキストの場合、強調したい場合…そんな時に、フォントを通常のフォントとは違うように見せて、簡単に目で比較できるようにする方法があります。

リストの設定

項目や商品の一覧など、箇条書きで記述するコンテンツは結構あります。
こうしたコンテンツもリストタグを使う事でアクセシビリティアップにつながります。

著作者の情報

ページの一番下には、ページの制作者情報をつけるのが一般的です。
※フッターといいます。
この部分の、著作者の情報は「<adrsss>著作者の情報</adrsss>」で設定します。

ですが、この「<adrsss>」普通に表示すると文字が斜体になってとても読みいにくいです。