初級編│xx

ワーク「スクロールに応じて自動追尾させる」

このページの右下に注目。しばらくスクロールすると、ページトップへボタンが現れます。 position:fixed;をつけると、画面を追尾するようになります。あとはお好みの位置で。

サンプル

HTML

CSS

JS

ワーク「表を1行おきにシマシマにする」

要素に:nth-child(odd)と:nth-child(even)を使った一番身近な例。奇数と偶数で背景色を指定しています。

サンプル

陸の幸	りんご、ばなな、みかん、豆
海の幸	昆布、魚、貝類
山の幸	たけのこ、焼き芋、しいたけ
今日の献立	ラーメン
調味料	唐辛子

答えを見る

HTML

CSS

ワーク「[画像、テキスト]→[テキスト、画像]と交互に出るようにする」

これも奇数と偶数でCSSを指定してます。HTMLの並び順はずっと同じ(画像、テキストの順)→スマホ対策がしやすい

サンプル

: ここはテキストが入ります。

: ここはテキストが入ります。

: ここはテキストが入ります。

: ここはテキストが入ります。

答えを見る

HTML

CSS

ワーク「PC：横並び、スマホ：縦並びにする」

Flexを使う場合と、float:leftを使う場合があります。float:leftの親要素にoverflow:hidden;をしてる場合、影などがはみ出した場合見切れてしまうので注意

サンプル(Flexを使った場合)

ここに左側の内容

ここに右側の内容

サンプル(float:leftを使った場合)

ここに左側の内容

ここに右側の内容

答えを見る

HTML

CSS

ワーク「PC：吹き出し会話の実装方法」

ポイント：同じ人が連続して話してるように見せるには、liタグの中にdlを複数書いてもOKなように組んでください。

サンプル(border-radiusで円の1箇所だけを尖らす場合)

男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

サンプル(吹き出しの三角形を後付けする場合)

男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
男の子

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

答えを見る

HTML

<h3>サンプル(border-radiusで円の1箇所だけを尖らす場合)</h3>
<div class="fukidashi">
	<ul>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
	</ul>
</div>
<h3>サンプル(吹き出しの三角形を後付けする場合)</h3>
<div class="fukidashi-sankaku">
	<ul>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt><img src="img/work-kougo.png" alt="男の子"/>男の子</dt>
				<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
			</dl>
		</li>
	</ul>
</div>

CSS

