Ryo's Blog

沖縄でITエンジニアやってます。

プログラミング教室@CODEBASE 講座3〜4日目

はじめに

先日からCODEBASE主催のプログラミング教室を受講させてもらってます。
今回は講座の3〜4日目の内容について書いて行きます。

講座1〜2日目の内容はこちら

rnakamine.hatenablog.com

HTML, CSS(プログラミング講座3日目)

  • HTMLとは
  • CSSとは
  • HTMLとCSSの関係性
  • Google Chrome 開発ツールの使い方
  • HTML, CSSデザインのトレンド

90年代のWebサイトから現在までのフロント側の技術の流れを見て行きました。

liginc.co.jp

miz2403.com

appleとかgoogleの昔のwebサイトを見ているととても歴史が感じられます。 HTMLの組み方も今と全然違くて、そこをChromeの開発ツールで見ていくのが面白かったです。 divではなくて tableiframe タグを駆使して組んでるのが印象的でした。

こちらで、ウェブの技術やブラウザの技術の歴史の流れを見ることができて面白いですよ。

www.evolutionoftheweb.com

また、HTML5やCSS3のブラウザでのサポート情報が見れる Can I use は是非活用すべき! 私自身も前々職あたりで使用した経験があります。当時はIE6(だったかな?)ぐらいのとても古いブラウザにとても苦しめられてた記憶が。。。

  • MDN

コード書いているなかで、何かつまずいたりしたら、まずはドキュメントを見る癖をつけなきゃなと感じました。 そのなかでも、Mozilaが運営しているMDNのドキュメントはかなりおすすめ。 何か調べ物をする時だけではなく、ざっと目を通すだけでも勉強になります。

  • HTMLの最近の書き方の傾向
    • レイアウト
    • bootstrapとjQueryの功績

jQueryJavascriptのライブラリの一つで、昔のブラウザ毎の仕様がバラバラな時代、その差分を吸収してくれ、DOMの操作も手軽にでき、人気だったのですが、今はブラウザの技術も上がり、本質的な役割は終わったので、積極的にjQueryを使っていく必要がなくなったのかな。 生のJSでもいろんなことができるようですが、まだまだjQueryが使われているところが多いみたいなので、今から勉強するのも全然需要あるのではと思います。

BootstrapはCSSフレームワークTwitter社が提供しています。 Gridシステムを使い、簡単にイケてる感じのデザインのページを作ることができます。

qiita.com

クラスを追加するだけで簡単にボタンが出来たり、レスポンシブ対応させたり、タブを作れたりと かなり便利で慣れれば使いやすそうな印象。テンプレートも豊富で、デザインにあまりお金や時間をかけたくなければぜひ使った方がいいと思います。

Bootstrap(プログラミング講座4日目)

  • Bootstrapとは

先程も出てきましたが、引用させて頂くと、

Twitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。

現在はBootstrap4がリリースされています。

主な変更点は

  1. 使用しているCSSプリプロセッサーがSassに変更された
  2. 基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更された
  3. グリッドシステムがflexbox対応になり基準のサイズ名が変更になった
  4. Panelsが廃止され、Cardsが追加された
  5. 汎用クラスが追加された
  6. 各種記述法が変更された

となっています。

参照: Bootstrap4の変更点についてまとめてみた | will STYLE Inc.|神戸にあるウェブ制作会社

テンプレート自体も豊富で、無料で提供しているものから有料なものまであり、 デザイン力がなくてもいい感じのページが作れたりします。 海外製のテンプレートが豊富とのこと。

  • Bootstrapの書き方
  • 実際にBootstrapのテンプレートを使ってサイトを作ってみよう

この日は実際に公式サイトからテンプレートを探してきて、Bootstrapの読み込みから各自行い、 簡単なWebサイトを作成する時間が設けられました。

テンプレートの枠にはめて編集していくのが逆に難しくて、いい感じの仕上がりにはならなかったですが、公式ドキュメントを見ながらCarousel Slider(カルーセルスライダー)などを実装して動かすことができたので良かったです。

受講生でも何名かいい感じのWebページを仕上げていたので、素晴らしかったです!

この一週間でやってきたこと(自主学習)

prog-8.com

  • ドットインストール Bootstrap

Bootstrap 4入門 (全22回) - プログラミングならドットインストール

  • 楽しいRuby(15章まで)

たのしいRuby 第5版

たのしいRuby 第5版


最後に

プログラミングスクールも2周目に入り、そろそろ受講生の顔と名前も覚えてきて、 学生と授業を受けるのが専門学校以来なので、楽しいです! 自主学習時間もいい感じに確保できているので、あとはしっかりスキルをつけていきたいと思います。