はじめに
よく使うコードをコピペで使うために、まとめていきます！
この記事では詳しい説明は省きます。
言語関係なくメモしていくので使う際はしっかり確認すること。
BEM記法
Block__Element--Modifier
- bkock : 大枠となる独立した要素
- Element : Block内の要素
- Modifier : ちょっとした違いを表現する
※英単語をつなげるときは" - "１つ
例 : " header__nav-item--contact "
HTML
headタグ追加用
headタグ
<!-- ディスクプション１２０文字から１６０文字 -->
<meta name="description" content="ページの内容を表す文章">
<!-- OGP -->
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="ページのタイプ">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="summary">
<!-- stylesheet -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
タグの使い分け
- header
- ・headrを構成するタグ
- ・単体で使用
- footer
- ・footerを構成するタグ
- ・単体で使用
- nav
- ・ナビゲーションを構成するタグ
- ・単体か、header・footerの入れ子として使用
- main
- ・メインコンテンツを構成するタグ
- ・1ページに1回使用
- article
- ・単独で成り立つコンテンツに使用
- aside
- ・メインとの関係性の薄いコンテンツに使用
- ・サイドバーや広告など
- section
- ・章を構成するタグ
- ・mainやarticle内で使用することが多い
CSS
共通スタイル
style.css
/* common */
body {
color: #434343;
background-color: #f8f8f8;
}
img {
width: 100%;
}
a:hover {
opacity: .7;
}
フォントファミリー
style.css
/* ゴシック */
.gothic {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
/* 明朝 */
.mincho {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
レスポンシブデザイン
style.css
/*****************
responsive
******************/
@media screen and (max-width: 768px) {
}
JavaScript
index.html
<head>
<!-- jQuery用のstylesheetがある場合は、reset.cssとstyle.cssの間に書く -->
</head>
<body>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery用のファイルがある場合は、この間に書く -->
<!-- original js -->
<script src="js/main.js"></script>
</body>
さいごに
必要に応じて更新していきます。