2015/02/20 (更新日: 2016/08/14)

【ブロガー向け】Web制作・開発に便利なチートシート作ったよ

備忘録的に便利なチートシートっぽいものを作りました。
世のため、人のためを思い、ブログにて公開します。

空っぽのHTMLフレーム
Bootstrap + jQuery + Font Awesome導入のテンプレート
ブログのフォントサイズ用のCSS（PCとスマホ別）
h2, h3などの見出しに使える便利なCSS

空っぽのHTMLフレーム

名前のとおりです。コピペでどうぞ。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>空っぽのHTMLフレーム</title>
	<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>

<header>
	<nav></nav>
</header>

<section>
	<article></article>
</section>

<!-- sidebar -->
<aside>
</aside>

<footer>
</footer>

</body>
</html>

Bootstrap導入のテンプレート

Bootstrap、jQuery、Font Awesomeのテンプレートです。
読み込みにはCDNを利用し、ノーマライズCSSも入れてあります。

<!-- bootstrap+jQuery+FontAwesome -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

ついでに、Bootstrapで中央寄せのグリッドパターンも貼っておきます。

<div class="col-xs-10 col-xs-offset-1"></div>
<div class="col-xs-8 col-xs-offset-2"></div>
<div class="col-xs-6 col-xs-offset-3"></div>
<div class="col-xs-4 col-xs-offset-4"></div>
<div class="col-xs-2 col-xs-offset-5"></div>

ブログのフォントサイズ用のCSS（PCとスマホ別）

LIGさん、長江さん、Enjilogさんのブログを参考にフォントサイズを最適化しました。
以下のとおりに設定することで読みやすいブログが出来上がります。

PC用のフォントサイズシート


@media only screen and (min-width: 800px) {
	p {
		font-size: 17px;
	}
	h2 {
		font-size: 25px;
	}
	h3 {
		font-size: 20px;
	}
	h4 {
		font-size: 20px;
	}
}

スマホ用のフォントサイズシート


@media only screen and (max-width: 479px) {
	p {
		font-size: 16px;
	}

	h2{
		font-size: 23px;
	}
}

h2, h3などの見出しに使える便利なCSS

ブログのフォントサイズ用のCSSと同様に、LIGさん、長江さん、Enjilogさんのブログを参考にカスタマイズしました。
以下のCSSをコピペするだけで導入完了です。


h2{
	font-size: 25px;
	font-weight: 600;
	line-height: 1.6;
	color: #000;
	background-color: #F3F3F3;
	border-radius: 10px;
	padding: 16px 20px 15px 20px;
}


h3{
	color: #2d2d2d;
	border-bottom: 1px dotted #2795b6;
	border-left: 8px solid #2795b6;
	padding: 9px 5px;
}


#mokuji{
	font-size: 20px;
	padding-top: 6px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(https://manablog.org/wp-content/themes/karui/images/check.png);
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #333;
	background-size: 25px;
}


#info{
	font-size: 20px;
	margin: 45px 0 16px 0;
	background: url(https://manablog.org/wp-content/themes/karui/images/info.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 30px;
	padding-left: 35px;
	padding-top: 6px;
	padding-bottom: 5px;
	border-bottom-style: dotted;
	border-bottom-color: #333;
	border-bottom-width: 1px;
}


blockquote{
	margin: 0;
	padding: 3px 0 0 60px;
	border-left: 1px solid #ddd;
	background: url(https://manablog.org/wp-content/themes/karui/images/b-quote.png) 0 .1em no-repeat;
	color: #666;
	background-size: 50px;
}

以上です。

PROGRAMMING