今回は上の写真にあるような画像とリンクボタンのついたコンテンツの作成方法を初心者向けに解説していきます。
単に画像を入れると言っても、ブラウザの大きさや画面の大きさによって思い通りの画像が表示できないということも多々あります。
そこで今回は画像の挿入方法とその調整方法も同時に解説していきます。
更に感の良い方だと今回の写真を見て、画像とテキストが横並びになっていることにも気づかれるはず。
初心者にとっては一つのハードルですよね。
そこでこのポイントに関しても、レシポンシブ対応しながら横並びにする方法を解説していきます。
✅リンクボタンの作り方
✅画像とテキストのレシポンシブ対応と横並び
✅画像やテキストの表示調整
それでは、今回も頑張って勉強していきましょう。
HTMLで構造化とテキストをコーディング
ここではまず今回作成するコンテンツの構造化とテキストのコーディングを行っていきます。
HTMLでコンテンツのブロックを作成する
ここではこれから作成するコンテンツのブロックを作成していきます。
まずは、構造化タグである<section>タグでブロックを作成します。
今回は<section>タグのclass名をconBと指定しておきます。
HTMLコード
<section class="conB"> </section>
そして、先程作った<section>タグの中に今回作成していくコンテンツのブロックを作成します。
<div>タグのclass名をcontainerと指定しておきます。
HTMLコード
<section class="conB"> <div class="container"> </div> </section>
HTMLでコンテンツのテキストを追加する
先程作成したブロック内に、テキストを加えていきます。
見出しの追加
まずは見出しタグを使って、見出しを追加していきます。
<h1>タグはサイトの題名で使っているので、<h2>タグを使用します。
HTMLコード
<section class="conB"> <div class="container"> <h2>コーディングなら『ぱくぱく』におまかせ</h2> </div> </section>
文章（段落）の追加
次に段落タグを使って、文章（段落）を追加していきます。
HTMLコード
<section class="conB"> <div class="container"> <h2>コーディングなら『ぱくぱく』におまかせ</h2> <p>HTMLやCSSの初心者の方なら、まずは『ぱくぱくブログ』で勉強できます。何から始めれば良いのか分からない方も『ぱくぱくブログ』は安心の無料配信です。</p> </div> </section>
リンクの追加
そしてアンカータグを使って、リンクを追加していきます。
HTMLコード
<section class="conB"> <div class="container"> <h2>コーディングなら『ぱくぱく』におまかせ</h2> <p>HTMLやCSSの初心者の方なら、まずは『ぱくぱくブログ』で勉強できます。何から始めれば良いのか分からない方も『ぱくぱくブログ』は安心の無料配信です。</p> <a href="#">ぱくぱくブログを詳しく見る <span class="fas fa-angle-right"></span> </a> </div> </section>
リンクタグには、<span>タグでアイコンを挿入しています。
アイコンの挿入方法は、以下の記事を参考にしてみて下さい。
テキスト部分をブロックにまとめる
そしてテキストを加えたこの部分も、<div>タグを使用してブロックとしてまとめます。
この時の<div>タグはclass名をtextとしておきます。
HTMLコード
<section class="conB"> <div class="container"> <div class="text"> <h2>コーディングなら『ぱくぱく』におまかせ</h2> <p>HTMLやCSSの初心者の方なら、まずは『ぱくぱくブログ』で勉強できます。何から始めれば良いのか分からない方も『ぱくぱくブログ』は安心の無料配信です。</p> <a href="#">ぱくぱくブログを詳しく見る <span class="fas fa-angle-right"></span> </a> </div> </div> </section>
ブラウザ表示とコード
See the Pen BaoXRyb by PakuPaku (@PakuPaku) on CodePen.
CSSで見出しと文章のデザインを指定する
ここからは先程作ったHTMLコードのconB内にある<h2>タグと<p>タグに対してデザインを指定していきます。
CSSで<h2>要素のデザインを調整する
まずは、余白（margin）の調整をしましょう。
今回の場合は上側の余白（top）を0とし、下側の余白（bottom）を10pxに指定します。
CSSコード
.conB.h2{
margin-top: 0px;
margin-bottom: 10px;
}
次に、フォントのサイズを調整します。
フォントの調整には、font-sizeプロパティを使用します。
CSSコード
.conB.h2{
margin-top: 0px;
margin-bottom: 10px;
font-size: 20px;
}
CSSで<p>要素のデザインを調整する
<h2>タグと同様に、余白（margin）とフォントサイズの調整を行います。
先程の様に『見出し』では無いので、少し文字は小さめに指定しておきます。
CSSコード
.conB p{
margin-top: 0px;
margin-bottom: 20px;
font-size: 14px;
}
そして<h2>タグとの違いは、この<p>タグは文章（段落）であるということです。
ということは『画面（ブラウザ）のサイズが小さくなった時に、文章が２行以上になる場合がある』ということです。
そういった場合にでも、文章を見やすくする為に文章間の余白を調整しましょう。
CSSコード
.conB p{
margin-top: 0px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.8;
}
単位を入れずに指定を行った場合は、『フォントサイズ×指定した数値』の余白が与えられます。
今回の場合は、フォントサイズの1.8倍の余白が入るということですね。
そして次に文章があまり主張しない様に、opacityプロパティを使って文字を少し透明化していきます。
CSSコード
.conB p{
margin-top: 0px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.8;
opacity: 0.8;
}
ブラウザ表示とコード
See the Pen abveWOW by PakuPaku (@PakuPaku) on CodePen.
リンクをボタンの形にする
ここではHTMLの<a>タグで作成したリンクを、ボタンの形に変える方法を解説していきます。
ボタンの大きさと間隔を指定する
<a>タグはインライン要素の為、中身のテキストに合わせて大きさが変化してしまいます。
更にはインライン要素だと、高さの調整（指定）を行うことができません。
そこでこの<a>タグをインラインブロックに指定することで、好きな大きさに指定することが可能になります。
CSSコード
.conB a{
display: inline-block;
}
そして次にpaddingを使って、ボタンの内側に余白を作っていきます。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
}
ボタンの形と色を指定する
まずはリンクにboederプロパティを使って、一本線の枠線を引いていきます。
今回はこの時、枠線の太さを3pxに指定しておきます。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
}
そしてbackground-colorプロパティを使って、ボタンの背景色を指定します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
}
更にborder-radiusプロパティを使って、角の丸い枠線にします。
今回は角の半径を、6pxに指定します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
border-radius: 6px;
}
次にcolorプロパティを使って、枠線とテキストの色を明るい色（白）に指定します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
border-radius: 6px;
color: #fff;
}
ボタン内のテキストのデザインを指定する
ボタン内のテキストの大きさを、14pxに指定します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
border-radius: 6px;
color: #fff;
font-size: 14px;
}
そして標準でリンクに表示される下線を、text-decorationプロパティを使って消します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
border-radius: 6px;
color: #fff;
font-size: 14px;
text-decoration: none;
}
カーソルを重ねた時のデザインを指定する
ボタンにカーソルを重ねた時のデザインを、指定していきます。
この場合、カーソルを重ねた状態を示す擬似要素『:hover』を使用します。
今回の場合は<a>タグに対してこの擬似要素を使用するので、『a:hover』で指定します。
CSSコード
.conB a{
display: inline-block;
padding: 10px 30px;
border: solid 3px;
background-color: #bf6a7a;
border-radius: 6px;
color: #fff;
font-size: 14px;
text-decoration: none;
}
.conB a:hover{
background-image: linear-gradient(
rgba(225,225,225,0.2),
rgba(225,225,225,0.2)
);
}
ブラウザ表示とコード
See the Pen VwvoGwa by PakuPaku (@PakuPaku) on CodePen.
ブロック全体に色を指定する
まずは、コンテンツ全体の背景色を指定しましょう。
CSSコード
.conB{
background-color: #5d9ab2;
}
そしてテキストの色も明るい色（白）に指定します。
CSSコード
.conB{
background-color: #5d9ab2;
color: #fff;
}
画像を挿入する
ここからは、コンテンツに画像を入れる方法を解説していきます。
まずはHTMLを使って、画像を挿入するためのブロックを作成します。
今回はコンテンツ内でtextの前に配置したいので、textの前にブロックを作成します。
class名はphotoとしておきましょう。
HTMLコード
<section class="conB"> <div class="container"> <div class="photo"></div> <div class="text"> <h2>コーディングなら『ぱくぱく』におまかせ</h2> <p>HTMLやCSSの初心者の方なら、まずは『ぱくぱくブログ』で勉強できます。何から始めれば良いのか分からない方も『ぱくぱくブログ』は安心の無料配信です。</p> <a href="#">ぱくぱくブログを詳しく見る <span class="fas fa-angle-right"></span> </a> </div> </div> </section>
そしてCSSを使って、先程作ったブロックの最小限確保する高さを200pxに指定します。
CSSコード
.conB .photo{
min-height: 200px;
}
次にbackground-imageプロパティを使って、ブロックの背景となる画像を挿入します。
この時urlのカッコ内には、画像を予め準備している場所の相対パスを入力します。
CSSコード
.conB .photo{
min-height: 200px;
background-image: url(img/pc.jpeg);
}
画像がこれで挿入できましたが、ブラウザを大きくすると画像が繰り返し表示されています。
そこで、表示される画像の指定を行っていかなければなりません。
まずは画像をブロック内で中心になるように、background-positionプロパティを使って調整しましょう。
今回は画像がブロック内の中心になるように調整したいので、値をcenterに指定します。
CSSコード
.conB .photo{
min-height: 200px;
background-image: url(img/pc.jpeg);
background-position: center;
}
そして次に画像のサイズがブロック内に上手く調整して入るように、background-sizeプロパティを使って指定します。
今回はブラウザが大きくなった場合にも、自動で画像が拡大されるように値をcoverと指定します。
CSSコード
.conB .photo{
min-height: 200px;
background-image: url(img/pc.jpeg);
background-position: center;
background-size: cover;
}
ブラウザ表示とコード
See the Pen MWaNzPB by PakuPaku (@PakuPaku) on CodePen.
いかがでしょうか。
画像は上手く挿入できたでしょうか。
画像とテキストを横に並べてレイアウトする
ここからは画像とテキストを横並びにすると同時に、レシポンシブ対応（スマホに対応）する様にレイアウトをしていきます。
画像とテキストを横に並べる
ここからは、先程作ったテキストと画像をFlexBoxを使って横並びにしていきます。
しかしここでのポイントはもう一つあります。
それは、レシポンシブ対応しておくことです。
今回は画面幅が768px以下の時に、FlexBoxを解除するように指定します。
CSSコード
@media(min-width: 768px){
}
それではレシポンシブ対応の為に書いたコードの中に、FlexBoxを指定するコードを書きましょう。
今回Flexコンテナとして指定したいののは、containerなのでここにFlexBoxであることを指定します。
CSSコード
@media(min-width: 768px){
.conB .container{
display: flex;
}
}
ブラウザを大きくすると、画像が消えてしまいますね。
これは画像の横幅が指定されていない為に、画像が消えてしまっているのです。
そこでFlexプロパティを使って、画像とテキストの表示比率を指定します。
CSSコード
@media(min-width: 768px){
.conB .container{
display: flex;
}
.conB .photo{
flex: 3;
}
.conB .text{
flex: 2;
}
}
テキストのまわりに余白を入れる
それでは最後にコンテンツ内の微調整を行っていきます。
まずは、テキストのまわりに余白を入れていきましょう。
CSSコード
@media(min-width: 768px){
.conB .container{
display: flex;
}
.conB .photo{
flex: 3;
}
.conB .text{
flex: 2;
padding: 50px;
}
}
ここで忘れてはいけないのが、今回はレシポンシブ対応にているということです。
なので、画面サイズが768px以下となった場合の余白を忘れずに指定しておきましょう。
CSSコード
.conB .text{
padding: 20px;
}
ブラウザ表示とコード
See the Pen eYpqLEq by PakuPaku (@PakuPaku) on CodePen.
まとめ
いかがだったでしょうか。
リンクボタンの作成や画像の挿入から調整は上手くできたでしょうか。
ウェブサイト制作を行う上では、今回の様なコンテンツは王道ですよね。
それぞれのパーツを上手く組み合わせて使うことで、ウェブサイト制作の幅はグッと広がるのではないでしょうか。
その他にもコンテンツの作り方を解説しているので、以下の記事も参考にして見てはいかがでしょうか。
それではまた次回お会いしましょう。
