190729記事内_HTMLソース | デジマースブログ



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no" />

<link rel="stylesheet" href="style_responsive.css" />

<title>レスポンシブ_サンプル</title>

</head>
<body>

<div class="bg_a"></div>

<div class="bg_pic_sample_a">

<h1>レスポンシブ<br>サンプル</h1>

<nav id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><span></span></label>
	<label class="nav-unshown" id="nav-close" for="nav-input"></label>
	<div id="nav-content">
		<ul class ="nav_box">
			<li class ="nav_text"><a href="リンク先のＵＲＬ">TOP</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents01</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents02</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">Contents03</a></li>
			<li class ="nav_text"><a href="リンク先のＵＲＬ">other</a></li>
		</ul>
	</div>
</nav>

<h2>ポイント1</h2>

<div class="txt_FlexBox">
	
	<div class="txt_column">
		<h3>説明1</h3>
		<a class="txt01">テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1</a>
	</div>
	
	<div class="txt_column">
		<h3>説明2</h3>
		<a class="txt01">テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2</a>
		<a class="txt_s">※詳細文言</a>
	</div>
	
</div>
			
<h2>ポイント2</h2>

<div class="txt_FlexBox">
	<div class="txt_column">
		<h3>説明1</h3>
		<a class="txt01">テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1</a>
		<a class="txt_s">※詳細文言</a>
	</div>
	
	<div class="txt_column">
		<h3>説明2</h3>
		<a class="txt01">テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2</a>
	</div>
</div>
	
<h2>ポイント3</h2>

<div class="txt_FlexBox">
	
	<div class="txt_column">
		<h3>説明1</h3>
		<a class="txt01">テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1テキストサンプル1-1</a>
	</div>
	
	<div class="txt_column">
		<h3>説明2</h3>
		<a class="txt01">テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2テキストサンプル1-2</a>
		<a class="txt_s">※詳細文言</a>
	</div>
	
</div>
			
<h2>ポイント4</h2>

<div class="txt_FlexBox">
	<div class="txt_column">
		<h3>説明1</h3>
		<a class="txt01">テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1テキストサンプル2-1</a>
		<a class="txt_s">※詳細文言</a>
	</div>
	
	<div class="txt_column">
		<h3>説明2</h3>
		<a class="txt01">テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2テキストサンプル2-2</a>
	</div>
</div>

<footer class="kotei_footer">(C) DIGIMERCE Inc. All Rights Reserved.</footer>

</div>

</body>
</html>

他の記事をさがす ⇒ 記事一覧へ