HTML/CSSの雛形_20190711

PR

ポイント

1.フレキシブルボックスを使用。
2.リスト(メニュー、トピックス、アーカイブ)を追加
3.フッターにコピーライトを追加

PR

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset ="UTF-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<header>
	headerブロック
	</header>
	
	<div class="contents">
	<div class="conteiner">
		<aside class="menu">
			<h1>メニュー</h1>
			<ul>
				<li><a href="#">メニュー1</a></li>
				<li><a href="#">メニュー2</a></li>
				<li><a href="#">メニュー3</a></li>
				<li><a href="#">メニュー4</a></li>
				<li><a href="#">メニュー5</a></li>
			<ul>
		</aside>

		<article>  
		articleブロック
		</article>
		
		<div class="rightside">
			<aside class="topix">
			<h1>トピックス</h1>
			<ul>
				<li><a href="#">トピックス1</a></li>
				<li><a href="#">トピックス2</a></li>
				<li><a href="#">トピックス3</a></li>
				<li><a href="#">トピックス4</a></li>
				<li><a href="#">トピックス5</a></li>
			<ul>
			</aside>

			<aside class="month">
			<h1>アーカイブ</h1>
			<ul>
				<li><a href="#">2019年1月</a></li>
				<li><a href="#">2019年2月</a></li>
				<li><a href="#">2019年3月</a></li>
				<li><a href="#">2019年4月</a></li>
				<li><a href="#">2019年5月</a></li>
			<ul>
			</aside>
		</div>
	</div>
	</div>

	<footer>
		<small>Copyright © 2019 サンプルサイト</small>
	</footer>
</body>
</html>
PR

CSS

body, 
.contents .conteiner	{background-color: #dcdcdc;
			 box-sizing: border-box;
			}

header, 
aside.menu, 
article, 
aside.topix, 
aside.topix, 
aside.month, 
footer		{background-color: #ffffff;}

.conteiner		{
			 margin-left: auto;
			 margin-right: auto;
			 }

.contents .conteiner	{display: flex;
			justify-content: space-around;
			}

/* ヘッダーの設定 */
header		{border: solid 1px #000000; 
		 margin-bottom: 5px;
		}

/* menuの設定 */
aside.menu	{flex: none;
		 width: 15%;
		 border: solid 1px #000000; 
		}

/* articleの設定 */
article		{flex: none;
		 width: 68%;
		 border: solid 1px #000000; 
		}

/* topixの設定 */
aside.topix		{border: solid 1px #000000; 
			 margin-bottom: 5px;
			 }

/* monthの設定 */
aside.month		{border: solid 1px #000000;}

/* 右サイドの設定 */
.rightside		{flex: none;
			 width: 15%;
			}

/* フッターの設定 */
footer		{border: solid 1px #000000; 
		 margin-top: 5px;
		}

/* menu、topix、monthの見出しの設定 */
.menu h1, .topix h1, .month h1	{margin-top: 0;
				 margin-bottom: 0;
				 font-size: 18px;
				 color: #ffffff;
				 background-color: #f91800;
				 padding: 14px 10px;
				}

/* menu、topix、monthのリストの設定 */
ul	{padding: 0;
	 margin-top: 0;
	}

ul li	{list-style-type: none!important;       /* リストのマークを非表示にする */
	 margin: 0px 5px;
	}

ul li a	{display: block;
	 padding: 15px;
	 font-size: 14px;
	 color: #000000;
	 text-decoration: none;
	}

ul li a:hover {background-color: #FFF0F5}

タイトルとURLをコピーしました