サイト制作の参考リンク集

2023/08/11

本記事は、サイト制作の参考になるサイトや書籍の自分向け備忘録です。読みやすかったものや、参考になったもの、覚えておきたいことをまとめています。

Webについて知る

まずWEBの歴史と仕組みを軽く頭に入れます。

歴史

What is the world wide web?

ワールド・ワイド・ウェブとはどんなものか、またその歴史について、簡潔にまとめられている。

The birth of the Web

世界初のウェブサイトに関するCERN公式の記事。

The first website世界初のウェブサイト。

Evolution of HTTP

ウェブページの歴史に関するより専門的な内容の記事。

Find out where responsive design came from

WEBデザインの変遷。とてもわかりやすい。

A brief history of CSS until 2016

W3Cの読みもの。暇なとき向け。

JavaScript history

インターネットの歴史を踏まえた、JavaScriptの歴史に関する読みもの。他の内容を補完できる。

JavaScript History

JavaScriptの年表。

JavaScript history & Why it matters

JavaScript関連の歴史をまとめたブログ記事。タイムライン図がわかりやすい。

仕組み

How does the Internet work?

インターネットとはどんなものか、図で説明されていてわかりやすい。

How the web works

ウェブページが表示されるときどんなことが起こっているのか、用語の意味と共に簡単にまとめられている。

How Browsers Work: Behind the scenes of modern web browsers

ウェブページの表示に関する、より専門的な記事。

チュートリアルを進める

\ サイト制作が無料で学べる！ /

全般

Getting started with the web

サイト制作の概観。"Mozilla is cool."

Developer guides

HTML、CSS、JavaScript、Media、APIs、Performance、Mobile web development、Fonts、User interface developmentに関するリンクの一覧。

Tutorials

HTML、CSS、JavaScriptに関するチュートリアルの一覧。

Front-end web developer

サイト制作をより詳しく学ぶ記事の一覧。

HTML

HTML for Beginners – Includes Tags for HTML5

シンプルなWebページ作成のチュートリアル。「HTMLとは？」の最もわかりやすい説明がされていた記事。

Getting started with HTML

もっと実践的なウェブページ作成の方法。「ご飯が熱い」

CSS

Lean CSS

CSSでできることがまとめられている。確認問題付き。Podcastもあるから聴いて復習しよう。

Learn Responsive Design

レスポンシブデザインについて学ぶシリーズ。確認問題付き。非常に参考になる。

JavaScript

Learn Javascript

ざっくり。かなり見やすい。

What is JavaScript?

ぎっしり。JavaScript入門。

Learn Programming

JavaScriptの実践練習ができるサイト。丁寧。

HTTP

HTTP

HTTPに関するMDNの記事の一覧。

SEO

Search Engine Optimization (SEO) Starter Guide

サイトの玄関や通路を整備するのに必要なことはGoogle検索セントラルが教えてくれる。

勝手に日本語ページを表示してくるので注意。

書き方

Writing style guide

適切な表記や構文で書くためのヒント。英文向け。

『リーダブルコード』

リンク先は英語版書籍。

Markup Validation Service

HTMLがうまいこと書けているか検証してくれるツール。

CSS Validation Service

CSSがうまいこと書けているか検証してくれるツール。

あとがき

忘れた部分や細かいことは上記のサイト内を検索したりリンク先を辿ったりすると良いでしょう。特に MDN Web Docs と Google検索セントラル内をよく探すのが自分に合っています。

また覚えておきたいページリンクや書き忘れていたサイトがあったら追記します。

余談：英語で情報収集する

英語で情報収集する際は、特に「日本語でいいじゃん」という他人を頭の中から追い出しましょう。どうしてもそれができず、学習や作業の妨げになる場合、下記のようなことを考えると割となんとかできます。