改めて、CSSについて調べました。

入社半年目のぽんこです。

今日は現代のwebデザインに欠かせないCSSについて改めて調べてみました。

そもそもCSSとは?

Cascading Style Sheet(カスケーディングスタイルシート)」を略して、CSSと呼びます。

HTMLタグにCSSでスタイルを定義することで、サイトにデザインを反映することが出来ます。

基本的なCSSの書き方

CSSの書き方としては主に3パターンが挙げられます。

① ヘッダーなどに一括して書く方法。

例 <style>~</style>

② HTMLタグの内部に追加して書き込む方法。

<p style=“~”>

③ CSSを外部ファイルに書いて、それを読み込む方法。

<link href=”base.css” rel=”stylesheet” type=“text/css”>

最近では、CSSに沢山の情報を書くことが多いので、③のようにCSSを外部ファイルにして管理することが一般的になっています。

CSSを使用するメリット

CSSを使用するメリットはいくつかありますが、その中でも特に大きなメリットは「デザインを一括で管理出来る」ということだと思います。

HTMLタグで書かれたサイトに、CSSでスタイルを定義すると、指定した範囲全てにデザインが適用されます。例えば「この見出しの色をまとめて変えたい!」というときも、CSSを少し変更するだけで済みます。

画像で説明すると…

先日私が練習で作ったtableです。
blog_table_1

「この表の年号~十二支の見出しの色を変えたい!」というときも、

この見出しに適用されているスタイルの中のカラーを1カ所変更するだけで…


blog_css_1

blog_css_2

このように、簡単に見出しの色を変更することが出来ます。

blog_table_2

CSSの中身

では実際のCSSの中身が、どのように書かれているのかを見ていこうと思います。

CSSは{}の中に「〜を〜したい」という指定を書きます。

さっきのtableの場合、

blog_css_3

「table.year thead th」の「color(=文字色)」を「#fff」にしたい

という指定から

「table.year thead th」の「color(=文字色)」を「#00796B」にしたい

という指定に書き換えることで、見出しの色を変更しました。

今回変更したのは「color」のみですが、作ったtableには他にも沢山の指定をしています。

まず、padding

blog_css_8

paddingは「上下左右の内側の余白」を指定するために使います。

そしてpaddingの数字は左から順に「上、右、下、左」というように時計回りに数字が適用されます。

極端な例として、paddingをこんな風に設定してみます。

blog_css_15

すると、このように適用されます。

blog_css_14

緑色で示した部分がpaddingです。

因みに見出しのpaddingをなくしてしまうと…

blog_css_6

このように上下の余白が詰まって見づらくなってしまいます。

続いて、vertical-align。

blog_css_9

これは行の中でテキストや画像など、縦方向の揃え位置を指定するときに使います。

今回はvertical-align: top;なので、「上端に揃える」という指定をしています。

他にも

middle(中央揃え)

bottom(下端揃え)など、指定したい揃え位置によって使い分けます。

 

colorは先ほど説明した通り、 文字の色を指定します。

blog_css_11

因みに、背景の色を変更したいときは、backgroundで指定します。

 

blog_css_10

残る2つは「font」という単語がついている通り、文字に関することを指定しています。

font-sizeは文字のサイズ。今回は42pxを指定しています。

font-weightは文字の太さ。今回はlighter(細字)を指定しています。

 

CSSを変更するだけで、こんなに変わる

先ほどのtableのCSSのみを変更してみました。

blog_table_3

CSSを見比べてみます。

blog_css_before

blog_css_after

見出しのbackgroundを#ffcdd2、paddingは20pxにして高さを縮めました。

文字のcolorを#e57373にして、font-weightをboldにしました。

各年号のbackgroundも#fffに変更しています。

見出しひとつひとつに文字色や余白などを設定していると変更が大変ですが、CSSでデザイン定義を一括で管理すると、このように効率よく変更作業などを行うことが可能です。

まとめ

上記の通り、以前はHTMLタグの中に書かれていたデザイン定義ですが、記述量が増えCSSとして分割されたことで、より効率がよく高度なデザイン表現が可能となりました。また、CSS自体のバージョンアップも為され、可能性はどんどん広がっています。

改めてCSSについて調べたことで、CSSのみならずウェブデザインの今後の可能性についても考えることが出来ました。実際にCSSを使いこなすのはもちろんのこと、多くの可能性を持ったCSSを活かすことの出来る高度なデザイン表現をマスターしていきたいと思います。

また、今回の記事では主に「CSSを使用することによるデザインの一括管理」を重点的に紹介しましが、他にもCSSを使用するメリットは沢山あるので、今後更に勉強して記事にしていこうと思います。

最後まで読んで下さって、ありがとうございました。

関連記事

  1. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

  2. 納品ミスを防ぐ「クリエイティブチェック」について

  3. ランディングページで大切なこと。

  4. 石田三成CM

    話題沸騰!石田三成CM続編公開!

  5. デザインが窮屈に感じたら!ページ全体の流れ感を意識する。

人気記事

  1. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  2. mv
  3. タイ料理「天満3パクチー」
  4. 新入社員研修「伝える+伝わるセミナー」
  5. 2017年スタートアップトレンド (アメリカ版)
  6. blog03760x370
  7. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK
  8. クリアボタン
  9. IMG_6697

最近の記事

  1. 大内氏セミナー 「テレビ活用」7つの成功ルール 出版記念セミナーに行ってきました
  2. mv_puzzle 【作ってみた】jQuery UI sortable でデジタルパズル
  3. 0I9A6577ISUMI_TP_V 一人でも楽しめる!GWの過ごし方5選!!
  4. e3651f3e-ca5a-4f0a-8ccb-9b3ffec3c2f3 スマイルヴィジョン5月会社見学説明会のお知らせ
  5. ひょうご就職サミット2018 今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!
2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP