Written by Manabu Bannai

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

PROGRAMMING

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

もくじ

空っぽの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


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


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ボックス見出し


#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;
}

以上です。

※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。