Veltioblog

Getting started with the web

web 開発の学習ログ


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

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

ウェブのしくみ

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

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

まとめ

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

tsurutatakumi.info

https://tsurutatakumi.info/