はにわまんの外部設計書

メインカラー:#EFA336
アクセントカラー:#E65100

メタ

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

ブレークポイント

ブレークポンとは1つ。iPadの768pxを境界とする。

@media (min-width: 769px) {
}

全体

box-sizingはあらかじめ全体に当てておく。

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	font-size: 100%;
}

font-familyはゴシックをベース。

body {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 1.6em;
	line-height: 1.6;
	margin: 0;
	word-break: break-all;
}

ボタン

ボタン

<a class="btn" href="#">ボタン</a>
.btn {
  display: inline-block;
  padding: .6em 2em;
  background-image: none;
  background-color: #EFA336;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.btn:hover,
.btn:focus {
  outline: none;
}
.btn::-moz-foucus-inner {
  padding: 0;
  border: none;
}

フォーム



<form action="#" method="post">
  <input type="text" name="" value="">
  <input type="submit" value="送信">
</form>
input {
  padding: .4em .6em;
  border: 1px solid #aaa;
  border-radius: 0;
  background-image: none;
  font-family: inherit;
  font-size: 1em;
  -webkit-appearance: none;
  box-sizing: border-box;
}
input:focus {
  outline: none;
  border: 1px solid #0cf;
  box-shadow: 0 0 5px 0 #0cf;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  outline: none;
}
input[type="submit"]::-moz-focus-inner {
  padding: 0;
  border: none;
}

テーブル

見出し1 見出し2 見出し3
コンテンツ1 コンテンツ2 コンテンツ3
コンテンツ1 コンテンツ2 コンテンツ3
<table>
  <tr>
	<th>見出し1</th>
	<th>見出し2</th>
	<th>見出し3</th>
  </tr>
  <tr>
	<td>コンテンツ1</td>
	<td>コンテンツ2</td>
	<td>コンテンツ3</td>
  </tr>
  <tr>
	<td>コンテンツ1</td>
	<td>コンテンツ2</td>
	<td>コンテンツ3</td>
  </tr>
</table>
table {
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid #aaa;
}
th,
td {
  padding: .4em .6em;
  text-align: left;
  vertical-align: top;
}
th {
  background: #EFA336;
}

画像

はにわまん

<img src="https://haniwaman.com/wp-content/uploads/2017/12/haniwa.png" alt="はにわまん" >
img {
  max-width: 100%;
  height: auto;
}

リスト

  • リスト1
  • リスト2
  • リスト3
  1. リスト1
  2. リスト2
  3. リスト3
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>
ul,
ol {
  margin: 0 0 1.5em 0;
  padding: 0 0 0 30px;
}

文章

ここには文章が入ります。

<p>ここには文章が入ります。</p>
p {
  padding: 0;
  margin: 0 0 1.5em 0;
}

コード

font-family: monospace;

<code>font-family: monospace;</code>
code,
kbd,
pre,
samp {
	font-family: monospace;
}

見出し

見出し
<div class="hd-fold">見出し</div>
.hd-fold {
	background: #EFA336;
	border: none;
	box-shadow: 0 1px 0 #ccc;
	margin: 3em 0 1.5em;
	padding: .6em 1em;
	color: #fff;
	position: relative;
	border-radius: 2px;
	font-weight: bold;
	font-size: 1.4em;
}
.hd-fold::after {
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 16px 16px 0px;
	border-style: solid;
	border-color: #fff #fff #e7e7e7;
	border-radius: 0 0 0 2px;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
見出し
<div class="hd-barleft">見出し</div>
.hd-barleft {
  margin: 3em 0 1.5em;
  padding: .4em .75em;
  color: #383838;
  border-left: solid #EFA336 6px;
  font-size: 1.2em;
  font-weight: bold;
}
見出し
<div class="hd-burger">見出し</div>
.hd-burger {
	padding: .5em 1em;
	display: inline-block;
	border-top: solid 2px #EFA336;
	border-bottom: solid 2px #EFA336;
	font-size: 1.2em;
}

外部ライブラリ

highlight.js

公式:https://highlightjs.org

<link rel="stylesheet" href="css/tomorrow-night-eighties.css">	
<script src="js/highlight.pack.js"></script>
<script>
hljs.configure({
	tabReplace: "  ",
});
hljs.initHighlightingOnLoad();
</script>

Font Awesome

公式:http://fontawesome.io/

<link rel="stylesheet" href="css/font-awesome.min.css">

Gifffer

Github:https://github.com/krasimir/gifffer

<script src="js/gifffer.min.js"></script>