サイト制作の参考リンク集
本記事は、サイト制作の参考になるサイトや書籍の自分向け備忘録です。読みやすかったものや、参考になったもの、覚えておきたいことをまとめています。
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検索セントラル内をよく探すのが自分に合っています。
また覚えておきたいページリンクや書き忘れていたサイトがあったら追記します。
余談：英語で情報収集する
英語で情報収集する際は、特に「日本語でいいじゃん」という他人を頭の中から追い出しましょう。どうしてもそれができず、学習や作業の妨げになる場合、下記のようなことを考えると割となんとかできます。
- 今日は原文の方がストレス少なく調べものや作業ができるんだよね
- 英文多読できるし、英語表現の勉強になる、一石二鳥だよ
- Phew! There he goes again. Let him say what he want. Don't worry, never mind. Let's get back.