【HTML/CSS】学習に役立つツールと効率的なやり方③【参考書編】
さて、今回も、HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。
HTML/CSSの学習に欠かせないツールとは
前回2回の記事でプログラミング学習する方法として、以下を挙げましたね。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
以前も書きましたが、私はスクールには通わず独学で勉強を進めているのでそこはよくわかりません。
しかし、それ以外に関しては色々と使ってきました。
今回は主に参考書の活用について私が使っていて感じたこと、オススメの手順を書いていきます。
参考書で学習
参考書を選ぶ前に
さて、参考書での学習方法ですが、そもそも参考書を使って学習するメリットや向き不向きはあるのでしょうか。
参考書で学習するのに向いている人
学習は勉強と同様なので、これまでに受験勉強や資格試験の勉強などで参考書を使うことに慣れていて、苦ではない。
もしくは、単純に読書が好きか、これらに当てはまるかどうかは結構大事です。
私はどちらも当てはまったので、良かったのですが、なぜ大事かといいうとそれが集中力とモチベーション維持に関わるからです。
これが苦手で当てはまらない人が参考書を使って学習を進めても、集中力が続きませんし、楽しくないので日々勉強しようというモチベーションも保たれません。
当てはまりやすそうな人は、
- 小説の1ページ目で眠くなる
- 普段滅多に本を読まない
- 漫画などは絵を見て内容はサラッと読む程度だ
このあたりでしょうか。
こういった方はProgateなどゲーム感覚で直感的に使えるツールや音声が入る動画学習などにしたほうが良いと思います。
ちなみに私は逆のパターンなので、動画学習などのドットインストールやYoutubeでの学習は全く集中が続きませんでした。。
参考書で学習するメリット
個人的には、
- 分からないところを見直しやすい
- 学習の全体感を把握しやすい
- 正確な情報や知識が身につきやすい
- PC1台の場合、学習環境的にやりやすい
このあたりです。
参考書は本なので、読書と同じく「あれ、これってどのページで見たっけ」というような状況のときに見返しやすいです。
そして、ページ数と項目がパッと見で分かりやすいため、学習スケジュールや参考書の種類によっては予め学習する内容を絞って取り組むことができます。
私個人的には、読書が趣味なのもあり、上記の1と2のメリットは非常に役立ちました。
また、3は内容によりまして、何でもそうですがネット上の答えって複数あって真反対なことってありますよね。
ググることは大事ですが、変に調べすぎて思考が迷宮入りするのであれば、評価の高い参考書で出来るだけその通りに進めるなどしたほうが、変に消耗しなくて済みますので、時間を無駄に浪費せず正確な情報を得やすいです。
4は簡単な話で、PCで作業するのにコード見つつ別のタブで調べ物をしてマウスを動かす回数が多くなったり、スマホで見つつPCでコードを見て、気が散ったり(笑)などの可能性が出てきます。まあこれはあくまで可能性の話ではあるので、こちらの方が向いていたり、PCでウィンドウが2つあるといった場合は当てはまりませんので参考に、です。
あと、補足として電子書籍は参考書ではオススメしません。本としてのメリットが半減します。
では、デメリットもついでにあげると、
- 重い
- 持ち運びが面倒
- 情報が古い可能性がある
- 本屋に行く手間がかかる
上記2つはそのままとして、3の情報は改訂版や出版日を確認しましょうねってことです。
4は本はどうしても人によって向き不向きがあるので、実際に手にとって見る方がいいのですが、これだと自分で探しに行かないといけません。
気分転換にはなりますが、ここに時間を掛けたくないのであれば、中身を見ずにレビューだけで買うことを決めるか、参考書での学習をやめるかになります。
以上に挙げたことを踏まえた上で、私が学習初期に使って良かった参考書のオススメを紹介します。
HTML/CSSの初心者にオススメの参考書
スラスラわかるHTML&CSSのきほん
その名の通り、HTML/CSSがスラスラ分かる参考書です。
レベル感で言うと、Progateのレッスンと道場、ドットインストールの｢ウェブサイトを作れるようになろう｣
あたりをこなして、アウトプットの方法や次に勉強することが分からない。
と言った方向けです。
内容は、実際に架空のカフェサイトを作っていく過程を説明している参考書、なのですが、とにかく説明が分かりやすい。
専門書というよりは全くHTML/CSSを知らない方でも読めるレベルなので、これより簡単な説明の参考書はないくらいです。
また、レスポンシブ対応もしているので、より実践向きかと思います。
個人的にこの制作の過程で、どのようにしてホームページ制作を進めていくべきかが見えてきたので、この先の学習の流れも掴みやすくなりました。
完成するとこんな感じです。
HTML/CSS 初級～中級者にオススメの参考書
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
私がめちゃくちゃ好きな参考書です！
何がと言うと、先ほどオススメしたスラスラわかる〜、は本当に初心者向けなのでデザインがベーシックでオシャレではありませんが、この参考書では実践でそのまま使えるんじゃないか、というくらいオシャレなサイトを作っていく手順を説明してくれているんです。
しかもスタンダード、グリッド、シングルページ、と3つの構成を学べるので正直このレベルのサイトをサクッと作れるようになるとそれこそ実践で通用するレベルかと思います。
更に、著者の説明も丁寧でなぜそのclass名をつけるのか、なぜこの場面はこのコードを使うのか、などの根拠もすごく理解できます。
私はそこがすごく勉強になり、この参考書を読んでいる時何回も「なるほどねえ～」とつぶやいていました。笑
このレベルのサイトの作り方が分かるの凄くないですか、、？
#今日の積み上げ
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年11月18日
➡️スタンダードレイアウト2周目完了！
自力で模写コーディングできた！
index.htmlのみで下層ページは作ってないので、今度Bootstrap組み込んだらこのまま他ページ作ってみようかな😀
あと、デスクトップ録画って簡単便利ですね✨
さぁ2章目新しい所やるかー！#プログラミング初心者 pic.twitter.com/AWpriwFmGZ
ようやくgridでのサンプルサイト作成終わり！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月1日
個人的にjsライブラリのmasonryかなりハマりました笑
自分のポートフォリオ案の1つはこれをベースに作っていこうと思います😌
masonry=石積み。レンガのように敷き詰めるような動きが好きです✨#プログラミング初心者 #駆け出しエンジニアと繋がりたい pic.twitter.com/6KoliL1Wlv
#今日の積み上げ ？
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月13日
おはようございます🐥
参考書を見つつアレンジを加えた仮のポートフォリオサイト！昨日モバイル対応含め完成させました〜
やはりアウトプットすると俄然勉強にやる気が出ますね💪
今日以降も着々と進めましょう😌#おは戦r1213dk#駆け出しエンジニア #プログラミング初心者 pic.twitter.com/LvpvssTIAy
おわりに
参考書のタイプは2つに分かれる
今回は参考書での学習方法とあわせて、自分が使っていてよかったと感じたHTML/CSSの参考書2冊の紹介でした。
重要なのは、共通して1つの架空サイトを作る過程を通して理解を深めることです。
プログラミングの参考書においてはこれがかなり重要になってきます。
というのも、参考書にはざっくりと2つのタイプがあり、こういった手順をふんで制作物などを作っていくタイプと、使える機能を網羅したタイプがあります。
まあHTML/CSSでは前者のタイプがほとんどなので、実際に手にとって見て「このサイトめっちゃオシャレ！作ってみたい！」と思えたら買う、という感情に任せて良いのではないでしょうか。そのほうが楽しんでやれますしね。
そのあとに例えばCSSの理解を深めたいなあ、と思ったら、後者のタイプの参考書を買ってみるなどしたほうがいいですよ。
とにかく、個人的にはHTML5/CSS3モダンコーディング。この参考書に出会えて本当に良かったです。めちゃくちゃレベルアップできました。
もし本屋さんで見かけたら手を取ってみてください。
次回はその他の勉強法についてあげようと思います。
それでは。
【2020.01】運営の途中経過を振り返ってみる
Twitterとブログとプログラミングを続けている今現状。
それぞれの途中経過を記すために個人的に振り返っていこうと思います。。
ブログ
現状、実績がどんなものか
数字がどんなものか見てみます。
未だに見方がわかっていない。笑
とりあえず、はてなブログを開設してサーチコンソールを入れただけなので、こういった管理はきちんとできていないのが現状です。数字も低い！
はてなブログの方で見るともう少しグラフが分かりやすいですね。
また、昨日2/2でちょうど30記事投稿しました！
少しずつですが充実してきました。
しかし、とりあえずの目標である100記事まではまだまだ。
これからも積み上げ続けたい。
過去に挫折したときはちょうど30記事くらいで辞めましたので、モチベーションが続いてるのはいい傾向です！
頂いたコメントまとめ
ありがたいことにTwitterから見ていただいていたりするもので、本当にフォロワーさんには感謝です。。
このブログを始めたのも誰かの役に立てばと思い立ったからなので嬉しいですし、モチベーションも上がります。
ということで、Twitterでいただけたコメントを勝手にまとめました。
初めまして！kohiと申します☺️
— Kohi@エンジニアになるまで (@kohieeuu) 2020年1月28日
読ませていただいたのですが、すごいわかりやすいです！
今ちょうどBootstrapについて勉強していたので
参考にさせていただきます✨
マサさん@masa8wdgのブログでbootstrap勉強。分かりやすい👍取り掛かりやすい〜#プログラミング学習 https://t.co/3VKPoFZYzc
— とがり (@mezasu_togari) 2020年1月28日
読ませていただきました☺️
— タクミ@プログラミング学習中 (@takumi_rinlog) 2020年1月18日
僕が出てきてちょいと驚きました😆
今日もまた嬉しさの込み上げるツイートで歓喜の舞です💃
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月7日
久しぶりの夜更かし作業でしたが、いい気分で寝れそうです😪
明日は5時→7時起きに変更で朝から頑張ります！！
本日もお疲れ様でした〜😌#おつかれ戦隊0107 https://t.co/CiNXXTYZ0A
マサさん見てるとブログ始めたい欲が刺激されました、、！！笑
— たけ（ぽんれい） (@sleeper_520) 2020年1月5日
ブログ、今朝読みましたよ！😁今後も読ませていただきます。。🙇♀️
時間確保、一番の課題ですよね🤔
あ！フォロワー400にん越えおめでとうございます🎉🎉🎈
コメントいただけるだけでニマニマしてます。
本当に発信していることを肯定されるとモチベーションが上がりまくります！
いつもありがとうございます！
現状、ブログの課題
ブログの課題としては、
①アドセンスとアナリティクスをしなかったこと
アドセンスも数年前に取得したから使えるのに何もせず、、
また、アフィリエイトは敬遠していたのですが、
「ブログで物を紹介する時なんかには分かりやすいリンクがあった方がユーザーのタメだなぁ」と思いつつ何も考えてない状態、、
ということで2月度なるべく早くここをやるべきですね。がんばります。
②毎日投稿を若干怠ったこと
意気揚々と今年は毎日投稿をする！と宣言したものの、1日遅れなどが続く始末。。
#あけましておめでとう
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月31日
令和初の年始の幕開けですね😆#今年の抱負 は
・案件獲得
・興味のある言語は全て着手
・ブログ毎日投稿
・フォロワー4桁
・月に5冊の読書
・役立ちツイート
フォローの皆様、今年も宜しくお願い致します🙇♂️#プログラミング初心者#駆け出しエンジニアと繋がりたい
予定がある日に遅れてた印象です。
ですので、プライベートとの時間の両立も課題となってきます。
③時間の使いすぎ
勉強しつつその時にメモした内容を自分の言葉で置き換えてブログにする、というのを当初掲げた1つのコンセプトとしてやってきてますが、ブログに時間を掛けすぎてました。。
ですので勉強時間が減っているという本末転倒な事態になっています。
もう少し、時間管理に気を配るのも課題の1つですね。
それなりに発信しているつもりの1月でした。
12月まではプログラミングの学習面での気づきをたくさんツイートしていたので、フォロワーさんの伸びも良かったですが、上記でも書いたように1月はブログに注力しすぎていた為(プログラミング:ブログ=3:7くらい)、自身のフォロワーさんをターゲットにし、発信してこれなかったように思えます。
これはかなり反省。。
それでもTwitterを始めてからもうすぐ3ヶ月という短期間で600名近い方と繋がれたのは凄くありがたいことです。
また、1/12からは2児のパパさんのアプリをインストールさせていただいております。
【宣伝】【ぷち拡散希望】
— 2児のパパ＠フォロバします (@BlogStren) 2019年9月27日
Twitterのフォロワーの片思い/片思われ等の数がわかる個人アプリ作ってたりしてます。
Twitter片思いチェッカーってアプリです！https://t.co/mh9mZEzEil
おっ、これは！
って少しでも思ったらインストールして貰えると嬉しいですー！ pic.twitter.com/cSp3eQAS2e
こんな感じでブログにもサッと貼り付けられて超便利です！重宝してます！
ありがとうございます。
フォロー/フォロワーの履歴のグラフです！
片思いチェッカー for Twitter
https://play.google.com/store/apps/details?id=xyz.friegen.twitter.kataomoi.checker
ついでに初の経過振り返りなので、フォロワー遍歴をまとめてみました。
- 11/12にTwitterをスタート
Twitterはじめました！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年11月12日
WEB制作の勉強をしてます。
マサです。
よろしくおねがいします。
勉強と同時にTwitterをはじめたかったのですが、気づくのが遅くなり今に至ります、、
これからもっとがんばるぞー٩( 'ω' )و
よかったらフォローしてくださいね！#プログラミング初心者
- 11/25に100名突破
フォロワーさんが100人を超えた✨
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年11月25日
皆様ありがとうございます🙇
まだまだ初心者ですが、同じ志の仲間が一緒に頑張っている！と思いながら日々勉強に励んでいます！
あとわかりやすく・有益で・丁寧な
情報を共有するよう発信を心がけます💪#プログラミング初心者#駆け出しエンジニアと繋がりたい
- 12/12頃に200名突破
便乗して自分も！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月14日
Twitterを初めて1ヶ月。
いつの間にかフォロワーさんが210名を越えてました！
本っ当にとても嬉しいことです😌
コーディングの楽しさ、
皆様への感謝、
役に立ちたいという思い、
それだけで頑張れています。これからもよろしくです🙇♂️#駆け出しエンジニア #プログラミング初心者
- 12/23に300名突破
フォロワーさん300人突破してる、、！ありがとうございます😳
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月23日
まさか年内にここまでいけるなんて思ってもみなかったです😆
自分は量より質、繋がりを大切に皆さんのお役に立てるようなつぶやきをこれからも心がけていこうと思いますので、どうかよろしくお願いします！🥳#フォロワーさんありがとう
- 12/31～1/1頃に400名突破
そして年末のことなのですが、
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月5日
1ヶ月半で！
フォロワーさん400人突破！
🎉🎉🎉
皆様、いつもありがとうございます✨
いつもながらすっごく嬉しいです😊
もっともっと同じ目標の方たちと繋がりたいので、これからもよろしくお願いします！#駆け出しエンジニアとつながりたい #いつもありがとう
- 1/15に500名突破
✅Twitter開始してから約2ヶ月
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月15日
フォロワーさん500人突破ありがとうございます😆✨🎉
ほぼ学習記録のみで役立つツイート出来ているのか怪しいですが、これからも皆さんに役立つ情報を届けたいと思います😌
ブログもよろしくね！#プログラミング初心者#駆け出しエンジニアと繋がりたい#ありがとう pic.twitter.com/O7f7zuRGlX
- 本日2/3で599名
こう見ると徐々に上がっていきつつ少しムラがある感じでしょうか。
もっとフォロワーさんの役に立つツイートでTLを盛り上げたいですね。
プログラミング
相変わらず面白くてずっと継続できています。
少し遅れ気味ではありますが、元々「短期間でやってやろう」というよりは「長いスパンで確実に知識をものにしてやるぞ」といったスタンスですので、あまり気にはしてません。
ただ、フォロワーさんの成長スピードが早すぎて「これは挫折する人の気持ちも分かるわ～」と勝手に思いつつも気にはせず日々作業しています。
勉強時間はこのときで123h
一応、今日で暦上は100日経過したので、進捗をメモしておきます😄
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月9日
・勉強日数→72日
・勉強時間→123h
・教材→#progate 、#ドットインストール 、参考書×2
・学んだ言語→HTML/CSS/JavaScript少し
予定よりは進んでませんが楽しんでます！#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/jl3XY0omLa
そして、1/11の約1ヶ月前で100日経過。
#プログラミング学習 が100日を突破しました！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月11日
今日の記事はこれからの目標設定を可視化するための自分向けの内容になってます。#はてなブログ#駆け出しエンジニアと繋がりたい
【プログラミング学習100日突破】これからの覚悟の話…https://t.co/HsOqOam2c7
本日2/3で121日で300hを超えてますが、ブログだけの時間も含んでいるので、20h～30hは引いていいくらいかな。
だいたい、280hくらいでしょうか。
言語はHTML、CSS、Bootstrap、Sass、Jquery、Git、あたりですが1月はGitを使うことと、Bootstrapを使うこと、そしてこれらの記事を書くことをメインしていましたね。
2月は黙々とコーディングする時間も多く作りつつ本格的にJavascriptをやっていきたいので頑張りたいと思います！
おわりに
以上が経過報告です。
また、2月度は3/1頃にあげようと思いますので、目に見える成果を書けるように更に努力の積み重ねを進めていきたい。
あ。読書も開始しないと。
やることは多いですが、それだけ充実した学習生活を送れているということ。
感謝です。
それでは。
【HTML/CSS】学習に役立つツールと効率的なやり方②【動画学習編】
マサです。
今回も、HTML/CSSを勉強するときに役立った学習ツールをまとめてみました。
HTML/CSSの学習に欠かせないツールとは
前回の記事でもプログラミング学習する方法として、挙げました。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
以前も書きましたが、私はスクールには通わず独学で勉強を進めているのでそこはよくわかりません。
しかし、それ以外に関しては色々と使ってきました。
今回は主に動画の活用について私が使っていて感じたこと、オススメの手順を書いていきます。
動画で学習
動画はYoutubeとUdemyがオススメです。
よく紹介もされていますね。
YouTube
YouTubeでは最近のYouTuber人気もありますから、プログラミングのチャンネルも凄く増えてますね。
私が登録していてよく見るチャンネルは
- たにぐち まことのともすたチャンネル
- マナブ
- 吉田光利
- チュートリアル道場
この4つです。
たにぐち まことのともすたチャンネル
たにぐちさんはとにかく説明が分かりやすいです。
私もBootstrap講座ではお世話になりました。
だいたいどの講座も一回10～20分ですので、見やすいかなとも思います。
Slackで無料のコミュニティ運営もされているので、情報収集にもいいかもしれませんね。
マナブ
ご存知マナブさんがされている動画。どちらかというと技術面よりはマインド寄りの動画が多く、ご本人もリスニングを推奨しているところがあるので、私はスキマ時間に「YouTubeリスニング」と謳って移動時間などに活用させてもらってます。
私の場合、特に学習の目標決めやブログ運営はマナブさんがきっかけなので、勝手に感謝しています。
吉田光利
Skillhub [スキルハブ]の公式チャンネルです。
高額なスクールが多い中で基本無料でここまで色々と講座があるのがまず凄いですし、クオリティも高い。
特にプログラミングの入り口であるHTML/CSSに関しては基礎編、応用編もあり、上記で紹介した「ともすたチャンネル」よりはその辺りが丁寧に解説されているなあと感じたので、入り口にはちょうど良さそうな気がします。
チュートリアル道場
実践で使えるデザインなどに関するチュートリアルで、とにかく情報量が多いです。
例えば、HTMLやCSSでもそれぞれ20個以上の動画があります。
ただ、他のチャンネルでは見かけないような色々な言語に対して同等量の動画があるので、(C言語やSVG、Emmetなど)
その言語の基本を手軽に学びたいけど課金するか迷うときの導入にいいかもしれません。
検索の仕方
YouTubeは全世界共通ですよね。ですので英語で調べても色々な動画が出てきます。
例えばこんな感じ。
コーディング上達にはかかせないアウトプット用のサイトを作れるような内容の動画もありますから、Progateやドットインストールの次に進みくて自分でサイトを作ってみたい！というときにもとても役立つと思います。
Udemy
Udemy(ユーデミー)と読みます。
グローバルマーケットプレイスには、豊富な多言語ライブラリがあり、専門知識を持つ講師の皆さんが教える150,000を超えるコースが含まれています。 ビジネス&起業、プログラミング、学問・教養、芸術、ヘルス&フィットネス、語学学習、音楽、テクノロジー、ゲームなどを含む広範なカテゴリーの中からコースを受講できます。
公式より。
誰でも気軽に講座をネットに上げることができるサービスで、それを有料(無料も少しあり)で買うことができるのですが、プログラミングの講座がかなり充実しています。
ほぼ毎日セールしていますので、20,000円くらいのコースがだいたい1,500円前後で買えることができます。
また、買った人数や評価も公開されているので、買いやすいのと合わせ、あのベネッセが運営しているので信頼性もありますね。
私が買ったコースで特に初期でオススメかつ評価が高かったのがこの2つ
https://www.udemy.com/share/101WGMCUcScVpbRng=/
Web制作完全攻略コース
https://www.udemy.com/course/web-design-master/
Webデザインの完全マスターコース
実際にサイトで調べると評価の高いコースがいっぱい出てくるはずです。
何となくのフィーリングで選んでも30日の返金保証があったりと、そこも安心して買えるシステムとなっているので、気なる方は見てみてください。
【HTML/CSS】学習に役立つツールと効率的なやり方①【学習サイト編】
マサです。
今回は、HTML/CSSを勉強するときに役立った学習ツールをまとめてみました。
HTML/CSSの学習に欠かせないツールとは
最近はプログラミング学習する方法が色々とありますよね。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
大まかに分けるとこんな感じでしょうか。
私はスクールには通わず独学で勉強を進めているのでよくわかりませんが、それ以外に関しては色々と使ってきました。
そこで、個人的に使ってよかったものやそれぞれの特徴を順に記事にして挙げていこうと思います。
今回は主に学習サイトの活用について私が使っていて感じたこと、オススメの手順を書いていきます。
学習サイト
これは有名な2つがありますね。
Progateとドットインストールです。
Progate
Progateは言語ごとにレッスンがあり、それぞれ指示されたコードを書いていくわけですが、自分の書いたコードが直感で分かり、エラーもどこがミスしているのかが分かりやすい作りになっているので、楽しさを実感しやすく、挫折しにくいです。
ただ、その反面このコースを終えただけでは自力で何か作るということは難しいです。本当に導入ですね。
ドットインストール
ドットインストールは個人的にProgateより難易度が高いと感じました。コードも自分のPC上のテキストエディタを使うので、Progateに比べてコードを自分で打ってる感があって、初期の頃はちょっとテンションが上がりました。
ですので、初めにドットインストールからやると、環境構築で時間を取られる方もいるんじゃないかと思いますので(もちろん説明はされてますが)、Progateで少し慣れてからが良いと思います。
この2つを使う上でオススメの学習順序
オススメの学習順序ですが、その前にProgateはスマホで簡易版ができることもご存知でしたか？
これ、手軽にできて便利なんですが、あんまり勉強した気にならないので注意です。
というのも、私の初期の学習順序が、Progate(スマホ版)→ドットインストール→Progateという何ともまあ変な順序で勉強を初めたんですが、その時の状況として、「とりあえずHTMLから勉強するとして、難しかったら嫌だしスキマ時間でできるProgateのスマホ版で勉強を初めてみよう！」といった感じでした。
これが失敗で、ほとんど知識が定着しないままドットインストールの難しさに打ちのめされたわけです。笑
受験勉強でも「教科書を読む前にスマホの勉強アプリで先に勉強しよう！」という方はなかなかいないですよね。あくまで副次的なものとして扱うのが正しいです。
ですので、基本はサイトにある順番をやるべきで、おおまかな手順は
- Progate初級・中級レッスン
- Progate初級・中級道場
- Progate上級レッスン・道場
- Progate Flexbox編
- ドットインストール「ウェブサイトを作れるようになろう」①②
- ドットインストール「ウェブサイトを作れるようになろう」④
これでいいでしょう。
そして、Progateのスマホ版は1と2の間、もしくは2と3の間、またはドットインストールに進んでから、のどこかのスキマ時間で復習のように使うほうがいいです。
また、Progateの初級以降とドットインストールの①②以降は有料プランになるのですが、とりあえず手順の1～5は必須でやっておいた方がいいです。
理由は次に説明します。
無料で始めたい！という人は以前にとりあえず1ヶ月勉強してみよう、という概要の記事を書いた時に軽く触れているので、こっちを見ていただけるといいのではと思います。
Progateとドットインストールを有料プランにすべきか
さて、ではこの手順通りに学習を進めるのに有料プランが必要かどうかですが、半分は○で半分は×です。
なぜなら、この段階ではProgateの有料プランは絶対に必要ですが、ドットインストールの有料プランは必ずやっておくべきと言えないからです。
Progateは初級だけでは本当に必要なスキルが学べません、、
中級～上級のスキルを組み合わせてやっと知識が少しついたかな？といったレベルです。
対して、ドットインストールの「ウェブサイトを作れるようになろう」は①と②までは無料、そのあと私は有料にして学習しましたが、③と⑤に関しては詳解シリーズです。
これは使えるコードなどが順に紹介されているだけなので、「実際どこでどう使うんだろう、、？」とイメージ
しにくく、あまり身につきませんでした。
ただ、④の「ウェブサイトをゼロから制作してみよう」はかなり勉強になりました。
ですので、効率よく極力安く進めるなら、
- Progateの有料プランを1ヶ月(すぐに解約しても1ヶ月は使えます)
- 上記の手順で学習を進める(1～2週目)
- ドットインストールで有料プラン→④の学習(2,3日)
- (ここでアウトプットするために自主制作を入れる)(3週目)
- 次の言語に進む
- Progateで学習(有料プランが終わる前に→4週目)
- ドットインストールで学習
この順にやります。次の言語というのは、HTML/CSSでのあとにフロントエンドの学習をするならJavascriptなどですね。
これはどちらにしても有料プランですので、Progateの最初の有料プランが終了する日までに6まで終わらせておけばいいと思います。
Progateは税込み980円、ドットインストールは税込み1080円です。
【HTML/CSS】Progateでの勉強が終わったらやること4選【爆速で成長します】
前回の記事で、プログラミングを始めるのに
- とりあえず1ヶ月
- Progateから始める(HTML/CSS)
といった内容について主に書きました。
では、1ヶ月続けた後、具体的にどうすれば良いのか？
ツールを紹介されている方は多いですが、それ以外のことを書いている方は少ないので、今回はより詳細な内容をまとめていきます。
自分はそのあたりは行きあたりばったりでしたので、かなり遠回りしながら進めているなぁと感じています。
学習を継続するには何をやるか分かってないと不安になりますよね。そういった方に少しでも手助けになればと思います。
それでは行きましょう！
Progateが終わった後にやること4選
基礎をやり終えたら何をすべきか？
結論から書きますね。
- ドットインストールor参考書を進める
- 目標管理を明確にする
- アウトプットと模写を進める
- 目標を修正しつつ、次の言語へ
順を追って解説していきます。
ドットインストールor参考書を進める
ProgateでHTML/CSSのレッスンを終えただけでは正直スキルが全然足りません。あれはあくまで導入と思っていただいたほうがいいです。
そこで、次にやるべき勉強はと言うと、Progateと同様に人気のある学習サイトのドットインストールです。
ある程度までなら無料でできるので、「動画学習でも集中してできそう！」という方にはおすすめです。
Progateと比べると、コチラの方が難易度が高いと感じますので、良い成長になると思います。
ただ、逆に、「動画学習はあまり向いてない、、勉強は参考書が一番！」といった方は、ドットインストールよりも本屋さんで参考書を買うほうがオススメです。
私は後者で、本を読み進めながら自分でコードを書く方が集中できましたし、より成長したと実感してます。
決して両者をやる必要はないので、自分の向き不向きを考慮して、集中できそうな方で学習を進めていきましょう。
でないと、楽しくなくなってしまいます。
Progateとドットインストールの進め方はこの記事にまとめてありますので、よければご覧ください。
目標管理を明確にする
では基礎学習を終えたところで次にやるべきことはと言うと、それは目標・スケジュール管理です。
急に真面目になってしまいましたが、個人的にはかなり重要なこと思っています。
なぜ目標を定めることが重要かは勉強をしてきた方なら分かると思いますが、自分がやるべきことが明確にならないからです。
受験勉強するときに志望校を決めずに勉強しますか？資格の勉強をするのは、その資格が取りたいからではないですか？
それと同じで、プログラミングをやる上でも、フロントエンドを極めてコーダーになるのか、バックエンドに移行してみるのか、webデザイナーを目指すのか、転職するのか、副業するのか、、どれを選ぶのかによってゴールや必要になるスキルも違ってきます。
重要なのは、「その言語を勉強して、何をしたいか」です。プログラミング言語の習得は手段であって、目的ではありません。
ここを履き違えて目的となってしまうと、Progateやドットインストールでレベル上げを趣味でやっている人となってしまいます。
また、スケジュール管理ですが、独学でやっている上では何をいつまでにやるのかが雑になりがちです。
私はスケジュール帳に書いて自身で管理していますが、一応Twitterで #100DaysOfCode とつけて毎日つぶやいています。
100日間(できるだけ)毎日コードを書こう！というものですから、必然的にダラダラできないわけです。
あとは、30DAYSトライアルを進めるのもオススメです。
私はかなり後になって気づいたので、学び初めの段階でこれを知っていたらこの通りに進めていたと思います。
名前の通り30日間でここまでやろう！というもので、難易度で1st、2nd、3rdと別れていて、目的別に進めることもできるのでかなり便利そうです。(しかも無料)
このあたりのツールを上手く活用しつつ、目標・スケジュール管理を明確にしましょう。
それから勉強を再開です。
アウトプットと模写を進める
では特にHTML/CSSをスキルとして定着させるに最適な方法とは何でしょうか。
💡html/cssでアウトプットの方法に困ったら
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年1月31日
✅簡単なサイトを見つつ模写する
これに尽きます。大事なのはオリジナル要素を考えながら入れること。
これだけで知識の定着が爆速で進みます😌
後、この方の記事で凄く助かりました😄#プログラミング#駆け出しエンジニアhttps://t.co/CKAXxLa2Ij
この方の記事もかなり参考になりました、、
以前こういったツイートをしましたが、一番効果があるのはアウトプットです。
アウトプットは自分で考えコードを書いていくことや既存サイトを見つつ模写することと思っていただければ大丈夫です。
Progateでレッスンをやった後に道場コースをやると「あれ、最初に何書くんだっけ、、？」ってなりませんでしたか？
ここを自分で考え、オリジナル要素を入れつつスムーズに書くことができるとスキルも身に付いてめっちゃ成長が早くなります。
模写に最適なサイトややり方は上記に貼ったツイートの記事にも詳しく載っています。
また、オリジナルで作るのであれば、以下を参考にするといいです。
💡html/cssの知識を効率良く定着させる！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2020年2月1日
✅模写×アウトプット×架空サイト作成がベスト！
1️⃣他サイトの研究
2️⃣似た構成、良い構成を盗みつつメモ
3️⃣オリジナル要素を入れてカンプ作成
順に終えたら後はコーディングするだけ！凄く成長できましたよ✨#プログラミング初心者#今日の積み上げ
最初は自分の好きなジャンルでいいので、作りたい内容に近いサイトを見て、サイトの構成をメモ書きします。
例えば、ファッション系にするなら、好きなブランドのサイトをいくつか見る、というのでOK。
そこからざっとでいいのでデザインを紙に書きます。
カンプというのはデザイン設計書みたいなものです。
これも調べれば出てきます。
準備ができたらひたすらコーディングしていきます。
また、お金をかけてもいいかな、という方はくりのすけさんのnote教材がかなり勉強になります。
この教材にはお世話になりました！
【ゆっくり継続しよう】プログラミングを勉強しようか迷っているあなたに、初心者の私がオススメをしてみる。
継続的にプログラミングの勉強をしてます、マサです。
プログラミングって最近よく聞きますよね？
今回は、近年のプログラミング事情と始めようか迷っている方への敷居を下げるためにこの記事を書きました。
プログラミングを勉強するか迷ってないですか？
最近、プログラミングが流行している
ここ最近プログラミングの勉強を始める方は増えたかと思います。
私も本格的に勉強を始めたのは最近なのでちゃっかり流行りに乗っているのですが、ブログを以前にしていた数年前にも一度プログラミングを勉強しようと思ったことはありました。
そのときにはここまで話題になってなかった記憶があります。
しかし、Twitterやネット記事などで情報収集しているとこういった流れは加速していて、理由は恐らくですが、
- 働きやすそう
- 副業できそう
だと思います。
そして、プログラミングで稼ぎ始めている方たちが情報発信をしていて稼げますと言ってくれていたり、ブラック企業からの脱却や育児との両立といった働き方改革的な面でも魅力的だったり、とするのでより加速しているのではないでしょうか。
更に小学校でも「プログラミング的思考」を育てるため、プログラミングの勉強が義務付けられたのは近年話題になりました。
文部科学省のプログラミングの手引きでもこう明示されています。
今日、コンピュータは人々の生活の様々な場面で活用されています。家電
や自動車をはじめ身近なものの多くにもコンピュータが内蔵され、人々の生
活を便利で豊かなものにしています。誰にとっても、職業生活をはじめ、学
校での学習や生涯学習、家庭生活や余暇生活など、あらゆる活動において、
コンピュータなどの情報機器やサービスとそれによってもたらされる情報と
を適切に選択・活用して問題を解決していくことが不可欠な社会が到来しつ
つあります。
コンピュータをより適切、効果的に活用していくためには、その仕組みを
知ることが重要です。コンピュータは人が命令を与えることによって動作し
ます。端的に言えば、この命令が「プログラム」であり、命令を与えること
が「プログラミング」です。プログラミングによって、コンピュータに自分
が求める動作をさせることができるとともに、コンピュータの仕組みの一端
をうかがい知ることができるので、コンピュータが「魔法の箱」ではなくな
り、より主体的に活用することにつながります。
プログラミング教育は子供たちの可能性を広げることにもつながります。
プログラミングの能力を開花させ、創造力を発揮して、起業する若者や特許
を取得する子供も現れています。子供が秘めている可能性を発掘し、将来の
社会で活躍できるきっかけとなることも期待できるのです。
このように、コンピュータを理解し上手に活用していく力を身に付けるこ
とは、あらゆる活動においてコンピュータ等を活用することが求められるこ
れからの社会を生きていく子供たちにとって、将来どのような職業に就くと
しても、極めて重要なこととなっています。諸外国においても、初等教育の
段階からプログラミング教育を導入する動きが見られます。
こうしたことから、このたびの学習指導要領改訂において、小・中・高等
学校を通じてプログラミング教育を充実することとし、2020 年度から小学
校においてもプログラミング教育を導入することとなりました。
あとは身近なことですが、私はサービス業をしてる中でここ数年で一気にコンピュータの恩恵を受けるようになったと思います。
天下のユニクロ・GUさんでも最近は見かけますが、例えばスマホでの在庫検索やレジの無人化など。
このあたりもコンピュータ、プログラミングの発展により進化したことですよね。
この流れはようは人件費を浮かせて機械ができることは全て機械に任せようということなのです。
そのうち大多数ある職種が減少していく可能性すらあります。
こうした流れから社会人でもプログラミングの勉強をするために独学したり、スクールに通ったりする方は多いみたいです。
勉強を始める前のポイント
まずは1ヶ月、モチベーションとマインドを保つ
そうは言ってもプログラミングと聞くと何となく難しいイメージはあるかと思います。
理系のイメージや、どうしても勉強をし続けないといけないことから挫折していく方も多いと聞きます。
以前こういった記事も書きました。
この記事も今回のテーマと類似しているので参考にしていただけるといいのですが、まずはとりあえず
- 1ヶ月
- 黙々と作業し
- 楽しむ
これを念頭に置いて勉強をすることから始めてほしいと思います。
1ヶ月、私も始めは1日たった1～2時間ほどしかしませんでした。
毎日じゃなくてもいいです。ただ、日数を空けるのは1日までにして、忘れる前に手を動かすようにします。
それだけでも2日に1回1時間で1ヶ月で最低15時間は勉強できます。ここまでで自分に向いてるか向いてないかは分かりますので、その間は無心で手を動かしつつ勉強をしていることを楽しめれば上々だと思います。
また、モチベーションを保つにはTwitterなどをしてSNSで同じような方、もしくはタメになる発信をしている方をフォローしてチェックするようにすると、「自分も勉強しよう！」という気になるのでおすすめです。
このやり方についても上記の過去記事に書いてます。
何から始めればいいか？
これについては私も含め既に勉強してる方はほぼ満場一致でProgateというはずです。
基礎部分は無料かつゲーム感覚で始められるので、楽しさを実感しやすいです。
始める言語はHTML/CSSで決まりです。フロントエンドからやる方が絶対に分かりやすい。
これも過去記事に書きましたが、やりたいことを見つけて言語を色々とリサーチするのは、とりあえずHTML/CSSをやってからでいいのかと思います。
ましてや、本当に最低限の15時間だけの勉強にするなら、やることは限られているので、
- ProgateのHTML/CSS初級～上級までをやる(3h)
- その道場コースをやる(5h)
- それぞれの編でやったコードを組み合わせて自分で簡単に制作(7h)
これくらいでいいと思います。ポイントはアウトプットを最後に入れることです。やっていくうちに「これは自分にはあわないな～」か「自分で考えてやるのは面白い！」のどちらかになるはずです。
後者の場合、絶対続けられるはずですし、アウトプットによって知識の定着もProgateのレッスンをやっている時とは段違いで早くなるので、とにかく一旦取り掛かってみましょう！
ただ、中級・上級を始めるには有料プラン(月額980円)が必要です。
ここで｢お金を出すのはちょっと、、｣となるのであれば、ドットインストールとYouTubeでHTML/CSSと検索して無料のコンテンツを視聴しつつ、理解を深めましょう。
恐らくこっちだと15時間で、というのひ難しいとは思いますが手順としては、
こうなります。これなら無料で始められますが、少しだけ難易度は上がると思います。
ただ、ハマる人にはどちらの手順からやっても面白いと思うはずです！
それでも不安な方へ
それでも続けられるか心配な方はいると思います。
ただ、何度も書きますが、それを考えるのはとりあえず1ヶ月やってからでいいと思います。
次の記事で1ヶ月やった後に次は何をやるべきかをまとめますので、終わったら見てみてください。
とにかく考えるより先に手を動かしましょう。
自分は昔にやらなかったことをすごく後悔しています。
これを読んでるあなたにはそうなってほしくないので、私が初心者の段階である今、この記事を書いています。
今日から一緒に頑張りましょう！
それでは。
【Bootstrapその⑫】グリッドシステムを自由に使ってみる【学習積み上げ】
勉強しだしたらつい深掘ってしまう、マサです。
Bootstrapもほぼ終盤まで来ました。
前回の記事でBootstrapのグリッドシステムについて細かいところまで深堀りましたので、今回はもう少し実践で使える機能についてピックアップして紹介してみます。
ちなみに前回はcontainerとrowの関係がメインでした。
では、早速続きを見ていきましょう！
グリッドシステムを自由に使うには
記述を追加したり、指定のclass名を用いたりすることで自由度の高い配置や余白、順序を変えて並べることができます。
順に説明していきます。
グリッドで入れ子のスタイルを作る
グリッドレイアウトにするには、div.containerの中にdiv.row更にその下にdiv.col1~12をいれるというのが基本のスタイルですね。これは以前やりました。
ですが、この階層は1つのコンテナ内の内部要素を12個に分割してcolの比率で表示するというものなので、単調にならざるをえません。
そこで、新たな要素を入れ子にすることで分割したコンテナの更に内部まで分割することができます。
これを使えばよく見るホームページの構成をすぐに作ることができるので、非常に便利です。
例えば、
<div class="container my-5"> <div class="row"> <div class="col-12" style="background-color: #333; height: 40px; color: #fff">header</div> </div> <div class="row"> <div class="col-12" style="background-color: #f88; height: 300px;"><h1>topics</h1></div> </div> <div class="row"> <div class="col-3" style="background-color: #888; height: 500px;">sidemenu</div> <div class="col-9" style="background-color: #fff; height: 500px;"> <h2 style>main</h2> <div class="row"> <div class="col-4" style="background-color: #49a; height: 100px;">card</div> <div class="col-4" style="background-color: #49b; height: 100px;">card</div> <div class="col-4" style="background-color: #49c; height: 100px;">card</div> <div class="col-4" style="background-color: #49d; height: 100px;">card</div> <div class="col-4" style="background-color: #49e; height: 100px;">card</div> <div class="col-4" style="background-color: #49f; height: 100px;">card</div> <div class="col-12" style="background-color: #8a4; height: 300px;">news</div> </div> </div> </div> <div class="row"> <div class="col-12" style="background-color: #fff; height: 300px;">contact</div> </div> <div class="row"> <div class="col-12" style="background-color: #333; height: 40px; color: #fff;">footer</div> </div> </div>
少し要素が多くなりましたが画像を見ていただければ分かりやすいかと思います。
ちょうど真ん中の要素ですがcolを3と9に分割して、sidemenuとmainに分けています。
更にそのmainの中を4:4:4のcardとcol-12のnewsに分けました。
この記述だけで終わるのでかなり便利ですよね。
ちょっとcontactが雑になったかな、、こんなホームページ構成はない！とは言わないでくださいね笑
始まる位置や高さを変えてみる
これはflex-boxが分かっていれば簡単かもしれません。
指定するときに使うのは、justify-contentとalign-itemsとalign-selfの3つです。
これに、-strat、-center、-endを付け足すことで、どこから始まるかを指定できます。
それぞれ指定したものがコチラ。
<div class="container border border-dark"> <div class="row justify-content-start"> <div class="col-3" style="height: 80px; background: #f88;">box1</div> <div class="col-3" style="height: 80px; background: #f66;">box2</div> </div> <div class="row justify-content-center"> <div class="col-2" style="height: 80px; background: #88f;">box3</div> <div class="col-2" style="height: 80px; background: #66f;">box4</div> <div class="col-2" style="height: 80px; background: #44f;">box5</div> </div> <div class="row justify-content-end"> <div class="col-3" style="height: 80px; background: #d2d2d2;">box6</div> <div class="col-3" style="height: 80px; background: #a2a2a2;">box7</div> </div> <div class="row justify-content-between"> <div class="col-1" style="height: 80px; background: #2a2;">box8</div> <div class="col-1" style="height: 80px; background: #2b2;">box9</div> <div class="col-1" style="height: 80px; background: #2c2;">box10</div> <div class="col-1" style="height: 80px; background: #2d2;">box11</div> </div> <div class="row justify-content-around"> <div class="col-3" style="height: 80px; background: #ff8;">box12</div> <div class="col-3" style="height: 80px; background: #ff6;">box13</div> </div> <div class="row align-items-start"> <div class="col-2" style="height: 60px; background: #fa0;">box14</div> <div class="col-2" style="height: 80px; background: #fa4;">box15</div> <div class="col-2" style="height: 100px; background: #fa8;">box16</div> </div> <div class="row align-items-center"> <div class="col-2" style="height: 60px; background: #f0f;">box17</div> <div class="col-2" style="height: 80px; background: #f4f;">box18</div> <div class="col-2" style="height: 100px; background: #f8f;">box19</div> </div> <div class="row align-items-end"> <div class="col-2" style="height: 60px; background: #0ff;">box20</div> <div class="col-2" style="height: 80px; background: #4ff;">box21</div> <div class="col-2" style="height: 100px; background: #8ff;">box22</div> </div> <div class="row" style="height: 240px"> <div class="col-2 align-self-satrt" style="height: 80px; background: #a0a;">box23</div> <div class="col-2 align-self-center" style="height: 80px; background: #a4a;">box24</div> <div class="col-2 align-self-end" style="height: 80px; background: #a8a;">box25</div> </div> </div>
少し長くなりましたが、見たままの通りです。要素にちゃんと余白の余裕があるときに有効ですね。
それぞれ特徴を挙げていきます。
justify-contentを使用(box1~13)
- 親要素のrowに指定する
- 要素のcolの合計値が12未満のときに有効
- 横方向に対して、始まる位置を左寄せ、中央、右寄せのどれにするか決める
- betweenやaroundも使える。betweenは余白を均等に配置、aroundは左右に余白をつけ、均等に配置
align-itemsを使用(box14~22)
- 親要素のrowに指定
- それぞれの要素の高さがバラバラなときに有効なため、高さが指定されていないと機能しない
- 縦方向でそれぞれの位置を上揃え、中央、下揃えのどれにするか決める
align-selfを使用(box23~25)
- 子要素のcolに指定
- 親要素と子要素それぞれに高さを指定しているときに有効
- 縦方向で始まる位置を上、中央、下のどれにするか決める
余白をうまく活用する
要素がコンテナの中にいっぱいでないときに、余白を活用して要素の位置を決めることができます。
これも先ほど同様ザッと見ていただけると分かりやすいと思います。
<div class="container my-5 border border-dark"> <div class="row"> <div class="col-6 offset-6" style="height: 80px; background: #f22;">box1</div> </div> <div class="row"> <div class="col-3 ml-auto" style="height: 80px; background: #ff0;">box2</div> <div class="col-3 mr-auto" style="height: 80px; background: #ff9;">box3</div> </div> <div class="row"> <div class="col-3 ml-auto" style="height: 80px; background: #0ff;">box4</div> <div class="col-3" style="height: 80px; background: #9ff;">box5</div> </div> <div class="row"> <div class="col-3" style="height: 80px; background: #0f0;">box6</div> <div class="col-3 ml-auto" style="height: 80px; background: #9f9;">box7</div> </div> <div class="row"> <div class="col-3 ml-auto" style="height: 80px; background: #00f;">box8</div> <div class="col-3 ml-auto" style="height: 80px; background: #09f;">box9</div> </div> <div class="row"> <div class="col-3 mr-auto" style="height: 80px; background: #fa0;">box10</div> <div class="col-3 mr-auto" style="height: 80px; background: #fc9;">box11</div> </div> </div>
offsetを使用(box1)
offsetはcolと同様、1~12の数字で指定します。colと一緒にその要素に対してclass名に用いることで、要素の左側に指定した数字分の余白を持たせることができます。
ml(mr)-autoを使用(box2~11)
ml=margin left、mr=margin rightです。
要素の数に応じて、右や左に余白を自動でつけてくれます。
コードの例のように、左端の要素にml、右端の要素にmrとつければ、rowは中央寄せになります。
左端の要素だけにmlでrowは右寄せに、右端の要素だけにmrでrowは左寄せになりますね。
また、全てにmlやmrをつけることで。均等な余白の付け方もできます。
表示結果がjustify-contentと似ているので記述が少なくて済むこちらは便利そうです。
要素の順序を変えてみる
要素の順番は基本的にはHTMLに記述した順なので、単純にそう書けば良いのですが、レスポンシブなどでサイトデザインが変わるときに順序を変えたいときなんかに有効ですね。
使うのはorderというclass名です。
orderを使用
<div class="container my-5"> <div class="row"> <div class="col-4 order-3" style="height: 80px; background: #f22">box1</div> <div class="col-4 order-2" style="height: 80px; background: #f55">box2</div> <div class="col-4 order-1" style="height: 80px; background: #f99">box3</div> </div> </div>
一番簡単な記述はこんな感じですね。
HTMLにはbox1→2→3の順で書いていますが、表示はbox3→2→1となっています。
普通に使う上ではこのような使用方法は意味がないですが、smやmdなどと一緒に使えるので、実際に使うときはレスポンシブ対応時にorder-md-○といった記述にするでしょうね。
また、orderもcolやoffsetと同じく1~12までの数字を入れることができます。
しかし、実はこれに合わせてfirst、last、0といった指定もできて、優先度は、
first > 0~12 > last という風になります。実質first=-1でlast=13といったところでしょう。
おわりに
今回は要素の自由な配置方法についてまとめました。
整理すると、
- rowの入れ子
- justify-content
- align-items
- align-self
- offset
- ml-auto、mr-auto
- order
以上です。
この辺りとcontainer、row、colの仕組みが分かっていれば、Bootstrapでグリッドレイアウトをそれなりにスムーズに使うことはできると思います！
次回はこれまでの学習を通してトップページのみの簡単な架空静的サイトを作ってみようと思います。
それでは。
