![✅](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><rect fill-opacity="0"/></svg> "白い太字のチェックマーク")
なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル
こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。
この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになる30日間の学習ステップ、その前編です。
30DAYSトライアルの概要はこちらの記事で解説していますので、興味のある方はこちらからご覧ください。
『ゼロからプログラミングを学びたい』『プログラミングを通して人生の幅を広げたい』そんな方のために、30日間でできるコーディング学習カリキュラム【30DAYSトライアル】を作りました。第一歩はこの記事から。...
ファーストステップであるこの記事では、コーディングの基礎学習〜エディタなどの環境設定までを10日間で進めていきます。
DAY1~7. ProgateでHTML&CSSを学習する
Progate編
DAY1.『Progate HTML & CSS 初級編（4章まで）』
DAY2.『Progate HTML & CSS 初級編（7章まで）』
DAY3.『Progate HTML & CSS 中級編（3章まで）』
DAY4.『Progate HTML & CSS 中級編（7章まで）』
DAY5.『Progate HTML & CSS 上級編』
DAY6. 『Progate HTML & CSS 初級・中級道場コース』★
DAY7. 『Progate HTML & CSS 上級道場コース』★
★マークは4h、それ以外は2hが目安
まずは有名なオンラインプログラミング学習サイト『Progate』で、コーディング（HTML・CSSでのライティング作業）の基礎を学びましょう！
Progateとは、環境設定不要でブラウザのみでプログラミングが学べる学習サイトで、学習開始までの手軽さとわかりやすい解説でプログラミング初学者にはイチオシのサービスです。
上に書いたスケジュールに沿って、3つのコースを終わらせていきましょう！
※注意：Progateでは中級編と上級編の利用に有料会員登録が必要です。
平日に2時間ずつコースを進め、休日に復習として道場コースにトライしてみてください。
各コースでは以下のような内容が学べます。
- 初級編→コーディングの基礎
- 中級編→基本レイアウトを作るためのコーディング
- 上級編→レスポンシブなサイトを作るためのコーディング
スマホで勉強できるアプリ版もあるので、通勤時間やお昼の休憩など、ちょっとした空き時間を活用しつつ勉強を進めてみてください( ^ω^ )
Tips1. Progate学習時のコツ
Progateの学習時のコツは３つあります。
- 1周目から完全な理解を求めない
- 正解を探すつもりで取り組まない
- 正解した後、正解から少しコードを変えながら進めてみる
Progateで学習をする時、1周目は理解度30％くらいでもいいです。
スレッドやヒントを見つつ進めちゃっていいので『繰り返す』ことが大事です。
人間よく使うものは勝手に覚えますし、逆に1発で完璧に覚えたつもりでも、復習しないとすぐ忘れます。
繰り返して、30％→50% →70%…と定着度を上げていきましょう！
また、Progateの通常コースを解くとき、正解を探すつもりで解くことはおすすめしません。
綺麗・汚いはありますが、コードに正解はありません。
なので、
・通常コースで使い方を覚える
・道場コースで覚えたことを試す
というイメージが良いでしょう。
『正解ルートを探す作業』じゃなく、『覚えたことを試す学習』になるように意識してみてください。
『正解した後、正解から少しコードを変えながら進めてみる』については、例えば「paddingとmarginって何が違うの？」と思ったら、課題でpaddingをつけた箇所にbackground-colorをつけ、その後marginに書き換えてみると良いですよ。
色々と試せば試すほど、コーディングへの理解が深まります( ^ω^ )
内容はコーディングではなくサーバーサイドのプログラミングについてですが、こちらの有料noteは独学を進める上で大切なコツが纏まっていて、とても参考になるのでオススメです。
プログラミングを独学で勉強して起業したので、学習のコツをまとめてみる
Tips2. Progateの道場を有効活用しよう
道場編は通常コースと違って『どういう実装をすればいいか』というヒントがありません。
じゅうぶん理解したつもりでも、ヒントなしだと意外と難しいです。
詰まった箇所は、通常コースのスライドに戻って復習しながら進めましょう！
また、実務でコーディングするときは
- まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
- CSSを付けつつデザイン通りに調整していく
の順でコーディングします。
Progateの道場編もまずHTMLを先に書き上げてからCSSを付けるという順番でやるのがオススメです。
HTMLで全体を書き上げるときには、以下の３点を意識してみてください。
- 完成形をイメージしてブロックを作る
- どこに何のスタイルを当てるか頭の中で設計しつつ書く
- レスポンシブも見越してブロックを整理する
これをクセづけるとコードが綺麗になっていくので、レスポンシブにする時も軽く追記するだけで済みますよ！
Tips3. コーディング初心者が最初につまずくのは「float」
コーディング初心者が最初につまづくのは『float』です。
よくあるミス＆その対策まで書かれたこの図解を参考にしてください↓
681人がこの話題について話しています
Tips4. ボックスモデルを理解しよう
ボックスモデルは超重要概念です。
Webサイトは、ボックス（四角い箱）がいくつも積み重なって出来ています。
この四角い箱の中に
- 本体（widthとheightで指定できる部分）
- padding（内側に取る余白）
- border（外と内の境界線）
- margin（外側に取る余白）
があります。
以下の記事が分かりやすいので、是非読んで理解しておきましょう！
margin？padding？ボックスモデルを理解しよう！あとbox-sizingが便利だよ、って話
↓のように、自分の言葉に置き換えて説明できると◎ですね。
- 本体：自分
- padding：服
- border：輪郭
- margin：パーソナルスペース
2日目も無事完了しました。
【paddingとmarginの覚え方】
padding → 詰め物＝内側
margin → 利ざや＝余り物＝外側
DAY2.『Progate HTML & CSS 初級編（7章まで）』 #30DAYSトライアル - エンジニアステップ https://www.engineer-step.com/entry/site-seisaku-2 …
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="314"><rect fill-opacity="0"/></svg>)
アルパカエンジニアさんの他のツイートを見る
エンジニアさんの他のツイートを見る
DAY8~10. 開発環境を構築する
環境設定編
DAY8.『エディタをインストールしよう』
DAY9.『基本のショートカットを覚えよう＋ファイルパスを理解しよう』
DAY10.『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』
Progateの初級～上級でHTMLとCSSを学んだ後は、実務と同じローカル環境でコーディングしていきます。
そのための準備に必要なのが上記の3つのステップです
それぞれ詳しく解説していきます。
DAY8. エディタをインストールする
まず、コーディング作業を行うために必須の『エディタ』を用意しましょう。
オススメは、Microsoft社が開発した『Visual Studio Code（VScode）』です。
2015年に公開され、軽量かつ完成された使いやすさで大人気のエディタです（無料です！）
以下にVScodeのインストール方法の解説リンクと、
入れておくべき拡張プラグインの公式リンクを貼っておきます！
エディタのインストール＋拡張プラグインの追加まで完了させましょう。
VScodeのインストール方法
インストール方法（Windows用）
【ゼロから！】Visual Studio Codeのインストールと使い方
インストール方法（Mac用）
MacにVisual Studio Codeを導入してみる
おすすめの拡張プラグイン
オススメの拡張プラグインはこちら。全てインストールしておきましょう！
それぞれどんな拡張機能なのか、公式から読む or 日本語サイトをググってみてください( ^ω^ )
- Auto rename tag
- CSSTree validator
- Visual Studio Code CSS Support for HTML Documents
- IntelliSense for CSS class names in HTML
- Japanese Language Pack for Visual Studio Code
- HTMLhint
- zenkaku
Emmetを理解する
VScodeが初心者におすすめなエディタである理由の一つが『標準でEmmetがついてるから』です。
※EmmetとはHTML/CSSの超強力な入力補完プラグインのことです
使い方はこの記事がわかりやすいです↓
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集
DAY9. 基本のショートカットを覚える＋ファイルパスを理解する
次にやることは、基本のショートカットを覚えること。
ショートカットをどれだけ使いこなせるか ＝ 作業効率に直結します！
例えば「現在の行を1行下にコピーする」動作をする場合、ショートカットを一切使わずにやると「マウスで行を選択して、右クリックでコピーして、1行下に移動して…」と10秒くらいはかかります。
しかしショートカットを知っていれば1秒未満で完了です。
WEBサイトを作るときには、この積み重ねが大きな差となって現れます。
今のうちに基本的なショートカットは覚えておきましょう！（VScodeに慣れるためにも！）
以下のショートカット集の『基本操作』だけでいいので、一通りやってみてください。
作業する場合もショートカット集を見ながらでいいので、極力ショートカットを使うようにしましょう。
ショートカット集リンク
Windows版
【Windows版】VS Code キーボードショートカット一覧 （オススメ付き）
Mac版
【Mac版】 VisualStudioCode キーボードショートカット
VScodeのショートカットは「Code > 基本設定 > キーボードショートカット」から確認・追加・編集できます
すべて覚える必要はないので、基本的なショートカットだけ使いこなせるようにしときましょう！覚えるべきショートカットは DAY9の #30DAYSトライアル課題 に載せてます
ショーヘー@東フリCMOさんの他のツイートを見る
ファイルパスの理解
Progateはスラスラと勉強できる反面、ローカル環境でのファイルパス規則が身につきにくいです（それすらも改善されつつあるけど…）
ローカル環境での作業練習として、デスクトップに以下のようなフォルダ構成を作ってみてください。
- 作業用フォルダ『practice』
- htmlファイル『index.html』
- 『css』フォルダの下に『test.css』
- 『img』フォルダの下に『test.png』
※test.pngは持ってる写真の名前を変更して使ってください。なんの写真でもOKです。
フォルダ構成はこんなイメージです↓
practice
│ index.html
├─css-test.css
└─img-test.png
フォルダとファイルの配置が完了したら、以下の3つにトライしてみてください。
- index.htmlに、h1で『Hello World!』と記入してください
- test.cssに、h1のフォントサイズを32pxに設定し、index.htmlで読み込んでください
- h1の下にtest.pngを読み込んで表示してください
ファイルパスがよくわからない方は、こちらの図解がわかりやすいです。
DAY10. Google Chromeの検証を使う ＋ LiveServerをインストールする
最後に開発を効率化するために、Google ChromeとLiveServerのインストールを行いましょう。
Google Chromeのダウンロード
開発には『Google Chrome』ブラウザを使いますので、もしChromeを入れてない方はこちらからダウンロードしてください。
Chromeの検証機能を使ってみよう
なぜChromeを開発で使うのか？
それは、コーディングにGoogle Chromeの検証機能が必要不可欠だからです。
HTML/CSSのコーディングに絞っても、
- 検証画面からデザイン変更を確認
- :hoverや:activeなどの擬似クラスをあてた際の挙動を確認
- レスポンシブ表示した際の見え方を確認
など様々な場面で使います。
コーディングするときは検証を開いて確認しながら進めるクセをつけましょう！
サルワカさんの説明がわかりやすいので、こちらを見て使い方を把握してください↓
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
使い方を把握したら、次のステップを実行してみましょう。
- デスクトップに作った『Practice』フォルダをVScodeで開く（フォルダごとVScodeのアイコンにドラッグ&ドロップで開けます）
- test.pngにホバーした際、opacity:0.7になるようcssに追記
- Google Chromeでindex.htmlを開いて検証を開く
- 検証画面からh1のテキストを「30DAYSトライアル 10日目達成！」に変更
- 検証画面からh1の文字色を赤に変更
- 検証画面からtest.pngのホバー時のアクションをopacity:0.1に変更
- 検証画面からiPhoneXのサイズでindex.htmlを見てみる（とりあえず見るだけでOK）
余談ですが、Google Chromeの検証で変更したソースコードはそのままファイルに保存できます↓
【コーディング初心者のためのTips】
Chromeの検証で変更したソースコードは、そのままファイルにして保存できます。やり方は@kazutaka_sagojo さんのツイートをご覧ください
僕もこのツイート見て知ったので、もっと早く知りたかった...https://twitter.com/kazutaka_dev/status/1078956017893830657 …
ショーヘー@東フリCMOさんの他のツイートを見る
「LiveServer」をインストールしよう
簡易ローカルサーバーを起動できるVScodeの拡張機能「LiveServer」をインストールしましょう。
LiveServerのインストール＆使い方は超簡単です！こちらを参考にどうぞ↓
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Serverは、HTMLやCSSファイルの更新を勝手に検知してライブプレビューできる機能です。
変更を加えたファイルを確認するときに、リロードする手間が省けます。
上に書いたステップ4〜7の変更を、今度はhtml/cssファイル上で一つずつ実行して、LiveServerの画面で勝手に変更されてることを確認してみてください。
初めて見たら感動するはず！( ^ω^ )
Tips5. Google Chromeの便利な使い方
最後に、Google Chromeの便利な使い方も紹介します。
【コーディング初心者のためのTips】
Chromeの検証から要素のセレクタをコピーできるって知ってました？
HTMLがごちゃごちゃして複雑なページでも、これを使えば一瞬で目的の要素を指定できます
「なぜかCSSが効かないなぁ...」って時も、セレクタの記述ミスならこの方法で秒で解決です
32人がこの話題について話しています
コーディングの基礎学習〜環境設定編まとめ
以上、DAY1〜DAY10までのまとめでした。
ゼロから学習をスタートするとき、一番しんどいのはこの最初の10日間です。
そこさえ乗り越えれば自然とリズムができてくるので、頑張りましょう！
またリアルタイムにデイトラに参加し、毎日詳細な解説記事をあげて下さったアルパカさん（@engineeraru ）の記事もとても参考になると思うのでぜひ見てみてください。
【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】解説まとめ #30DAYSトライアル
それでは！
