CSSについて調べました。SmileVision改めて、CSSについて調べました。CSSについて調べました。入社半年目のぽんこです。今日は現代のwebデザインに欠かせないCSSについて改めて調べてみました。Sheet(カスケーディングスタイルシート)」を略して、CSSと呼びます。HTMLタグにCSSでスタイルを定義することで、サイトにデザインを反映することが出来ます。基本的なCSSの書き方CSSの書き方としては主に3パターンが挙げられます。ヘッダーなどに一括して書く方法。HTMLタグの内部に追加して書き込む方法。CSSを外部ファイルに書いて、それを読み込む方法。type=“text/css”>最近では、CSSに沢山の情報を書くことが多いので、3のようにCSSを外部ファイルにして管理することが一般的になっています。CSSを使用するメリットCSSを使用するメリットはいくつかありますが、その中でも特に大きなメリットは「デザインを一括で管理出来る」ということだと思います。HTMLタグで書かれたサイトに、CSSでスタイルを定義すると、指定した範囲全てにデザインが適用されます。「この見出しの色をまとめて変えたい!」というときも、CSSを少し変更するだけで済みます。画像で説明すると...先日私が練習で作ったtableです。「この表の年号~十二支の見出しの色を変えたい!」というときも、この見出しに適用されているスタイルの中のカラーを1カ所変更するだけで...このように、簡単に見出しの色を変更することが出来ます。CSSの中身では実際のCSSの中身が、どのように書かれているのかを見ていこうと思います。CSSは{}の中に「〜を〜したい」という指定を書きます。th」の「color(=文字色)」を「#00796B」にしたいという指定に書き換えることで、見出しの色を変更しました。今回変更したのは「color」のみですが、作ったtableには他にも沢山の指定をしています。paddingは「上下左右の内側の余白」を指定するために使います。いうように時計回りに数字が適用されます。極端な例として、paddingをこんな風に設定してみます。すると、このように適用されます。緑色で示した部分がpaddingです。因みに見出しのpaddingをなくしてしまうと...このように上下の余白が詰まって見づらくなってしまいます。続いて、vertical-align。これは行の中でテキストや画像など、縦方向の揃え位置を指定するときに使います。top;なので、「上端に揃える」という指定をしています。他にもmiddle(中央揃え)bottom(下端揃え)など、指定したい揃え位置によって使い分けます。文字の色を指定します。因みに、背景の色を変更したいときは、backgroundで指定します。残る2つは「font」という単語がついている通り、文字に関することを指定しています。font-sizeは文字のサイズ。今回は42pxを指定しています。font-weightは文字の太さ。今回はlighter(細字)を指定しています。CSSを変更するだけで、こんなに変わる先ほどのtableのCSSのみを変更してみました。CSSを見比べてみます。見出しのbackgroundを#ffcdd2、paddingは20pxにして高さを縮めました。文字のcolorを#e57373にして、font-weightをboldにしました。各年号のbackgroundも#fffに変更しています。見出しひとつひとつに文字色や余白などを設定していると変更が大変ですが、CSSでデザイン定義を一括で管理すると、このように効率よく変更作業などを行うことが可能です。まとめ上記の通り、以前はHTMLタグの中に書かれていたデザイン定義ですが、記述量が増えCSSとして分割されたことで、より効率がよく高度なデザイン表現が可能となりました。CSS自体のバージョンアップも為され、可能性はどんどん広がっています。CSSについて調べたことで、CSSのみならずウェブデザインの今後の可能性についても考えることが出来ました。実際にCSSを使いこなすのはもちろんのこと、多くの可能性を持ったCSSを活かすことの出来る高度なデザイン表現をマスターしていきたいと思います。今回の記事では主に「CSSを使用することによるデザインの一括管理」を重点的に紹介しましが、他にもCSSを使用するメリットは沢山あるので、今後更に勉強して記事にしていこうと思います。SmileVisionランディングページで大切なこと。関デジHOME社員ブログ改めて、CSSについて調べました。SmileVision。