Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

HTMLが少しわかってきたら、CSSを書いてみましょう！

HTMLで書いたソース(文字や写真)をもっと
「かっこよく、かわいく、おしゃれに」見せたくなりませんか？

HTMLについての記事はコチラを読んで下さい。

CSSを覚えれば
文字も画像も好きにレイアウトすることができちゃいます！！

それではさっそくCSSを学んでいきましょう。

CSSとは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。
★Cascade ： 段階的処理(次々と接続する)
★Style : 表現・見た目
★Sheet : 文書

CSSとは見た目(Style)を制御するための情報を継承する(Cascade)文書(Sheet)ということで、
目的は「コンテンツ(情報)」と「フォーム(デザイン)」の２つを分割してページを管理することなのです。

HTMLと併用していくのが一般的で、HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

それではHTMLのソースにCSSを書き足していきましょう。

文字を装飾する

ブログなどで、文章を書いたときにちょっとここの文字を強調したい、
差別化したいなどでてきますよね！とてもシンプルでベーシックな書き方を紹介します。

まずはスタンダードに文字の色をつけます

文字に色をつける

カラーコードはコチラを参照してください。

続いて、背景色をつけてみます

文字に背景色をつける

続いて、下線を引きます。ちょっと目立たせたい時とか。

文字に下線をひく

最初は文字の装飾から入ると簡単なので
ソースの書き方を覚えるにはいいかもしれませんね！

文章を作成する

普段私たちは、文章を読むときに
「これはタイトルだ」、「これはリストの項目だ」、「これは本文だ」と瞬時に判断します。
しかし、このような文章だったらどうでしょうか？

株式会社Lateranとは？
企業理念
◇ トピックス
◇ ソリューション
◇ 企業概要
◇ お問い合わせ
私たちのモットー
時代を先取る商品が私たちにはあります！
優れた製品を絶えず提供し、常にお客様のニーズに応えられる会社でありたい。それが当社のモットーです。
私どもは創業以来様々な商品を作りあげ、多くの成果をあげてまいりました。その副産物として○○年にＩＳＯ○○○○を取得し、○○年には○○賞の受賞を成し遂げました。
これからもお客様の満足の追求を第一として考え、豊かな生活の一助となるように努めてまいります。

これではただの文字の羅列になってしまい、
とても読みづらい文章になってしまいますよね。

しかし、これをCSSで書くとこうなります

文字の大きさや色が変わり、読みやすくなったのがわかりますか？

ソースはこのように書いています

ソース冒頭にあるdivタグについては別のセクションでご説明します。

CSSの仕組みが少しわかってきましたか？
文字の大きさや色はそのサイトやブログに合わせてアレンジしてみてくださいね！

今回は「CSSってなに？」というテーマで文字の装飾を使って紹介しましたが、
CSSにはその他にも画像の位置やサイズを指定したり、サイトを構築する上で重要な役割があります。

次回は「CSSの基本知識」をテーマに、より実践的なCSSの仕組みについて紹介していきます！
しっかり学んでいきましょう！

• 2402 views
• y.nakano

【第一回】CSSを学ぼう！〜CSSってなに？〜