HTML CSS入門 第2回 ボタンを装飾するのがポイントです

HTML & CSS プログラミング

HTML CSS入門②|初心者OK!最短で稼ぐ力をつけるページ模写解説

更新日:

こんにちわ!まっわすです。

実存するランディングページを一緒に模写しよう 連載第2回となる今回は、2セクション分作ります。

簡単なので、サクッと作れるよ!完成イメージは↓(クリックすると見れます)

See the Pen html-css-making1 by まっわす (@mawwas) on CodePen.

今回作るもの【実存ページ模写でHTML CSS入門】

第2回 HTML CSS 入門でやる範囲は、featuresecond と snsbtns です

featturesesond と snsbtns の部分を作ります。

初心者でも、30分かからないと思います。

ポイントは、『ボタンの装飾』です。ではfeaturesecondから作業開始!

divタグの箱をつくってCSSレイアウトの設計図をつくる【HTML CSS入門②】

前回(第1回)でもやりましたが、今回もやります。毎回やります。

divタグの箱を作りましょう。featuresecondとsnsbtnsの中身にPタグやbuttonタグを作ります

できました。

モバイル版、パソコン版で、レイアウトが変わらないので、モバイル版でdivタグの箱を作ってみました。モバイルファーストってやつだ!

featuresecond をつくる【HTML CSS入門②】

まずは featuresecond から作ります。

ポイントは『ブロック要素』と『インライン要素』です。

HTMLをつくろう

CSSレイアウトの設計図ができたので、それを元にHTMLを書いていきます。完成形は下のとおりです(クリックでみれます。)

See the Pen html-css-making2--htmlonly by まっわす (@mawwas) on CodePen.

ポイントは、文字の背景色を変えたい部分にspanタグを使っているとこです。あとで解説します。

btnタグも初登場ですね。btnタグで囲った文章は自動的にボタンになります。デフォルトのデザインはダサいので、CSSで見栄えよくします。

CSSをつくる

HTMLができたので、CSSを書いていきます。完成形は次のようになります。

完成形はこのようになります。

See the Pen html-css-making1 by まっわす (@mawwas) on CodePen.

前回紹介したCSSの解説は省略して、新しいCSSを解説していきます。

背景色を設定する『background-color』

background-color: (HTMLカラーコード); で背景色を設定できます。featuresecondのCSSに書けばおっけー。

HTMLカラーコードは #ebb94d を使います。これで見本と同じ色です。自分の好きな色を使いたいなら、『WEB色見本 原色大辞典 - HTMLカラーコード』をみるといいとおもうよ!

文字の背景色を変更する『ブロック要素とインライン要素』

HTMLには、ブロック要素と、インライン要素と、それ以外の3種類があります。その違いをインプットすると、この先で役立ちますよ!

まずは下の見本を見てください。(クリックで開きます。)

See the Pen block-inline by まっわす (@mawwas) on CodePen.

見本の背景色が赤い部分がブロック要素。背景色が青い部分が、インライン要素です。

ブロック要素とは、1つのまとまった文章のことをいいます。段落ってやつです。段落なので、ブロック要素の後は自動で改行されます。

ブロック要素の横幅は、親要素の幅と同じになるのが特徴です。

ブロック要素のタグは、次のようなものがあります。

ブロック要素のタグ

  • div(汎用ブロック要素。意味を持たず、何にでも使える)
  • h1,h2,h3,h4,h5,h6(見出し)
  • p(段落)
  • blockquote(引用)

インライン要素とは、文章の一部のことをいいます。段落ではなく、文字ってイメージ。文字なので、改行されません。

インライン要素の横幅は、文字と同じ長さです(見本の青い部分がインライン要素の長さ)

インライン要素のタグは、次のようなものがあります。

  • span(汎用インライン要素。意味を持たず、何にでも使える)
  • strong(太字)
  • br(改行)

完成形を見てみると、一部の文字背景が白くなっています。こんなときは、白くしたい背景をspanタグで囲んで、インライン要素にしてやればOKなのです!

ボタンを装飾する『border-style: none;』と『hover』

完成形からボタン部分だけ切り取りました。

