【HTML・CSS】「あわせて読みたい」のサンプル集

記事内で他の記事の紹介するときに、よく「あわせて読みたい」というボックスを見かけますよね？

今回はこのボックスのサンプルをいくつか作成しましたので、コードと一緒に紹介させていただきます。

ここに作成されているものは全て私が作成したオリジナルです。

すべて「商用利用可能」ですので、どうぞご自由にお使いください。

1.「あわせて読みたい」のサンプル集
2.HTMLの書式
- div classとは何か
- span classとは何か
3.CSSのプロパティ
4.まとめ

1.「あわせて読みたい」のサンプル集

–シンプルなボックス–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box100">
<span class="box-title">あわせて読みたい</span>
    <p>シンプルなボックス</p>
</div>

CSS
.box100 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box100 p {
    margin: 0; 
 .box100 {
    position: relative;
    margin: 3em 0;
    padding: 1em 1em;
	  font-size: 16px;
    border: solid 1px #000000;
}

.box100 .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #000000;
    font-weight: normal;
}

.box100 p {
    margin: 0; 
    padding: 10px;
}

–角丸ボックス–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box101">
<span class="box-title">あわせて読みたい</span>
    <p>ここに文章</p>
</div>

CSS
.box101 {
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
	  font-size: 16px;
    border: solid 1px #000000;
    border-radius: 8px;
}

.box101 .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #000000;
    font-weight: normal;
}

.box101 p {
    margin: 0; 
    padding: 10px;
}

–ボックスの外側にタイトル–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box102">
<span class="box-title">あわせて読みたい</span>
    <p>ここに文章</p>
</div>

CSS
.box102 {
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    border: solid 1px #000000;
}
.box102 .box-title {
    position: absolute;
    display: inline-block;
    top: -26px;
    left: -1px;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #000000;
    color: #ffffff;
    font-weight: bold;
}
.box102 p {
    margin: 0; 
    padding: 10px;
}

–ボックスの内側にタイトル–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box103">
<span class="box-title">あわせて読みたい</span>
    <p>ここに文章</p>
</div>

CSS
.box103 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 1px #000000;
}
.box103 .box-title {
    position: absolute;
    display: inline-block;
    top: -1px;
    left: -1px;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #000000;
    color: #ffffff;
    font-weight: bold;
}
.box103 p {
    margin: 0; 
    padding: 10px;
}

–タイトルの前にアイコン–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box104">
<span class="box-title">あわせて読みたい</span>
    <p>ここに文章</p>
</div>

CSS
.box104 {
    position: relative;
    margin: 30px 10px;
    padding: 5px 20px;
    border: 2px solid #000000;
	  background-color: #ffffff;
}
.box104 .box-title {
    position: relative;
	  bottom:19px;
    left: -15px;
    padding: 0px 7px;
	  border-radius:14px;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
}

.box104 .box-title:before {
  font-family: 'FontAwesome';
  content: "\f0a4";
	padding:4px;
}

–タイトルの後ろにアイコン–

あわせて読みたい

ここに文章

HTML/CSSを表示

HTML
<div class="box105">
<span class="box-title">あわせて読みたい</span>
    <p>ここに文章</p>
</div>

CSS
.box105 {
    position: relative;
    margin: 30px 10px;
    padding: 5px 20px;
    border: 2px solid #000000;
	  background-color: #ffffff;
}
.box105 .box-title {
    position: relative;
	  bottom:19px;
    left: -15px;
    padding: 0px 7px;
	  border-radius:14px;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
}

.box105 .box-title:after {
  font-family: 'FontAwesome';
  content: "\f0a4";
	padding:4px;
}

2.HTMLの書式

div classとは何か

まず、HTMLに書かれている<div class>とは何かを説明したいと思います。

<div>タグは、グループ化を行うことが出来るタグです。<div>タグに囲まれた部分を一つの塊として見なすことが出来ます。

そして、<div class>はdivタグに囲まれた部分に名前をつけるタグです。例えば、<div class = ” box1″>であれば、”box1″と名付けられたグループということになります。

span classとは何か

<span>タグも<div>タグと同じように、要素をひとまとまりにするためのタグです。

<div>タグがブロック要素なのに対し、<span>タグはインライン要素になります。インライン要素はテキストの一部としてみなされ、改行が入りません。

参考：ブロックレベル要素とインライン要素

ブロックレベル要素：ディスプレイの横幅一杯を使う要素
インライン要素：テキストの一部を加工する要素

3.CSSのプロパティ

参考：borderの太さについて

pxとは1ピクセルを1とする単位で、実際に表示されるサイズはモニタの解像度により変化します。また、emとはフォントの高さを1とする単位、exとは小文字の｢x｣の高さを1とする単位です。

レイアウト(配置)のプロパティ

position

記述例：position:absolute;

内容：要素の位置を設定する

値(キーワード)：absolute,relative

参考：Positonの値

・absolute：ウインドウを基準にして絶対位置を設定する
・relative：要素が元々いた場所を基準にして相対位置を設定する

margin

記述例：margin:30px 10px;

内容：ボックスの外側の余白を指定する

値(キーワード)：auto

値(単位)：px,em,%など

参考：marginの指定の仕方

marginは上下左右それぞれ個別に設定することも出来る。その場合、marginのあとに「-top」「-bottom」「-left」「-right」と付けて、値を記載する。
また、4辺を一度に指定することも出来る。その場合は、「margin: 5px 7px 5px 7px」といったように半角スペースで区切る。また、上と下、左と右で同じになる場合は、「margin:5px 7px」という書き方も可能。

padding

記述例：padding:30px 10px;

内容：ボックスの内側の余白を指定する

値(キーワード)：auto

値(単位)：px,em,%など

参考：paddingの指定の仕方

paddingもmarginと同じように、上下左右それぞれ個別に設定することも出来る。paddingのあとに「-top」「-bottom」「-left」「-right」と付けて値を記載する。
また、4辺を一度に指定する場合は、「padding: 5px 7px 5px 7px」といったように半角スペースで区切る。また、上と下、左と右で同じになる場合は、「padding:5px 7px」という書き方も可能。

bottom

内容：要素の下辺からボックスをどの程度離すかを設定する

値(キーワード)：auto

値(単位)：px,em,%

参考：bottomの値

bottomの値は、プロパティの値によって意味合いが変わってくる。
・position が absolute または fixed に設定されている場合、 bottom プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定する。
・position が relative に設定されている場合、 bottom プロパティは要素の下辺が通常位置から上方向へ移動する量を指定する。