Figmaデザインカンプからコーディング練習した時のメモを記載します。
題材はこちらを利用させていただきました。
- 【入門】無料デザインカンプからのコーディング練習【ライブコーディング動画あり】
- デザインカンプからのコーディングのやり方をライブコーディングで解説【一緒にやってコーディングしてみよう！！】
- Figmaデザインカンプからのコーディング方法【デザインモードと開発モード】｜しょーごログ
- ブラウザ表示
Figmaのモードの説明
画面下に３つのアイコンがあり、無料ならデザインモードを使ってコーディングする。
Dev Mode(有料)は自動で余白が見れるので使いやすいそうです。
- Figma Draw
- デザインモード（無料なら通常はこちらを使用する）
- Dev Mode(有料)
画像の書き出し
figmaで対象の画像をクリック
右側、プロパティタブの下の方にエクスポートという項目があり、その下の「〇〇をエクスポート」ボタンをクリック
jpgとpngだったら、jpgの方が軽いのでこちらがよいとのこと。
pngは重いそうです。
1x JPEG で「〇〇をエクスポート」ボタンを押す。
ダウンロードした画像はimgフォルダなどの適切な場所に置く。
デザインを見てブロックを意識してどうコーディングするか考える
例えばsectionタグがあったとして
sectionそのものに横幅の指定するよりも、
その中に.innerクラスを作って横幅を指定する（max-width: 1000px; など）
(コーディングの仕方はいろいろなので、必ずではないです)
sectionには見出しを必ずおく
<main>
<div class="fv"></div>
<section class="feature">
<div class="feature-inner">
<h2>XXXXXXX</h2>
<p>xxxxxxxxxxxxxx</p>
</div>
</section>
</main>
Figmaで余白を確認する方法(Mac)
確認したい対象を選択してoptionをクリック、
または
確認したい対象を選択してoptionを選択したまま、カーソルを移動
htmlを書く
headを書く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figmaデザインカンプからコーディングする練習</title>
<meta name="description" content="これはFigmaデザインカンプからコーディングする練習です">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.0/destyle.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
</body>
</html>
!（エメット） で基本の構造を記載し
title
meta description をhead内に必ず書く
link リセットCSS
link 自分のスタイルCSS
を書いておく。
headerを書く
navタグについて
-
headerに書かれているnavを一般的にグローバルナビゲーションという
-
navタグは、主要なナビゲーションブロックに限定して使い、すべてのリンクのまとまりに使うべきではありません
-
1ページに複数のnavタグを使っても問題ありません
-
フッターのリンクが主要なナビゲーションと見なせる場合は、navタグを使うことができ、これは一般的な使われ方です
-
justify-content: space-between; の使い方
【CSS】justify-contentの使い方や効かない原因を解説
基本的なCSSを書く
CSS初期設定の例
@charset "utf-8";
/* :root は変数・テーマ設定 */
:root {
--main-color: #333;
--accent-color: #f06;
}
/* html はベースライン設定 */
html {
/* remの基準を10pxに（62.5% = 10/16） */
font-size: 62.5%;
/* 全体の行間を統一 */
line-height: 1.5;
/* スクロールをスムーズに */
scroll-behavior: smooth;
/* 算出方法を全体で統一 */
box-sizing: border-box;
/* OSのテーマ対応 */
color-scheme: light dark;
}
/* box-sizingを全要素に継承 */
*, *::before, *::after {
box-sizing: inherit;
}
/* body は本文のスタイル */
body {
font-family: Arial, "Hiragino Sans", Meiryo, sans-serif;
font-size: 1.6rem; /* = 16px */
background-color: #fff;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
line-heightとfont-familyと画像設定
@charset "utf-8";
html {
line-height: 1;
}
body {
font-family: Arial, "Helvetica Neue",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
img {
max-width: 100%;
height: auto;
}
htmlタグにline-heightがリセットCSSに設定してあったので、1にしておく
body にfont-familyを書いておく
画像のコーディング
figure
画像が装飾的な意味合いで使われている時はfigureで囲む
p
画像がないと文章的に成り立たない時はpタグで囲む