cssとかhtmlは自由に書ける分、やり方がイマイチ決まりません。なので、自分はこうやっているというのをまとめてみました。
モックがないとスムーズに作業できないので、モックは画面遷移も含めてあった方が便利。一人のアプリでも10ページ以上になったら個人的にはもう限界。
必要なパーツを書き出す。この時は詳しいクラス名などは決めなくても問題ない。日本語でざっと書く程度でOK。
記事まとまり
- 記事のボックス
- タイトル
- 記事の説明
- アップロード日
- 記事写真
html5の基準にあったマークアップをした方がいい。divを多様するとあとあと面倒。
header要素、main要素、footer要素、section要素、article要素、aside要素、nav要素などある要素は使っていく方がいい。
<section class="articles">
<a href="#" class="article-box">
<h3 class="title">記事タイトル</h3>
<p class="desc">記事の説明、記事の説明、記事の説明、記事の説明</p>
<time class="date" datetime="2019-01-01">2019.01.01</time>
<img class="image" src="./images/article.jpg" alt="記事キャプチャ画面">
</a>
</div>
</section>
cssのベースだいたいこれでいい。
@charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: border-box;
}
次に大まかなbody
の設定。
@charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
font-family: Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
だいたいこんな感じでいい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>htmlのベース</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
</header>
<main class="main">
</main>
<footer class="footer">
</footer>
</body>
</html>
コメントを前もって残しておくと作業がやりやすい
#ccs
/* --------------------------------
* parts
* -------------------------------- */
<!-- partsの中身 -->
/* --------------------------------
* header
* -------------------------------- */
<!-- headerの中身 -->
borderプロパティだと枠線に太さが生じてしまって、ブロック全体が枠線の分だけ大きくなってしまうので、レイアウトが崩れる。
outlineプロパティならボックスの数値の計算には含まれないので、レイアウトが崩れる心配がなく便利。
div {
outline: 2px solid #f00;
}
直感的な見た目に関わる命名ではなく意味合い的な命名をすると後々の変更に強くなる。
ボタンの色のクラス名をbutton-orange
にするとのちに修正するときに
これが意味合い的なクラス名、button-showy
だと。
だけの変更で済む。