🙆‍♀️

HTML/CSS (補足編)

2022/11/11に公開約4,400字

環境構築を終えた方、お疲れ様でした!
ここからはいよいよHTML/CSSのカリキュラムが始まります。

目次

目次
準備
ディレクトリ構造について
01 | 1-Puzzleで使うファイルについて
tips. vscodeの画面分割
tips. インデントの一括揃え
tips. 検証ツール(developer tool)を使いこなそう
まずはマネしてみよう!
プロゲートで肩慣らし
もう一つの選択肢:模写
課題の進め方(おすすめサイクル)

準備

まず、最初に以下の状態まで出来上がっていることを確認しましょう。
カリキュラム0の「環境構築」を終えている
・sourcetreeがご自身のPCにダウンロード完了し、BacklogにあるGit一覧から
「HTML_CSS.Begginer」のリポジトリ(マスターブランチ)をご自身のローカル環境にクローンできている
(Gitの場所: https://mm0311.backlog.jp/git/GRTM)

templeteフォルダから必要なものを、取り組むべき課題(最初は01 | 1-Puzzle)のフォルダにコピーできている(gif参照)
※これをやっておかないと最初の提出の際に必ずと言っていいほど突っ込まれる上に、ポインターによっては「wikiを読んでください云々カンヌン」と嫌味なFBが帰ってくることもしばしば。

templeteからコピー(動画)  
01に貼り付け(動画)

ディレクトリ構造について
ここまで完了していればあとは実際にコードを書いていくことになるわけですが、そのためにも最初に確認しておくべき項目を紹介しておきます!
こちらのwikiに目を通すと大体のフォルダやファイルの説明があります。
…が一通り読んでも、慣れていないうちは何のことを言っているやらさっぱり。

まずは01 | 1-Puzzleで使用するものだけをざっくり見ていきましょう。

index.html

assets

stylesheet

object

01 | 1-Puzzleで使うファイルについて

ひととおりフォルダやファイルは確認できましたか?
それでは01 | 1-Puzzleで実際に使用するファイルを用意しましょう。

index.htmlとindex.cssをテキストエディタに表示させてください!(Visual Studio Code)
index.htmlを開く(動画)
index.cssを開く(動画)

tips. vscodeの画面分割
ちなみにこれは個人の好き好きですが、いちいちタブを切り替えてhtmlファイルとcssファイルを行ったり来たりするのは面倒だと感じる方は以下のように窓を2つに分けて作業すると捗るのではないでしょうか。おすすめです。
vscodeの画面分割(動画)

tips. インデントの一括揃え
これからコードを書いていく上でよく発生することなのですが、改行やタグの構造の入れ替えによって生じるインデント(スペース)のズレを一括で設定する方法がありますので、先に紹介しておきます。

ズバリ、tabキーです

以下の動画をご覧ください。
インデントの一括変更!(動画)

インデントを変更したい行を選択したあとにtabキーを押すと半角スペース2つ分、右にずらすことができます!
逆に、左にずらしたい場合はshiftキーを押しながらtabキーを押してください!
ね、簡単でしょう?

tips. 検証ツール(developer tool)を使いこなそう

webブラウザには、今表示しているページの情報を確認するための検証ツールと言うものが存在します。今回はGoogle Chromeにデフォルトで備わっている機能で見てみましょう。
起動の仕方はとっても簡単
マウスなら右クリックで、スライドパッドなら二本指タップでメニュー開いて…
「検証」を選択!
こんな感じです!(動画)

もしうまく行かない場合はchromeの右上のメニューボタンから…
こっちからでもいけます(動画)

で、このデベロッパーツールなんですが…

順番に解説していきますね。
①Elementタブ
開いているページのHTML構造が表示されます。

②Styleタブ
選択しているタグ(HTML要素)に適用されているスタイル(CSS)が表示されます。ここを見れば何が適用されて、何がされていないのか一目瞭然ですね。

③device toolbar 表示切り替えボタン
レスポンシブ対応表示にするか否か決定するボタンです。
 表示するウィンドウのサイズや倍率等を設定できます。
こちらの動画でイメージをつかんでいただければ…
※ちなみにこのモードだとクリックじゃなくて操作がタップになります。要するにスマホとかタブレット仕様ですね。

④要素調査ボタン(命名適当)
これがonの状態で画面上の要素にマウスホバーすると…?
こちらの動画でイメージをつかんでいただければ…
静止画だとこんな感じです
お目当ての要素をクリックすると…?
こんな感じで要素の選択が可能です

選択している要素のcssをここで変更すると「仮の」スタイル変更ができます。ページに更新をかけると元に戻っちゃいますので、ある程度当たりがついたらきちんとファイルに修正をかけましょうね。

ここに紹介していない便利な使い方もたくさんあるので、是非ご自身で調べて使い倒してくださいね!

まずはマネしてみよう!
プロゲートで肩慣らし
では、早速コードを書いていきたいのですが、コードを書くってどういうこと…?

プログラミング・コーディング学習が初めてという方は誰しもが思うこと。
wikiはあれやこれやとルールこそ載ってはいますが、それ以前の知識がない!何から手をつけたらいいかわからない!

そんな方は無料でプログラミングのいろはを教えてくれる学習サイトで少し肩慣らししてみるのが良いかもしれません!

手っ取り早いのは「プロゲート」でしょう!
ある程度のカリキュラムまでは無料で学ぶことができ、なおかつゲーム感覚で進めることができるため、プログラミング・マークアップが初めてと言う方は、まずはここから手をつけて感覚を掴んでしまいましょう!

無料会員登録が済んだら、まずはここにあるHTML&CSS編の初級編をクリアしましょう!
これだけでカリキュラムが驚くほどスムーズに、wikiが何を言っているのかなんとなくわかるようになるはずです!(※私はプロゲートの回し者ではありません)

もう一つの選択肢:模写
プロゲートは既に開発環境がすべて整っていて、とにかくコードを書くだけという非常に易しい造りとなっています。それが故、全体の構造を把握するということには向いていません。
そこでもう一つの練習方法があります。模写です。

皆さん、backlogのgit一覧のページから、他の方が作成したブランチやファイルを覗き見ることができることはご存じでしょうか。

みなさんが作成したブランチ一覧が表示されます

ブランチの中を見てみると…

こんな感じでディレクトリ構造やファイルの中身を確認することができます。

試しに1-Puzzleをクリックしてみましょうか。

01の中身は?

あ、ふーん…

「ブラウザで開く」をクリックすると新しいタブが開き、ユーザー名とパスワードを求められますので、backlogのご自身のメールアドレスとパスワードを入力しましょう!

すると…?
index.htmlならなんとそのまま結果を見ることができます!

他の人がどんな風にコードを書いていったのかを見るのは非常に参考になるでしょう。
ただし、いくつか注意事項があります。

必ずしもその人のコードが正解とは限らない
丸々コピペではあなたの実力にならない

まず1つ目についてです。
①書き方は人それぞれ
一見、見本どおりにコードがかけていると思いますが、実は書き方は千差万別。タグの使い方、クラス名の付け方、cssプロパティの設定の仕方や順番…
1つの要素をとっても人それぞれで完璧な正解は存在しません。

②ポインターによって指摘のレベルが違う
「他の人はこの書き方で課題パスしているのに私は指摘を受けたぞ!いい加減にしろ!」
…まあ、そんなことがあるわけです。事実、本来であれば指摘事項に当たっていたであろう項目がそのままスルーしてしまったなんてことは筆者の経験上結構あります。その時誰がポインターで、それまでどのぐらいつまづいてきたか、何回目のFBか…いろいろな要因はあるかと思います。
ただ、①にも書いたように、課題をパスした人のgitがすべて正しいとは限りません。時には嘘が混じっていると疑ってかかりましょう。

次に2つ目について。

これは言わずもがなですね。わからないからと言ってすぐに答えを見にいってしまったり、書いてあることをそのままコピペしているようでは理解は深まりませんし、そのまま次へ次へと進んでいっては最終的に現場に経った時に苦労することでしょう。

課題の進め方(おすすめサイクル)
ある程度慣れてきたら、という前提ではありますが、課題の進め方としておすすめする流れは以下のとおりです。

とりあえずwikiをヒントにコードを描いてみる/環境構築してみる
つまづいたらとりあえず仮説を立ててみる
立てた仮説を元に調べてみる
調査の結果を元に検証する(コードの書き直し、構造の見直し等)
2~4を繰り返して、それでもダメなら他の人のブランチを覗いてみる
自分の書いたコードと何が違うのか比較する
新しい仮説を立てる
以降繰り返し

みたいな感じでしょうか。
日々、案件先でのお仕事で時間が取れない中での学習であるため、苦しいことでしょう。
それぞれご家庭の事情もあるでしょうからくれぐれも無理は禁物ですが、とにかく自分から積極的に情報を取りに行くという姿勢を何よりも大事にしてください。

やってみたけどうまくいかない。
調べても分からない。
何が分かっていないのかが分からない。

そんな状況で悶々と一人悩む前にまずは相談してみましょう。ポインターに質問しても返答までは時間がかかりますが、社員同士であればもっと密に、気楽に質問しあえる環境があります。

これを書いている私も、自身が経験したことを一人でも多くの方に共有できればと思いこのドキュメントを作成しました。ここに書いていないことでも、なんとなくお力になれると思いますので、ぜひ、お声がけくださいね。

Discussion

ログインするとコメントできます