HTML/CSSの私的チートシート
WordPressの私的チートシートに引き続き、今回はHTML/CSSのチートシートです。
基本的には個人的に最低限必要なものを記述したHTMLとCSSのテンプレートを用意しておいて、新規コーディング時にはそれを使い回しています。そして、気づいた点や追記したいものがあった時は忘れないようにすぐにアップデートするようにしています。
HTML
基本
宣言などの絶対必要なコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<title></title>
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
</body>
</html>よく使うコード
jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>FontAwesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">Edgeで自動的に付与されるリンクを無効化
<p x-ms-format-detection="none">012-3456-7890</p>CSS
基本
文字コードの指定
@charset "utf-8";よく使うコード
メディアクエリ
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 768px){
}サイトやページによってはブレイクポイントをもっと細かく区切る事もありますが、個人的には最低限のポイントだけあれば、それほど気にしなくても良いと思っています。
PCとSPで表示・非表示を切り替える
.pc{
display: block !important;
}
.sp{
display: none !important;
}
@media screen and (max-width: 768px){
.pc{
display: none !important;
}
.sp{
display: block !important;
}
}邪道な方法かも知れませんが、LP制作時等、あまりソースの質を問わないページを作るときに時短のために使ったりします。
外部CSSの読み込み
@import url("CSSのパス");メディアクエリをつかった外部CSSの読み込み
<link href="CSSのパス" rel="stylesheet" type="text/css" media="only screen and (max-width: ○○px)" >スマホ表示以外で電話番号のリンクを無効化
@media (min-width: 769px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}個人的に横幅768px以下ではスマホ表示にすることが多いので、メディアクエリをmin-width: 769pxとして設定しています。
