ポートフォーリオ制作(メディアクエリ11)

こんにちは、コンスキです。

今回は、スマホ用のメディアクエリの設定を行なっていきます。

追加したスタイル
各セクションの見出し
Aboutセクション

追加したスタイル

まず、今回追加したスタイルは下のコードの強調されている部分です。

/* メディアクエリ　　スマホ */
@media screen and (max-width: 575px) {
	/*　ヘッダートップ */
	#header_top {
		padding: 0 15px;
	}
	/*　ファーストビュー　*/
	#first_view {
		height: 290px;
		padding: 15px 12px;
	}
	#fv_tagline_main_container {
		margin-bottom: 10px;
	}
	#fv_tagline_sub_container {
		display: block;
		margin-bottom: 14px;
	}
	.fv_tagline_main {
		font-size: 24px;
	}
	.fv_tagline_sub {
		font-size: 14px;
	}
	#fv_contact_button {
		display: none;
	}
	#more_info_container {
		margin-bottom: 14px;
	}
	#info_icon {
		margin-right: 2px;
		height: 14px;
	}
	#more_info {
		font-size: 9px;
	}
	
	/* 全セクション共通	*/
	.heading_name {
		font-size: 24px;
	}
	.heading_text {
		display: flex;
		align-items: center;
	}
	.heading_text_inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.to_single_page_container {
		margin-top: 0;
	}
	.to_single_page {
		font-size: 10px;
	}
	.arrow_circle_right {
		width: 10px;
	}
	
	/* Aboutセクション	*/
	#name_heading,
	#name_content,
	#age_heading,
	#age_content,
	#skills_heading,
	.skills, 
	#where_i_work_heading,
	#where_i_work_content,
	#what_i_value_heading,
	#what_i_value_content {
		font-size: 14px;
		text-align: center;
	}
	#skills_heading,
	#where_i_work_heading,
	#what_i_value_heading {
		margin-bottom: 14px;
	}	
	#name_container {
		margin-right: 0;
	}	
	#skills_container {
		width: 140px;
		margin: 0 auto 33px;
	}
	#what_i_value_container {
	margin-bottom: 0;
	}
	#what_i_value_content {
		text-align: left;
	}
	.skills {
		margin-left: 30px;
		text-align: left;
	}
	#where_i_work_container {
		margin-right: 0;
	}
	#about_content_img_container {
		z-index: -100;
	}
	#about_content_img {
		opacity: 0.5;
	}
}