1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【CSS入門】書き方の基本をおさえてデザインの調整をしよう!

【CSS入門】
Pocket

Webページを作る際、様々な見た目の調整をしたい事があると思います。ただし、HTML言語だけでは細かく調整することが出来ません。
見た目を調整しようと思ったときに必須となるのが「CSS」なのです。

CSSとは

CSSはカスケーディングスタイルシートと呼ばれるもので、Webページのスタイル(見た目)を設定する言語の事です。
つまり、HTML言語で記述された要素を装飾することが出来ます。

HTMLを学び始めたばかりの人にとっては、HTMLだけでWebページのデザイン調整をしていると思っているかもしれません。

HTMLは「文書構造」を形作る、CSSはその文書構造に対して「スタイル(見た目)」を設定するという役割を持っています。

CSSの書き方について

CSSの書き方は以下のようになります。

項目 説明
セレクタ (要素名) 装飾する対象を設定します。
(HTMLのタグ名や、id、class名)
プロパティ名 対象にどのような装飾をするか設定します。
(背景や幅など)
プロパティをどのような値にするかを設定します。
(青色や100pxなど)

具体的な例を見ていきましょう。

例1)
CSSを以下のように記述

HTMLを以下のように記述

上記の例を表示した場合、下図のようになります。

CSSで「divタグ」「背景色、幅、高さ、文章の位置、文字の太さ」の装飾をした結果、HTMLで記述したdivタグに囲まれた文章が、図のように表示されました。

例2)
CSSを以下のように記述

HTMLを以下のように記述

上記の例を表示した場合、下図のようになります。

CSSにて「div_class」というクラス名を指定した「divタグ」を装飾するように変更すると、図のように表示されました。

このようにHTMLとCSSを組み合わせてデザインの調整を行います。

CSSの記述場所

CSSの記述場所は3種類あります。

  • CSSファイルに記述する。
  • HTMLファイル内に記述する。
  • HTMLタグに直接記述する。

CSSファイルに記述する場合

まずCSSファイルを作成します(例:csstest1.css)。
そしてHTMLファイルにて「head」タグ内に下記のように記述を行う事によって、CSSファイルをHTMLファイル内に埋め込むという宣言をします。


※補足)

上記の「type=”text/css”」はHTML5では省略可

HTMLファイル内に記述する場合

HTMLファイルの「head」タグ内に下記のようにCSSを記述します。

※上記の「type=”text/css”」はHTML5では省略可

HTMLタグに直接記述する。

style属性を使って、装飾したいタグに直接CSSを記述します。

まとめ

今回は、CSSの初歩的な事について説明してきました。
もう少し踏み込むと、CSSには優先順位というものも存在します。この優先順位によって意外とデザイン調整が上手くいかないということもありえます。
興味がある方は調べて見るのもいいでしょう。

【おすすめ記事】
【CSS入門】div要素を改行をさせない方法
CSS Diner(シーエスエスダイナー)の口コミ・評判
コーダー志望者必見!CSSのスクールBEST17
マークアップエンジニアがオススメするCSS学習サイト
CSSの本・参考書の評判

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る