株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | CSS基礎 その2

2017.11.16

CATEGORY - web

前回、とりあえず、CSSとはなんぞや?ってとこと、CSSの書き方をやったので、今回から、実際にサンプルのページを作っていきたいと思います。

いったん、完成ページ貼り付けておきます^^

WEBサイト制作講座

CSS基礎で作成する完成版のファイルはこちらからダウンロードできます↓↓
CSSの基礎 完成版ファイル

1. 準備として、CSSをリセットする

CSSをリセット????なんのこっちゃ????(´・ω・`)?

って感じですよねw

実は、ブラウザがそれぞれデフォルトの(初期設定みたいなイメージです)スタイルをすでに適用させちゃってるんです。
なので、リセットせずに、CSSを組むと、必要ない余白があいたりしちゃいます。

それを防ぐ(ブラウザの初期設定で必要ないスタイルを解除するって感じですかね。)ために、CSSを最初にリセットしてあげます。

リセットのやり方で、一番汎用のやり方としては、normalize.css をダウンロードしてきて、CSSファイルで読み込んであげます。

 

normalize.css はこちらからダウンロードできます。

normalize.css

また、normalize.css について詳しく知りたい方はここらへんの記事を読んでみてください^^

なぜ Normalize.css を使うのか

 

それから、作っているページ(サイトでも)で共通で設定したいスタイルを別ファイルで設定してあげて、こちらも同様に読み込んであげます。

今回は、app.css という名前にしました。

CSSを読み込む方法ですが、

@import “CSSファイルの場所”

で読み込みます。

今回ですと、

@import "reset/normalize.css";
@import "reset/app.css";

こんな感じで2つのファイルを読み込んであげます。
(ちょっとわかりやすいように、reset というフォルダでまとめてあります。)

あ。ちなみに、同じセレクタ(クラス名)があった場合、後から書かれたもので上書きされてしまうので、読み込む順番も注意してください。
なので、個別のCSSを書く前に、ここらへんのリセット系のCSSを読み込んであげます。

もう1つ、あ。

CSSファイルには、文字コードも指定してあげたほうがよいです。(文字化け対策として)

@charset "utf-8";

これをCSSファイルの一番上の行に書いておきます。
ちなみに、文字コード、最近ですと、utf-8 以外を使うことはほとんどないと思うので、これを書いておけばOKって思っておいてもらえれば大丈夫かと^^;

 

はい、とりあえず、これでCSSを書いていく準備が整いました!

CSS基礎

1. ヘッダー部分

では、ヘッダー部分から作っていきましょう。

HTML部分はこんな感じです。ヘッダー部分にそれぞれ、クラス名をつけています。

<!-- ヘッダー -->
<header class="global-header">
  <h1 class="logo-image">
    <img src="assets/images/common/logo.png" alt="モコランニング" width="200">
  </h1>
  <nav class="base-menu-wrapper">
    <ul class="base-menu-list">
      <li>
        <a href="#">
          ABOUT
        </a>
      </li>
      <li>
        <a href="#">
          CHARACTOR
        </a>
      </li>
      <li>
        <a href="#">
          FAQ
        </a>
      </li>
      <li>
        <a href="#">
          DOWNLOAD
        </a>
      </li>
    </ul>
  </nav>
</header>

※ちなみに、HTML側でクラス名を指定して、CSS側にそのクラスがなくても、エラーにはならないです。
特になんのスタイルも適用されないだけですw

で、CSS側はこんな感じでスタイルを作りました。

/* ヘッダー */
.global-header {
  background: #0071bc;
  padding: 10px;
  position: relative;
  box-shadow: 0 2px 3px rgba(51,51,51,0.5);
}

.logo-image {
  text-align: center;
}

.base-menu-wrapper {
  text-align: center;
}

.base-menu-list > li {
  display: inline-block;
}

.base-menu-list > li > a {
  display: block;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

.base-menu-list > li > a:hover {
  text-decoration: underline;
}

CSS基礎

こんな感じで表示されましたかね。

では、主なスタイルについて見ていこうと思います。

※全部説明しないので、それぞれのプロパティに関しては、↓↓ここらへんで見てみてくださいね^^;

HTMLクイックリファレンス(スタイルシートリファレンス)

 

※ちなみに、

/* ぺけぺけ */

CSSのコメントは、このように書きます。

 

background

背景に関してスタイルを適用するプロパティです。前回、background-color で指定しましたが、background系の値をまとめて指定するときに使います。
複数なければ、1つだけ(今回は色の指定のみ)とか指定することも可能です。

position

要素の配置方法を指定します。

fixed を指定すると、ブラウザの画面に対して、どの位置に要素を置くかを指定できます。

absolute を指定すると、親となる要素に対して、どの位置に要素を置くかを指定できます。
(※その場合、親となる要素には、relative を指定します。)

今回は、あとあと、子の要素に対して absolute 指定するので、relativeを指定してあります。

display

要素をどのように表示するかを指定できます。

ブロック要素/インライン要素 に関しては、HTML基礎で説明したのですが、例えば、インライン要素の <img> に対して

display: block;

と指定すれば、<img> がブロック要素のように振る舞うことになります。

今回指定している、

display: inline-block;

ですが、ブロック要素で、且つ横並びにしたい(インライン)時に使います。

ちなみに、ブロックに余白をつけたいときは、padding や margin を使うのですが、これは、ブロック要素にしか使うことができません。
(※インライン要素には余白という概念がないため。)
このように、ブロック要素にしか使えない、もしくはインライン要素にしか使えないプロパティもけっこうあるので、そこらへんは随時調べてみてください。

子セレクタの指定、擬似クラスの指定

見慣れない書き方がでてきたと思います^^;

.base-menu-list > li {
  display: inline-block;
}

“>” ってなんぞや? って思った方、、、お目が高い!笑

これは、「直下の子要素」っていう意味です。

例えば、

<ul class="base-menu-list">
  <li> <!-- このリストは .base-menu-list の直下の li なので適用される! -->
    <a href="#">
      <ol>
        <li> <!-- このリストは .base-menu-list の直下の li ではないので、適用されない! -->
          奥まったリスト(´∀`*
        </li>
      </ol>
    </a>
  </li>
</ul>

って感じです。

これを使わないで、

.base-menu-list li {
  display: inline-block;
}

とすると、直下以外の <li> にもスタイルが適用されます。

 

もういっちょ、見慣れない書き方に関して。

.base-menu-list > li > a:hover {
  text-decoration: underline;
}

a:hover 、 これなんだろうって思ったから、さすがです!笑

擬似クラスと呼ばれるもので、タグに対して、どのような状況の時かを指定するときに コロン(:)でつないで指定します。

今回は、アンカーのタグ<a>に対して、マウスポイントを上に乗せた時にどんなスタイルにするかを指定しています。

その他、セレクタの指定の仕方、擬似クラス、擬似セレクタに関して調べたい方は、↓↓ここらへんを参考にしてください^^

HTMLクイックリファレンス(セレクタの種類)

長くなってきましたけど、もう一個くらいいっときますかw

2. メインスクリーン(メイン画像?)部分

HTML部分はこんな感じです。

<!-- メインスクリーン -->
<div class="screen-area">
  <img src="assets/images/top/main.png" alt="モコランニング" width="1000">
</div>

screen-area をつけただけですね^^

ちなみに、メイン画像の部分のクラス名の付け方がけっこう悩ましいんですよねー。
screen , main-screen, main-image, intro, hero …
いろいろ言い方つけられると思いますが、まあ、お好みで。
(※業務としてやるときは、その会社ごとにクラス名の付け方があったりするので、それに沿ってください。)

※ ちなみに、hero ってなんなんですかねw w w
wikipedia で Hero Image で調べてみると、「メインのバナー、サイトの概要を表す部分」とかそんな意味らしいです^^;

wikipedia(Hero Image)

ちょっと横にずれちゃいましたが、次にCSS部分です。

/* スクリーン */
.screen-area {
  background-image: url("../images/top/main_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}
.screen-area img {
  vertical-align: bottom;
}

.screen-area:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background: linear-gradient(to right,#f13d63,#f13d63 25%,#f79862 25%,#f79862 50%,#faf236 50%,#faf236 75%,#8ef865 75%,#8ef865);
}

CSS基礎

こんな感じで表示されましたかね。

ではまた、主なものをみていきましょう^^

background-image

背景のプロパティの1つです。背景には色だけじゃなくて、画像を指定することもできます。
今回は、雲の画像を指定してます。

vertical-align

インライン要素やテーブルのセル(※説明省略しますw)で、縦方向に揃える位置を指定します。
なので、center を指定すると、各インライン要素が 縦方向に中央揃えで並ぶ感じになります。

今回は、画像に対して、bottom を指定しています。

こうしないと画像の下に余白があいちゃうんですよねー^^;;;;
なので、Tips みたいな感じです。
CSSはけっこう、こういった Tips 的なものが多々あります笑

position: absolute

absolute でてきましたねw
今回、親となるのが、.screen-area です。なので、親の要素に、 position:relative を指定しています。
この親要素の一番下に、グラデーションの線(実際には、ブロックの背景をグラデーションにして、線にみたててるだけですがw)をひきたいので、これを指定しています。

あ。ちなみに、擬似セレクタの :after を使うと、その要素の後に擬似的なブロックを入れることができます。
その際に注意が必要なのが、

content: '';

このプロパティを指定してあげないと、何も表示されません。
要は、擬似セレクタを作っただけだと、コンテンツが何もないわけで、空(カラ)のコンテンツを置いてあげるってイメージです。

こんな感じですかね。。。。

では、続きは、次回やっていきましょう!

今回のポイント

  1. ブラウザに対してリセットするCSSを最初に適用しよう!
  2. CSSのプロパティは膨大にあるので、とにかく調べる癖をつけましょう笑

 

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP