10日目:ドットインストールで勉強中(実践!ウェブサイトを作ろう勉強中)

SNSやってます。

マラソン大会に応募していたのに寝坊して結局行きませんでした。という事で朝からドットインストールでプログラムの勉強をしました。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

昨日Atomの勉強を終えたので再度HTMLとCSSの勉強です。早くJavascriptを始めたいのですが、もう少しの辛抱です。

本日の学習結果

実践!ウェブサイトを作ろう (全17回)の勉強を始めました。

  • #01 ウェブサイトを制作していこう
  • #02 normalize.cssとfaviconを導入しよう
  • #03 styles.cssを作っていこう
  • #04 ヘッダーのマークアップをしていこう
  • #05 ヘッダーの背景を設定してみよう
  • #06 ヘッダーのスタイルを整えよう
  • #07 FontAwesomeを導入しよう
  • #08 トップ画像を配置しよう
  • #09 sectionのマークアップをしよう
  • #10 sectionのスタイルを整えよう

今日は10つの動画を終了しました。これまで勉強してきた事の総まとめとしてDotinstall Paneを紹介するというワンカラムのウェブサイトを作ります。

動画内で使用する動画ファイルはプレミアム会員でないとダウンロードできないというものですが、まだプレミアム会員になる必要はないと思うので適当に以前撮った料理の画像を使いましたが、全く問題なかったです。

お金に余裕のある人はプレミアム会員になって、素材もダウンロードするとよりレッスンを進めやすいかと思います。

わざわざファビコンを作成する必要もありません。

ただ、ファビコンの作成も勉強にはなるので自分で作ってみるのも無駄ではないと思います。

私は「Medibang Paint」という無料のペイントソフトで適当に絵を描いて、「様々なファビコンを一括生成。favicon generator」というサイトでファビコンにしました。

無料のイラスト・マンガ制作ツールメディバンペイント(MediBang Paint)のオフィシャルサイトです。メディバンペイント(MediBang Paint)の機能や使い方を紹介しています。
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計...

感想

今日から、Atom入門の最後の動画で紹介してあった「Dotinstall Pane」を使い始めました。

ショートカットでドットインストールの動画を、5秒戻る、5秒進む、一時停止、再生、を操作できるのは思った以上に便利で作業効率が上がりました。

ついで「Atom HTML PreviewというHTMLやCSSの変更をすぐに確認できるというパッケージも導入しました。コードをセーブするだけでコードを書き換えた結果が見れるのでこれまた便利でした。わざわざブラウザの上にマウスカーソルを移動する必要もなくアトムでコードを書きながら「Ctrl + S」を押すだけでプレビューが見れます。

この2つのパッケージ、「Dotinstall Pane」と「Atom HTML Preview」の同時表示は画面切り替えの必要がないのでかなり快適でした。

左にDotinstall Pane、真ん中にHTMLとCSS、右にHTML Previewを表示した画面

↑ 左にDotinstall Pane、真ん中にHTMLとCSS、右にHTML Preview。

ただ、HTMLを書き換えている途中はなぜか右側の「HTML Preview」の画面がチカチカしていたのが気になりましたが。

また、私の場合は24インチのそれなりに大きなディスプレイを全画面表示して勉強している事が多いのでパッケージ2つを表示しましたが、ノートPCの画面ではちょっと狭すぎるのでDotinstall PaneかAtom HTML Previewどちらかだけの機動にした方が良いでしょう。

どちらも入れておいて損はないと思います。邪魔ならどちらかを非表示にしておけばいいだけですので。

では、明日も「引き続き実践!ウェブサイトを作ろう (全17回)」を進めたいと思います。