@media screen and (max-width: 699px) {
/*スマホ：吹き出し会話の実装方法>border-radiusで円の1箇所だけを尖らす場合*/
.fukidashi{width:100%;}
.fukidashi ul{list-style:none;margin:0;padding:0;}
.fukidashi ul li:nth-child(even) dl{flex-direction: row-reverse;}
.fukidashi ul li img{width:64px;height:64px;border-radius:64px;display:block;}
.fukidashi ul li dl{display:flex;}
.fukidashi ul li dl dt{display:flex-box;text-align:center;}
.fukidashi ul li dl dd{display:flex-box;padding:1rem;margin:0;}
.fukidashi ul li:nth-child(odd) dl dd{background:#eee;border-radius:0px 25px 25px 25px;}
.fukidashi ul li:nth-child(even) dl dd{background:#ccffff;border-radius:25px 0px 25px 25px;}

/*スマホ：吹き出し会話の実装方法>吹き出しの三角形を後付けする場合*/
.fukidashi-sankaku{width:100%;}
.fukidashi-sankaku ul{list-style:none;margin:0;padding:0;}
.fukidashi-sankaku ul li:nth-child(even) dl{flex-direction: row-reverse;}
.fukidashi-sankaku ul li img{width:64px;height:64px;border-radius:64px;display:block;}
.fukidashi-sankaku ul li dl{display:flex;}
.fukidashi-sankaku ul li dl dt{display:flex-box;text-align:center;margin:0 10px;}
.fukidashi-sankaku ul li dl dd{display:flex-box;padding:1rem;margin:0;}
.fukidashi-sankaku ul li:nth-child(odd) dl dd{position:relative;background:#eee;border-radius:25px;}
.fukidashi-sankaku ul li:nth-child(odd) dl dd:before{content: "";position: absolute;left: -10px;top:25px;margin-left: -10px;border: 10px solid transparent;border-right: 10px solid #eee;}
.fukidashi-sankaku ul li:nth-child(even) dl dd{position:relative;background:#ccffff;border-radius:25px;}
.fukidashi-sankaku ul li:nth-child(even) dl dd:before{content: "";position: absolute;right: -10px;top:25px;margin-right: -10px;border: 10px solid transparent;border-left: 10px solid #ccffff;}
}

@media screen and (min-width: 700px) {
/*PC：吹き出し会話の実装方法>border-radiusで円の1箇所だけを尖らす場合*/
.fukidashi{width:50%;}
.fukidashi ul li{list-style:none;}
.fukidashi ul li:nth-child(even) dl{flex-direction: row-reverse;}
.fukidashi ul li img{width:64px;height:64px;border-radius:64px;display:block;}
.fukidashi ul li dl{display:flex;}
.fukidashi ul li dl dt{display:flex-box;text-align:center;}
.fukidashi ul li dl dd{display:flex-box;padding:1rem;margin:0;}
.fukidashi ul li:nth-child(odd) dl dd{background:#eee;border-radius:0px 25px 25px 25px;}
.fukidashi ul li:nth-child(even) dl dd{background:#ccffff;border-radius:25px 0px 25px 25px;}

/*PC：吹き出し会話の実装方法>吹き出しの三角形を後付けする場合*/
.fukidashi-sankaku{width:50%;}
.fukidashi-sankaku ul li{list-style:none;}
.fukidashi-sankaku ul li:nth-child(even) dl{flex-direction: row-reverse;}
.fukidashi-sankaku ul li img{width:64px;height:64px;border-radius:64px;display:block;}
.fukidashi-sankaku ul li dl{display:flex;}
.fukidashi-sankaku ul li dl dt{display:flex-box;text-align:center;margin:0 10px;}
.fukidashi-sankaku ul li dl dd{display:flex-box;padding:1rem;margin:0;}
.fukidashi-sankaku ul li:nth-child(odd) dl dd{position:relative;background:#eee;border-radius:25px;}
.fukidashi-sankaku ul li:nth-child(odd) dl dd:before{content: "";position: absolute;left: -10px;top:25px;margin-left: -10px;border: 10px solid transparent;border-right: 10px solid #eee;}
.fukidashi-sankaku ul li:nth-child(even) dl dd{position:relative;background:#ccffff;border-radius:25px;}
.fukidashi-sankaku ul li:nth-child(even) dl dd:before{content: "";position: absolute;right: -10px;top:25px;margin-right: -10px;border: 10px solid transparent;border-left: 10px solid #ccffff;}
}

ワーク「スマホの時だけアコーディオン」

ポイント：画面を狭くしたり開発者ツール(F12)で試してください。メディアクエリとチェックボックスを使った方法なので、デスクトップ用のCSSの場合はチェックボックスを非表示にしましょう！

サンプル

メニュー1

メニュー2

メニュー3

メニュー4

答えを見る

HTML

<h3>サンプル</h3>
	
<div class="accordion">
	<div class="ac-container">
		<input id="ac-1" name="accordion-1" type="checkbox">
		<label for="ac-1"><h4>メニュー1</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>	
	
	<div class="ac-container">
		<input id="ac-2" name="accordion-1" type="checkbox">
		<label for="ac-2"><h4>メニュー2</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>

<div class="ac-container">
		<input id="ac-3" name="accordion-1" type="checkbox">
		<label for="ac-3"><h4>メニュー3</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>

<div class="ac-container">
		<input id="ac-4" name="accordion-1" type="checkbox">
		<label for="ac-4"><h4>メニュー4</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

@media screen and (max-width: 699px) {
/*スマホ：スマホの時だけアコーディオン*/
.accordion{margin:1em 0;}
.ac-container{width: auto;border-bottom:1px solid rgba(0,0,0,0.4);}
.ac-container:first-child{width: auto;border-top:1px solid rgba(0,0,0,0.4);}
.ac-container ul{list-style:none;padding:0;margin:0;}
.ac-container li{padding:0;margin:0;}
.ac-container h4{margin:0 !important;padding:0 !important;display:inline;line-height:40px;height:40px;}
.ac-container label{position:relative;margin: auto;padding: 10px 15px;display: block;height: 40px;}
.ac-container label:after{z-index:1;position:absolute;right:10px;font-size:25px;font-family:"FontAwesome";display:inline-block;content:"+";transform: rotate( 0deg );transition: 0.2s ease-in-out;}
.ac-container input:checked ~ label::after {-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg);font-family:"FontAwesome";content:"+";transition: 0.2s ease-in-out;}
.ac-container input{display: none;}
.ac-container div{background: rgba(0, 0, 0, 0.1);margin-top: -1px;overflow: hidden;height: 0px;transition: height 0.3s ease-in-out, box-shadow 0.6s linear;transition: .3s ease}
.ac-container div a{text-decoration:none;display:block;padding:10px 20px;}
.ac-container input:checked ~ div{transition: .3s ease;padding:10px 0;    height: auto;}
}

@media screen and (min-width: 700px) {
/*PC：スマホの時だけアコーディオン*/
.ac-container input{display:none;}
}

ワーク「スマホの時だけアコーディオン」

ポイント：画面を狭くしたり開発者ツール(F12)で試してください。メディアクエリとチェックボックスを使った方法なので、デスクトップ用のCSSの場合はチェックボックスを非表示にしましょう！

サンプル

メニュー1

メニュー2

メニュー3

メニュー4

答えを見る

HTML

<h3>サンプル</h3>
	
<div class="accordion">
	<div class="ac-container">
		<input id="ac-1" name="accordion-1" type="checkbox">
		<label for="ac-1"><h4>メニュー1</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>	
	
	<div class="ac-container">
		<input id="ac-2" name="accordion-1" type="checkbox">
		<label for="ac-2"><h4>メニュー2</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>

<div class="ac-container">
		<input id="ac-3" name="accordion-1" type="checkbox">
		<label for="ac-3"><h4>メニュー3</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>

<div class="ac-container">
		<input id="ac-4" name="accordion-1" type="checkbox">
		<label for="ac-4"><h4>メニュー4</h4></label>
		<div class="ac-expand">
			<ul>
				<li><a href="#">子メニュー1</a></li>
				<li><a href="#">子メニュー2</a></li>
				<li><a href="#">子メニュー3</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

@media screen and (max-width: 699px) {
/*スマホ：スマホの時だけアコーディオン*/
.accordion{margin:1em 0;}
.ac-container{width: auto;border-bottom:1px solid rgba(0,0,0,0.4);}
.ac-container:first-child{width: auto;border-top:1px solid rgba(0,0,0,0.4);}
.ac-container ul{list-style:none;padding:0;margin:0;}
.ac-container li{padding:0;margin:0;}
.ac-container h4{margin:0 !important;padding:0 !important;display:inline;line-height:40px;height:40px;}
.ac-container label{position:relative;margin: auto;padding: 10px 15px;display: block;height: 40px;}
.ac-container label:after{z-index:1;position:absolute;right:10px;font-size:25px;font-family:"FontAwesome";display:inline-block;content:"+";transform: rotate( 0deg );transition: 0.2s ease-in-out;}
.ac-container input:checked ~ label::after {-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg);font-family:"FontAwesome";content:"+";transition: 0.2s ease-in-out;}
.ac-container input{display: none;}
.ac-container div{background: rgba(0, 0, 0, 0.1);margin-top: -1px;overflow: hidden;height: 0px;transition: height 0.3s ease-in-out, box-shadow 0.6s linear;transition: .3s ease}
.ac-container div a{text-decoration:none;display:block;padding:10px 20px;}
.ac-container input:checked ~ div{transition: .3s ease;padding:10px 0;    height: auto;}
}

@media screen and (min-width: 700px) {
/*PC：スマホの時だけアコーディオン*/
.ac-container input{display:none;}
}

ワーク「下線を引く方法3種類」

ポイント：テキスト装飾、枠線、蛍光線でそれぞれ実装しています。それぞれ・・・
- テキスト装飾：決まった場所にしか下線は引けない。
- 枠線：paddingによりある程度下線の位置は自由。太さもピクセルで選べる
- 蛍光線：テキストのコントラスト比率に注意。濃い色同士だと読めなくなる。

サンプル(テキストデコレーションで実装した場合)

弊社は、イベントの企画運営が得意です。

サンプル(枠線で実装した場合)

弊社は、イベントの企画運営が得意です。

サンプル(蛍光線で実装した場合)

弊社は、イベントの企画運営が得意です。

答えを見る

HTML

CSS

ワーク「マウスホバーでふわっと影を出す」

ポイント：マウスホバーさせるとアニメーションつきで「背景色変更」「ズームアップ」「影が出る」ようになっています。※スマホにはあんまりマウスホバーは関係ないです。

サンプル

答えを見る

HTML

CSS

ワーク「アニメーションでスライドイン」

ポイント：キーフレームを使用します。一回このスクロール位置でF5を押してみてください。

サンプル(下から上へ)

サンプル(右から左へ)

答えを見る

初級ドリル ワーク一覧

ワーク「スクロールに応じて自動追尾させる」

サンプル

HTML

CSS

JS

ワーク「表を1行おきにシマシマにする」

サンプル

HTML

CSS

ワーク「[画像、テキスト]→[テキスト、画像]と交互に出るようにする」

サンプル

HTML

CSS

ワーク「PC：横並び、スマホ：縦並びにする」

サンプル(Flexを使った場合)

サンプル(float:leftを使った場合)

HTML

CSS

ワーク「PC：吹き出し会話の実装方法」

サンプル(border-radiusで円の1箇所だけを尖らす場合)

サンプル(吹き出しの三角形を後付けする場合)

HTML

CSS

ワーク「スマホの時だけアコーディオン」

サンプル

メニュー1

メニュー2

メニュー3

メニュー4

HTML

CSS

ワーク「スマホの時だけアコーディオン」

サンプル

メニュー1

メニュー2

メニュー3

メニュー4

HTML

CSS

ワーク「下線を引く方法3種類」

サンプル(テキストデコレーションで実装した場合)

サンプル(枠線で実装した場合)

サンプル(蛍光線で実装した場合)

HTML

CSS

ワーク「マウスホバーでふわっと影を出す」

サンプル

HTML

CSS

ワーク「アニメーションでスライドイン」

サンプル(下から上へ)

サンプル(右から左へ)

HTML

CSS

初級ドリルワーク一覧