前置き
以前ロードマップを書きましたが、
模写に特化したverです✨
【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①
【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ②
Progate終わって
「模写をやってみよう！🔥」とか
「エディターを使ってみよう！」という
初期段階で知るべきことをまとめました🌟
⬇️模写サイト選びの参考にどうぞ
【模写コーディング】おすすめの練習サイト【入門編～上級編】
後述していますが、
実在サイトよりも
本やnoteで練習用に
販売されたものの方が
有効な場合もあります📚
環境構築〜公開までの流れを知る
「環境構築ってどうするの…」
「完成しても公開方法が分からない…」
などなどProgateの記事で
事前の不安を払拭しましょう❣️
自分はNuxtに慣れるのに必死で、今回初めて知ったこともありました💥😂笑
Progateで早い段階で知れるのは良い…❗️
環境構築をする
まずは環境準備！
HTML & CSS の開発環境を用意しよう！
⬇️Nuxt.jsでやりたい方はこちら
エディターVSCodeの
便利なショートカットや
拡張機能は後ほど紹介します✨
reset.css
余計な装飾を
自分で全て消すのは面倒🧹💦
こういうのとか。
|
1 2 3 4 5 6 |
ul, ol { margin: 0; padding: 0; list-style: none; } |
reset.cssで探して
コピペするだけで良いんです❤️✨
通常のスタイリングCSSと分けて、
先に読み込みます。
|
1 2 3 4 |
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="app.css"> </head> |
個人的にはdestyle.cssが好きです。
余計な装飾を消すだけで、
変に追加をしていない
シンプルで使いやすいものです✨
【コピペで出来る】おすすめのリセットCSSと使い方を解説！
2021年、モダンブラウザに適したCSSリセットのまとめ
デベロッパーツールの使い方を知る
Chromeデベロッパーツールの
使い方を知りましょう❣️📚
検証ツール（デベロッパーモード）の使い方
とはいえ
reset.cssを使えば
自分でいちいち書く必要がないCSSも
検証では出てきてしまいます。
こういうのとか。
|
1 2 3 |
* { box-sizing: border-box; } |
最初はどこまで自分で書くべきか
区別がつきにくいかもしれません。
まぁ大抵は検証のCSSで
1番上にくるものを書けばOKです⭕️
自分の選んだreset.cssに
どんなものが書かれているのか
確認するのも良いでしょう💡
ちょっと不安な方は
本を買うとか、
noteで販売されている練習ファイルで
感覚を掴んでみるのもオススメです💫☝️
コーディングの練習をしよう！〜入門編その１〜
最初は答えを先に見ることも大事です❗️
デベロッパーツールを使えて損なし❗️
例えば私は最初aタグをボタンに見立てるためにpaddingを縦横につけていましたが、文字の長さによってサイズが変わってしまい正解が分かりませんでした。
Progate直後では「横幅はmax-width, widthにする」という考えにならなかったんです。
きちんとツールが使えれば分かるところですね👀
公開方法を知る
模写が終わったらいよいよ公開です🌟
公開してもOKか
きちんと確認をしておきましょう👀
GitHubにコード公開&
Webページ公開の手順はこちら🌍
作業途中でもgitが使えると尚よしです💪
自分で作ったWebページをインターネット上に公開しよう！
昔のNuxt.jsで公開試してみましたが、うまくできず。
最近Nuxtプロジェクトのディレクトリが変わったので、新しい方でも試してみます！
VSCodeいろいろ
エラーの見方は
こちらを参考にしてください✨👀
設定
空白文字の可視化
半角スペースやタブ文字は
デフォルトで非表示ですが、
可視化が可能です👀
Render Whitespace項目を
boundary、もしくはallに設定🍀
- all: 空白半角スペースを表示
- boundary: 単語間の半角スペース以外の空白文字を表示
おすすめ拡張機能
とにかく最初に入れておくと良いやつ
見やすく、ミスを防ぎましょう❣️
最初は気づかずに
全角スペースを入力してしまうミスや
見にくいせいで作業スペースが遅い🐌
ということが頻発します。
たくさんあるので
自分のやり易いように
定期的にチェックして
整理してみましょう❗️
- 自動インデント整形
Prettier - 全角スペースの可視化
zenkaku - 対応する()を色分け
Bracket Pair Colorizer - 選択行の強調
Highlight Line - 開始タグ/閉じタグ片方編集すればもう片方のタグも変わる
Auto Rename Tag - スペルミスチェック
Code Spell Checker - ファイルパスの補完候補を出す
Path Autocomplete
ショートカット
Progateにもありますが、
保存は command + S
そのほかにも便利なものがあります✨
一覧も見れますが、
最低限つかいたいものを載せます✍️
単語選択 command + D
更にcommandを押したままDを複数押すと
同じ単語を複数選択
複製 shift⇧ + option + ↓
コメントアウト/コメントアウト取り消し
command + K + C / command + K + U
Emmet
VSCodeで最初から使用できる自動補完。
h1と入力してtabを押せば<h1></h1>となります✨
こんな感じのこともできます。ul>li*3
|
1 2 3 4 5 |
<ul> <li></li> <li></li> <li></li> </ul> |
よく使うものを自分で調べて
その都度に覚えておくと良いと思います❗️
タグをざっくり理解
SEO対策と
意味がわかるコード分けをするのに
タグは重要です💫☝️
全てをdivで囲むのは勿体ない❗
まずはこの4つで大まかに分けると
やりやすいと思います💡
section
nav
header
footer
section
本で言う「章」
見出しと本文で
1つの区切りになっている範囲。
なのでなるべくh1を入れる構成にします💡
まぁページタイトルでh1
他のsectionではh2しか使わない、
ということもあるのでh1の限りではありません🍀
sectionで大まかに分けてからarticleに該当するものがあるか
確認するとスムーズです🌟
HTMLのsectionとarticleの違いを理解して使い分けよう
キャメルケース、ケバブケース、スネークケースを知る
class名や変数、定数、
プロパティなどの書き方のこと💡
- camelCase
大文字でつなぐ書き方
でっぱってラグダ(camel)のコブに見えることから - kebab-case
ハイフンでつなぐ書き方
串を刺していてケバブに見えることから - snake_case
アンダーバーでつなぐ書き方
小文字のみで平な感じが蛇っぽいから
Vue.jsやNuxt.jsなどを使用していると
⚠️データの受け取りではキャメルケースにしてください🚨
とエディターから注意されることがあります。
HTML/CSSではそこまで意識しなくても
書けてしまいますが、
ある程度ルールを決めて
統一しておくと良いでしょう💫☝️
使い分けはチームによると思いますが
1つの例として紹介しておきます。
キャメルケース
catch-copy
1つの意味にまとまる時◎
スネークケース
item_box1
別物を並べる場合に◎
ターミナルに慣れる
HTML/CSS/JavaScriptでは
Gitを使ってない場合
ほとんど触ることがなさそうですが、
後々かならず使うことになるので
慣れておくと⭕️
$はターミナルコマンドの意味なので
実際に入力するコマンドはその後ろから💡
Git未使用でもできる
簡単なコマンド一覧です🤖
$ ls // フォルダ、ファイル一覧
$ cd <フォルダ名> // そのフォルダに移動
$ mkdir <フォルダ名> // 新しいフォルダの作成
Nuxt.jsの場合
コマンドを間違えると
localhost3000以外になることもあるので
載せておきます✍️
ローカルでチェック
$ npm run dev
終わったらこれで終了。
しかしZとか使うと
localhost3000以外になってしまうことが。
$ control^ + C
その場合は
$ lsof -i :3000
$ kill -9 PID
まとめ
模写コーディングを
できるだけスムーズに進める方法を
お伝えしました✨🙌
もっと読み易いコードに❗️
SEO対策も❗️
などなどやれることは
たくさんあるのですが…
最低限、メンテしやすく
見た目が整った成果物を
作れるようになるはずです🎈🧸
Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと
これをやって色々見直していく中で、
この記事を書くことにしました✍️
最初って本当に何から何まで分からないし、
やること膨大ですよね…笑
環境構築から公開、独学でなんて
みんなよくやるよ…
と本気で思った回でした笑