ドットインストールのHTMLとCSSのレッスンを進めてみました。
『HTML/CSSの学習環境を整えよう [Windows編] （全4回）』
こちらは、ブラウザのGoogle ChromeとエディタのATOMのインストールを行います。
プログラムに適したフォント「RictyDiminished」のインストールも行います。
ChromeとATOMはインストール済みだったので30分もかからず終わりました。
『はじめてのHTML（全15回）』
実際にポートフォリオサイトを作成する手順を踏みながら基本を学べます。
1時間ほどで終えることができます。
『はじめてのCSS （全17回）』
HTML入門を終えた状態から開始するので、先にHTML入門を終わらせます。
1時間ほどで終えることができます。
●一通り実践してみて
はじめてのHTMLの第一回の動画で作成するサイトの完成版が確認できます。
シンプルで見栄えが良く、サクサク進むのでモチベーションも保てます。
さくっと2時間ほどでHTMLとCSSの基本が学べたのでとても良い内容と思いました。
UdemyのRuby on Rails入門を進めるにもHTMLやCSSの記述の基本構文を知らないと厳しい印象だったので（例えばHTMLタグ内の class="" で記述するセレクタなど）、先にこちらを一通りやってみるのが良いと思いました。
●次のステップについて
次に『実践！ウェブサイトを作ろう（全16回）』を行いました。
こちらはまた別のウェブサイトを作成しながら、CSSの便利な記述が追加で学べる感じでした。基礎の振り返りにもなって丁度良い感じです。
Font Awesomeのフリーアイコン
https://fontawesome.com/
ウェブサイト内にコードを埋め込んで使用するという提供方法があるんですね。
知らなかったので面白いなと思いました。
Chromeのショートカット
F12 ‥ 開発者ツールの表示ON/OFF
F5 または Ctrl + R ‥ 再読み込み（Ctrl + R が便利）
HTMLやCSSの記述について1つずつ詳しく知りたいような場合は「④ もっと詳しくHTML/CSSを学んでみよう」内のHTMLやCSSのレクチャーに入っていくと良いかと思われます。全部で111個のレッスンにも及ぶため、自分はとりあえずこちらには手は出していないです。
●スマホ向けのウェブサイトについて
スマートフォン向けサイトの作り方については学んでおいた方が良いと思いました。
というのも、自作のウェブアプリを将来的に作成してチェックしたり利用したりする場面は通勤時のようにスマホからが多そうに思ったので。。
という訳で、月額980円のプレミアム会員限定公開のレクチャーになりますが『実践！スマートフォンサイトを作ろう（全22回）』も一通り行いました。
ヘッダに下記のようなタグを入れておくだけでそれらしくなるようです。
あとは画像サイズなどをピクセルではなく％で指定したりする感じでしょうか。
<meta name="viewport" content="width=device-width,initial-scale=1">
それから、開発者ツールを表示して左上に表示されるiPhone＆iPadのようなアイコンをクリックすると、デバイスに応じたプレビューが行えるんですね。めちゃ便利！
他にこのレクチャーで行う要素としては、PC上で閲覧した際なんかにブラウザの幅に合わせてレイアウトを変える対応、Youtube動画の埋め込み時にレイアウトが崩れないようにする対応、ページトップにメニューアイコンを配置してJavaScriptを使ってメニューが開閉するように見せる対応などがあり、JavaScriptに初めて触れるのにも良い導入となっています。
JavaScriptもまたドットインストールで沢山のレクチャーが用意されています。
●Firebaseで公開
こちらもプレミアム会員限定公開のレクチャーになりますが『Firebaseでウェブサイトを公開してみよう（全9回）』を行えば、Firebaseの無料プラン（ウェブ公開のための容量1GB・転送10GB/月まで）で作成したウェブサイトのファイル一式をターミナル（Windowsの場合はPowerShellなど）からアップできます。
Googleが母体だそうで、Googleアカウントでそのままログインできるのが便利。
あと環境構築時にNode.jsもインストール（何に利用されているのか理解しておらず）。
アップしてみたサイトはこちら。
ちなみにHTMLのようなマークアップ言語はタグで囲む必要があったりと入力が面倒で好きになれない言語だったのですが、インテリセンス（文字入力補間）でこんなに楽になるんですね。。
ドットインストールに会員登録して7日間で134のレッスンが完了。
全レッスンの1/3なので、休暇が3週間あれば一気に全て終わらせられそう。。
Railsも軽くやりましたが、じゃあRailsとPHPのどちらが良いかというと、PHPも触ってみないことには分からないので本当は両方とも触ってみたいんですよね。でも時間も有限‥
という訳で、次はRailsに戻りますかね。
引き続き学習していきたいと思います。
●参考サイト
●HTML 公式ドキュメント