See the Pen html-css-making2--botton by まっわす (@mawwas) on CodePen.

実は大したCSSを使っていません。フラットなデザインは簡単でいいですね!

ポイントは3つ。

ポイント

  1. cursor: pointer;
  2. border-style: none;
  3. :hover

上から解説します。

『cursor: pointer;』 マウスカーソルを乗せると、指先カーソルになります。ボタンっぽくなるね。

『border-style: none;』枠線を消します。デフォルトのボタンは枠線がダサいので、枠線を消すだけでもデザインはよくなります。

『.featuresecond__btn:hover』 については、『:hover』 をつけてCSSを指定すると、マウスカーソルが乗ったときの装飾ができます。

今回は、マウスホバーでボタンの色が変わるようにしました。

あとは文字色とサイズを整えれば完成!

 

モバイル版のCSSが完成したので、次はメディアクエリを書いて、パソコン版に対応させましょう。

メディアクエリを書いて、パソコンに対応させる

文字の大きさと、ボタンの大きさが変わります。レイアウトは変わらないです。

前回と同じように、画面幅が769px以上のときのCSSをメディアクエリで指定します。min-widthですね。そこは逆!

複数のclassを一括で指定するため、『,(カンマ)』で区切ってます。カンマで区切っても、クラス指定の『.(ドット)』は必要です! 忘れやすいよ!

メディアクエリの中身は簡単なCSSなので解説は省略。

メディアクエリの書き方は『【第1回】実存するランディングページを一緒に模写してみよう【HTML CSS入門】』で詳しく書いています。

メディアクエリを初心者向けに覚え方も紹介しているので、ぜひ読んでみてね。

featuresecond 完成!

前回よりも簡単でしたね。見た目のポイントになるボタンの装飾も、実は簡単なCSSでつくれます。

次はSNS共有ボタンをつくります。こっちはもっと簡単です。

snsbtnsをつくろう【HTML CSS入門②】

divタグの箱を作りましょう。featuresecondとsnsbtnsの中身にPタグやbuttonタグを作ります

SNSボタンを作ります。

buttonタグを装飾するだけなので、サクッとつくってしまいましょう!

htmlをつくる

buttonタグでボタンを作りましょう。buttonタグはインライン要素なので、自動で横並びになります。

3つbuttonタグを並べて、それぞれ『ツイート』・『いいね!』・『シェア』と書きます。

CSS装飾用のクラス名は『snsbtn__twitter』『snsbtn__facebook』『snsbtn__share』として、HTMLは完成です。

fontawesome を読み込む

ツイッターやフェイスブックのアイコンは、fontawesome という無料のサービスを使います。

まずはfontawesomeのアイコンを使う準備をします。

fontawesomeの公式サイトにいって、メニューの『How to use』をクリック。表示されるCDNコードをコピーして、headタグのにペーストします。

fontawesomeの使い方1

CDNコードをheadタグの中にペースとします。

これで、fontawesome の読み込みは完了です。CSSファイルと似たようなものですね。

fontawesome を使う

ツイッターのアイコンを使ってみましょう。

使いたいアイコンのタグをコピー、buttonタグの中身にペーストすれば、OKです。

fontawesomeのアイコンを使うには、iタグをコピーします。

CSSをつくる

ボタンの装飾をします。

それぞれのボタンを、背景色(background-color)、文字色(color)、ボーダーの丸み(border-radius)、ボーダー線の消去(border-style: none;)で整えます。

snsbtns全体をtext-align: center; で中央寄せしたら、CSSは完成です!

snsbtnsはスマホでも表示が崩れないので、メディアクエリは不要でっせ。

まとめ:第2回 実存ページ模写でHTML CSS入門

featuresecond と snsbtns を作りました。

ポイントをおさらいしますね。

  • pタグの中の一部分だけを装飾するときは、spanタグを使う
  • ボタンの装飾はborder-style: none; で枠線を消すのがポイント
  • マウスが乗った時の装飾は『:hover』を使う

次回は fraturethird を作ります!

-HTML & CSS, プログラミング
-, ,

Copyright© zackut , 2019 All Rights Reserved Powered by AFFINGER5.