Getting started with the web

web 開発の学習ログ

ウェブ入門 - ウェブ開発を学ぶ | MDN を読んで印象に残ったことなどの記録を残す記事です。

Table of contents

僕の開発環境

今回の学習を進めるにあたって以下の開発環境を使いました。

• Editor
  • Visual Studio Code
• vscode 拡張機能
  • Live Server
    • index.htmlをこれを使って開いておけばプレビューがかなり楽でした

ウェブ入門をチュートリアル的に読み進めるには十分な環境です！

以降はトピック「Web サイトをどんな外見にするか」から見ていきます。

Web サイトをどんな外見にするか

まず最初: 計画を立てる

最初に以下の質問に解答しながら自分の作る Web サイトについて計画を立てます

1. 何について書かれた Web サイトですか？ 犬、ニューヨーク、それともパックマン？
2. テーマについてどんなことを書きますか？ タイトルと少しの文章、それからページに表示させたい画像を考えます。
3. Web サイトをどんな見た目にしますか？ シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？

mdn web docs より引用

デザインを大まかに描き出す

• 自分のサイトのデザインを大まかに紙やホワイトボードに描き出す
  • 大きな Web ページを作るときにも役立つので習慣つけておく
    • プログラムのデザインを考えるときにも言えるかも

アセットを選ぶ

• 文章、テキスト

• テーマカラー

  • Trending Color Palettes - Coolors
    • 個人的におすすめのサイトです、色んな配色パターンを見つけることができます
  • 色選択ツール - CSS: カスケーディングスタイルシート | MDN

• 画像

• フォント

  • Browse Fonts - Google Fonts

ファイルの扱い

Web サイトのファイル構造などについて

ファウイル名について

以下を避ける

• 空白
• 大文字

ハイフン or アンダースコア

• ファイル名などはハイフンを使うべき
  • Google の検索エンジンはハイフンを単語の区切りとして扱うが、アンダースコアはそうしないから

Web サイトのファイル構造

以下のようなサイト構造が MDN では勧められていました。

• index.html
  • ユーザーがサイトに訪れたときに最初に見る内容がこのファイルです
• images
  • サイトで使用する全ての画像を入れます
• styles
  • コンテンツのスタイルを決定する CSS コードを入れます
• scripts
  • サイトにインタラクティブ機能を追加するために使用されるすべての JavaScript コードを入れます

your-site
├── images
│   ├── firefox-icon.png
│   └── zztkm-icon.png
├── index.html
├── scripts
│   └── main.js
└── styles
    └── style.css

ウェブのしくみ

コンポーネントファイルが解析される順番

• まず HTML ファイルが解析され、そのファイルの中を見ることで、どの CSS ファイルや JavaScript ファイルが参照されているかをサーバーが認識します。
• HTML が解析され、 DOM ツリー構造が生成された後、リンクされた CSS が解析され、 DOM ツリーの適切な部分にスタイルが適用されます。この時点で、ページの視覚的な表現が画面に描かれ、ユーザーはページを見ることになります。
• JavaScript は通常、 HTML と CSS の後に解析され、ページに適用されます。

ウェブのしくみ - ウェブ開発を学ぶ | MDNより

まとめ

とりあえずチュートリアル的に読み進めてみて以下のようなアウトプットが出来上がりました。 次は HTML に入門しようかなと思います！

https://tsurutatakumi.info/