Skip to content
🤨

Getting started with the web

Posted on:August 21, 2022 at 12:00 AM

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

Table of contents

Open Table of contents

僕の開発環境

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

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

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

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

まず最初: 計画を立てる

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

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

mdn web docs より引用

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

アセットを選ぶ

ファイルの扱い

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

ファウイル名について

以下を避ける

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

Web サイトのファイル構造

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

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 に入門しようかなと思います!

tsurutatakumi.info

https://tsurutatakumi.info/