【CSS】の基本ルールをまとめてみた。初心者必見

プログラミング
ロボタン
ロボタン

今回はCSSの基本を教えていくよ

Aちゃん
Aちゃん

知っている人は再度確認を!!

CSSとは

CSSはHTML文書に装飾、レイアウトするための言語です。CSSはあくまでもHTMLという土台をもとに様々な表示をコントロールしていく言語なので、土台となるHTMLがきちんと正しく作られていることがCSSを楽に設定していく条件となります。

 

HTMLとCSSの関係は建築物の構造物と内装・外装の関係に似ています。webページも、文章情報として、基本性能を担保するためのHTMLマークアップと、読む人が分かりやすく読むためにCSSの両方が揃っていることが理想的である言えます。

正しくマークアップされていなくても見た目を整えることは大事ですが、きちんと構造化されたシンプルなHTMLをもとにしたほうがCSS自体もシンプルに効率よく書くことができます。CSSを書き始める前に今一度HTMLソースを見直しましょう。

CSSをHTMLに取り組む方法

CSSをHTMLに取り組む方法は3つあります。

1つずつ見ていきましょう。

インライン

HTMLタグの中に直接style属性によってCSSを記述します。直観的で分かりやすい方法ですが、直接デザイン指定してしまうので、一時的にテストする時以外は原則として使用できません。

内部参照

HTML文書のhead要素の中にstyle要素を設定し、その中にCSSを記述します。HTMLソースコードとスタイルの指定を分離することはできますが、あくまでその指定したページでしか使うことはできません。例外的にそのページのみで使いたい指定を記述するなど、ごく限定的な使い方にとどめておいた方がいいでしょう。

外聞参照

CSSを外部ファイル化し、それを参照する方法です。CSSをHTMLに取り組む方法としては原則として外部CSSファイルを参照する形をとるのが一般的です。なぜCSSを外部ファイル化した方がいいのかは次をご覧ください。

CSSを外部ファイル化するメリット

CSSを外部化するメリットしては、複数ページ間で使い回しができることです。個別のHTMLに書いてしまうと、デザインに修正が入った場合全て個々ページを修正しなければなりません。しかし、外部ファイル化しておくことで例え何百ページあってもCSSファイル1つで済むのです。

CSSの基本ルール

CSSの基本書式はとてもシンプルです。土台となるソースコード中の、「どの部分の」「どんな属性を」「どのような値にするのか」ということを決まった書式に従ってひたすら書いていくというのがCSSの基本です。

自宅で学ぶならTechAcademy


TechAcademy [テックアカデミー]

最短4週間で未経験からプロを育てるオンライン完結のスクールです。

どこかに通う必要はなく、自宅でもプログラミングやアプリ開発を学ぶことができます。学生の方は学割も可能!

現在は無料体験も実施中なので気になる人はチェック!!

こんな方におすすめ

  • 自宅で勉強するほうが集中できる方
  • スキルを習得して転職を考えている方
  • 今後フリーランスとして働きたい方
  • 自宅とスクールとの時間も面倒な方
  • 家で家事をしながらスキルをつけたい方

まとめ

今回はCSSの基本について書いてみました。何にしろ土台の暗記は必要です。勉強でも運動でも何でも言えます。しっかり土台を固めて、あとはプログラミング言語を書きまくりましょう。

スポンサーリンク



プログラミング
Creator Key
タイトルとURLをコピーしました