三日月型アイコン

目的

• 挿し色として三日月型アイコンを入れたい。
• テキストには下線を入れたい。

実行結果

サンプルテキスト

解説

• オレンジ丸の中に白丸を最上部へ置き、三日月を傾けたようなアイコンです。

CSS

.layout_2_2 {
	width: 96%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: auto;
}

.layout_2_2 > span:nth-of-type(1) {

}

.layout_2_2 > span > span {
	background-color: orange;
	display: block;
	width: 40px;
	height: 40px;
	float: left;
	border-radius: 50%;
}

.layout_2_2 > span > span > span {
	background-color: #FFFFFF;
	display: block;
	width: 20px;
	height: 20px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	border-radius: 50%;
}

.layout_2_2 > span:nth-of-type(2) {
	font-size: 24px;
	line-height: 1.7;
	font-weight: bold;
	text-decoration: underline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 8px;
	overflow: auto;
}

• 三日月の大きさを変える場合は20行目と21行目、29行目と30行目、34行目の値を変えます。現在はそれぞれ40px、20px、10pxになっており、同じ比率で値を変えてください。最後に39行目と40行目の値を変えて、テキストの大きさと位置を調整します。

.layout_2_2 {
	width: 96%;
	padding-top: 0%;
	padding-right: 0%;
	padding-bottom: 0%;
	padding-left: 0%;
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 1%;
	margin-left: auto;
}

.layout_2_2 > div:nth-of-type(1) {

}

.layout_2_2 > span > span {
	background-color: orange;
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	border-radius: 50%;
}

.layout_2_2 > span > span > span {
	background-color: #FFFFFF;
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 7.5px;
	border-radius: 50%;
}

.layout_2_2 > span:nth-of-type(2) {
	font-size: 18px;
	line-height: 1.7;
	font-weight: bold;
	text-decoration: underline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 8px;
	overflow: auto;
}

• 三日月の大きさを変える場合は20行目と21行目、29行目と30行目、34行目の値を変えます。現在はそれぞれ30px、15px、7.5pxになっており、同じ比率で値を変えてください。最後に39行目と40行目の値を変えて、テキストの大きさと位置を調整します。