Language

  • 日本語
  • English
  • 简体中文
  • 繁體中文
  • 한국어

Translated by machine

f. Phantoms 2022年05月25日 22:52

サイト制作記録#1 - サイト制作を学び直す

これまでのあらすじ

サーバー移転を機にサイトデザイン刷新を決めた筆者。
しかし、ググってかき集めたサイト作りの知識はもう大分色褪せていた。
これまで〉のように、今度も手探りでやっていくのか?
いや、一から学び直そう!

この記事の概要

  • 目的:サイト制作の備忘録
  • 内容:読みやすかった記事や参考になった記事、覚えておきたいことなど
  • 対象:ぼく(または英語が読める人)
    ※英語を全く読みたくない人は〈こちら〉を読んでもいいし読まなくてもいいです。ご自由に。

1:言語設定を英語にする

基本的に英語で情報収集するため、下記の状態にします。

  • ブラウザの言語設定をPC版・スマートフォン版共に英語にする。
  • ツールの言語設定を英語にする。日本製ツールは日本語のままで良い。
  • サイトが日本語に訳されていた場合、英語のページに戻す。
  • 「日本語でいいじゃん」と言う他人を頭の中から追い出す。

ブラウザの言語設定

Firefox を別の言語に切り替える

ツールの言語設定

環境設定を確認。

Inkscapeの場合

環境設定→インターフェイス→言語からEnglishを選んで再起動。

Yeah!

Let's go back to tutorials. They sound easier now.

日本語でおk派の空想の他人を追い出す方法

頭の中に「なんで日本語にしないの」「日本語でいいじゃん」と言ってくる想像上の他人がいて、学習や作業の妨げになる場合、下記のようなことを考えると割となんとかできます。

  • 英語の方がストレス少なく調べものや作業ができるんだよね
  • 英文多読できるし、英語表現の勉強になる、一石二鳥だよ
  • Phew! There he goes again. Let him say what he want. Don't worry, never mind. Let's get back.

2: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

ウェブページの表示に関する、より専門的な記事。MDN曰く一読すべきとのこと。

3:チュートリアルを進める

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

全般

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検索セントラル内をよく探すのが、ぼくには合っています。

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

次回

お見せできる画面ができてきた頃に更新できたらいいな。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート

この記事にはコメントできません。

最新の記事

月別アーカイブ

記事を検索