cssとかhtmlは自由に書ける分、やり方がイマイチ決まりません。なので、自分はこうやっているというのをまとめてみました。
デザイン作成過程
大枠のデザインをモック作成
モックがないとスムーズに作業できないので、モックは画面遷移も含めてあった方が便利。一人のアプリでも10ページ以上になったら個人的にはもう限界。
パーツを書き出す
必要なパーツを書き出す。この時は詳しいクラス名などは決めなくても問題ない。日本語でざっと書く程度でOK。
記事まとまり
- 記事のボックス
- タイトル
- 記事の説明
- アップロード日
- 記事写真
htmlの要素に合わした大枠マークアップ
html5の基準にあったマークアップをした方がいい。divを多様するとあとあと面倒。
header要素、main要素、footer要素、section要素、article要素、aside要素、nav要素などある要素は使っていく方がいい。
1
2
3
4
5
6
7
8
9
| <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>
|
レイアウトの配置を決める
- ページ全体のレイアウトはGrid Layout
- 横並びのレイアウトはFlexbox
- 格子状のレイアウトはGrid Layout
- テキストが回り込みの指定はFloat
cssのベースを作成
cssのベースだいたいこれでいい。
1
2
3
4
5
6
7
8
9
10
11
| @charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: border-box;
}
|
次に大まかなbodyの設定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| @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;
}
|
htmlのベースを作成
だいたいこんな感じでいい。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!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>
|
ちょっと使えるテクニック
cssのパーツごとのコメントを作成
コメントを前もって残しておくと作業がやりやすい
1
2
3
4
5
6
7
8
9
10
11
12
| #ccs
/* --------------------------------
* parts
* -------------------------------- */
<!-- partsの中身 -->
/* --------------------------------
* header
* -------------------------------- */
<!-- headerの中身 -->
|
レイアウトの確認はoutlineプロパティを使う
borderプロパティだと枠線に太さが生じてしまって、ブロック全体が枠線の分だけ大きくなってしまうので、レイアウトが崩れる。
outlineプロパティならボックスの数値の計算には含まれないので、レイアウトが崩れる心配がなく便利。
1
2
3
| div {
outline: 2px solid #f00;
}
|
CSSクラス名の決め方
直感的な見た目に関わる命名ではなく意味合い的な命名をすると後々の変更に強くなる。
ボタンの色のクラス名をbutton-orangeにするとのちに修正するときに
- css側のクラス定義のクラス名
- css側のカラーコード
- html側のクラス指定
これが意味合い的なクラス名、button-showyだと。
だけの変更で済む。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
See Also
Fri May 17, 2019