HTML,CSS,JSはウェブサイトの基本

Index

初めての方へ

(ビギナー用セクション・プロジェクトマネージャー、ディレクター向け)
  1. はじめに
  2. ビギナー向け・ドキュメント
  3. 会話集

より深く追求される方へ

(開発者・フルスタックエンジニア向け)
  1. その他
  2. リンク
  3. テスト・デバッグ・ツール
  4. 未整理

1 はじめに

Webサイトを最終的に構成するのはHTML,CSS,JSこれら3つのファイルです。
いくらPHPなどが背後で動いてたとしてもサーバーによって解釈されユーザーのブラウザに届けられる形式はHTML,CSS,JSの3つとなります。

  • HTML
  • CSS
  • JS

2 ビギナー向け・ドキュメント

  • web に関する全て(フロント技術&HTTP)を知りたい場合
    MDN web docs

    初学習には重厚すぎる内容ですが、確実で性格にフロントエンドやWebまわりのナレッジを習得する事ができるでしょう。

3 会話集

  • HTML4でいきますか? HTML5で行きますか?
  • SASSを使った方がCSSの管理が楽だよね。
  • javascript初心者でもjQueryを使えば便利なライブラリがたくさんあるから、できる事が広がるよね。

4 その他

4-1 トランスパイラという考え方

cssをセレクタを一つづつ書いていくのは大変なのでsass記法などを利用する場合が多い。
またjavascriptに関してもES6など、より便利にプログラミングできる記法でプログラムを作成し変換するという利用法が一般的になっている。

4-2 フレームワーク

ライブラリの集合と言えるのがフレームワークという考え方。
多くのフレームワークには、それぞれの設計思想があり、CSSではBootstrapやFoundationのようなノンデザイナーで、CSSを一つも書く事なくHTMLだけで、特定のデザインを実現させてしまう物もある。
また、javascriptに関してはReactやAngular、Vue.jsなどウェブサイトや、大規模なSPAアプリケーションを制作するのに向いているフレームワークも多い。


5 リンク

5-1 CSS フレームワーク

5-2 Javascript フレームワーク


6 テスト・デバッグ・ツール

CSS,JSともにデバッグの定義は幅広いが、共通して言える事はブラウザによる実装の違いをしっかりと把握する必要があるという事だ。

6-1 CSS

  • chromeやFirefoxをはじめとした開発者ツールを使う事で、レイアウトの崩れなどをデバッグする事ができる。

  • その他、LINT系の静的解析ツール

6-2 JS

  • テストツール: mocha

  • ブラウザ開発者ツール : chrome BlackBox Script等


7 未整理

ポストES6

開発ツール&サーバーサイドJS