読者です 読者をやめる 読者になる 読者になる

webTeckSekitoba

異業種からweb業界に転職したsekitobaです。このwebTeckSekitobaではweb業界未経験もしくは初心者の方向けに記事を書いていきたいと思っています。

webサイト制作を英語で学べるwebサービスまとめ

まとめ

最近、英語の勉強が全く進んでいない。sekitobaです。

今日は、webサイト制作を英語で学べるwebサービスをまとめてみたいと思います。

最近はGoogle先生の翻訳機能も格段に進化していますのでwebの勉強をしながら、ついでに英語も勉強していきましょう。

※紹介する順番に意味はありません。

1.freecodecamp様

www.freecodecamp.com

freecodecamp様はオープンソースベースのプログラミング学習サービスです。

学習できる内容も非常に豊富です。

freecodecampではカリキュラムの作成に世界中の多くの方が関わっているので更新頻度も高いです。

高度な内容の授業もありますが、HTML5やCSS3などもあります。

また、日本にコミュニティもあります。

https://www.facebook.com/free.code.camp.tokyo/

2.udemy様

www.udemy.com

udemy様自体はだれでも自分の講座をインターネット上に公開できるプラットフォームです。

web系に限らずいろいろな講座を世界中の人が公開しています。

web系に関してはHTMLの入門系の講座から高度なプログラミング系の講座まで非常に充実している印象があります。
※日本語の講座をかなり増えてきているイメージがあります

講座自体は映像を見ながらを進めていくのですが、1本あたり5分から15分ぐらいですのでさくさく進めていけると思います。

私も結構利用させてもらっていますが、各講座の評価は結構気にして見てます。

3.codecademy様

www.codecademy.com

codecademy様ではwebサイト制作からプログラミングまで様々なコースを学ぶ事ができます。

講座を進めるにあたっては全て英語ですが、個人的には非常にわかりやすかったです。

HTML/CSSの入門講座や、実践編としてwebサイト制作の講座などもあり入門としても充実した内容です。

他にも、学べるwebサービスはまだまだあるのでそのうちまとめたいと思います。

日本語で学びたい方はこちら

y-sekitoba.hatenablog.com

「SASSファーストガイド-CSSをワンランク上の記法で作成!」

書籍関係

Sassファーストガイド―CSSをワンランク上の記法で作成!

こんにちは。sekitobaです。

今日は、「SASSファーストガイド-CSSをワンランク上の記法で作成!」という書籍ついてです。

Sassファーストガイド―CSSをワンランク上の記法で作成!

Sassファーストガイド―CSSをワンランク上の記法で作成!

この本は、2015年に発行された書籍です。

書籍に関して

SASSに関しての説明はもちろんですが、 SASSを試すために必要な環境構築に関しても詳しく説明が書かれています。

書籍の中では、「SassMeister」「Prepros」「Scout」の3つが紹介されています。
※「Prepros」、「Scout」のインストールはWindowsベースで説明されています

また、エディタの説明として「Atom」についても少し紹介されています。
※パッケージのインストールや管理方法などについて説明が書かれています

もちろん、SASSの説明に関してもしっかり書かれています。

おすすめのポイント

書籍のタイトルは「SASS〜」と書かれていますが、 書籍の中では「SCSS形式」に関して説明が書かれています。

実はSASSには「SASS形式」と「SCSS形式」の2つがあります。

個人的には「SCSS形式」を使用している人の方が多い印象があるので、 「SCSS形式」に関して学べる事はオススメポイントです。

書籍の中に「SASS形式」と「SCSS形式」の違いについての説明もかかれています

また、書籍の最後に「Compass」に関してもかんたんに説明が書かれています。

Compass」に興味がある方は一度、目を通してみるといいかもしれません。

ちなみに、私は本自体をリファレンスみたいに使ってました。

正直、SASSの機能ってたくさありますが全てを使用しているわけではないので。

対象者レベル

  • 業務でSASSを使用しないといけない方
  • SASSに興味があって試してみたい方
  • 素のCSSを書くのに疲れた方

制作環境

Mac / Windowsともに対応

※本は人によって好みが分かれるので、一度書店などで手にとってご覧いただくことをオススメします。

「Bootstrap ファーストガイド-CSS設計の手間を大幅に削減!」

書籍関係

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

年末年始で新しい事を勉強しようと思っています。sekitobaです。

今日は、「Bootstrap ファーストガイド-CSS設計の手間を大幅に削減!」という書籍ついてです。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

この本は、2014年に発行された書籍です。

書籍に関して

全ページ白黒ですが、サンプルファイルを使用しながら1歩づつ進めていけます。

BootstrapはCSSフレームワークと呼ばれるものの1つです。

Bootstrapには特有の考え方がありますが最初に丁寧に説明が書かれていますので、 つまづかずに読み進めていけるのではないかと思います。

書籍の最後には「簡易リファレンス」が付いているので、 一通り試した後であれば「簡易リファレンス」を利用しながらBootstrapを使用してサイトを作っていけると思います。

おすすめのポイント

Bootstrapを利用するとブラウザごとの仕様の違いや、 レスポンシブwebデザインなどの制作の手間を大きく減らせる可能性があります。

業務で使用した事がない方や、HTML/CSSは一通り覚えたと言う方にはぜひ挑戦してみてほしいです。

この書籍を読もうと思っている方はすでにHTML/CSSの経験はあると思います。
なんとなく目を通すだけにするのだけでなく、ぜひ手を動かしながら実践してみてください。

対象者レベル

  • HTML/CSSでwebサイトを制作した事ある方
  • 素のHTML/CSSを使用してwebサイト制作をしている方
  • Bootstrapを使用した事がないコーダー、オペレーターの方

制作環境

Mac / Windowsともに対応

※本は人によって好みが分かれるので、一度書店などで手にとってご覧いただくことをオススメします。

「HTML5 / CSS3モダンコーディング」

書籍関係

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

最近は、常に年末は何をしようか常に考えてます。sekitobaです。

今日は、「HTML5 / CSS3モダンコーディング」という書籍ついてです。

この本は、2015年に発行された書籍です。

書籍に関して

昨年出版された書籍ですが、個人的にめちゃくちゃお世話になりました

中身は大きく3つのPARTに分かれていて、それぞれ雰囲気の違うwebサイトを制作します。

  • 1つ目はスタンダードレイアウトのサイト(メディア系でありそうなデザインです)
  • 2つ目はグリッドレイアウトのサイト(Pinterest風デザインっていわれることもあります)
  • 3つ目はシングルページレイアウトのサイト(webサイトを1ページで完結させるデザインです)

1つの書籍で3つもサイトが作れると言うだけでもすごいのですが、 それぞれのPARTの中に実際に業務レベルで使える小技なども説明されています。
※個人的にこの小技はものすごく勉強になりました

HTML/CSSの入門系の書籍などを利用して、 webサイトを作った事がある人であれば無理なく読み進めていけると思います。
※個人的には初めてHTML/CSSやりますって方には少しハードルが高いと思います。

おすすめのポイント

著書がデザインにもこだわって作ってくださった結果、作成していくサイトの完成度が非常に高い事です。

私が読んだ事がHTML/CSS系の本の中ではサンプルサイトの完成度No1だと思います。

せっかく質の高いサンプルサイトがあるのですから、 書籍を参考に1度作って終わりにするのではなく何周かすることをおすすめします。

同じものでも何度も制作する事で自分の知識・スキルが定着、向上につながります。
※私の場合は3周はしました

対象者レベル

  • 本などを参考にとりあえずHTML/CSSでサイトを制作した事ある方
  • コーダーとして業務に就いたばかりの方
  • 就職活動用にかっこいいポートフォリを作成したい方

制作環境

Mac / Windowsともに対応

※本は人によって好みが分かれるので、一度書店などで手にとってご覧いただくことをオススメします。

「CSS3逆引きデザインレシピ すぐにおいしいデザインサンプル×テクニック集」

書籍関係

CSS3逆引きデザインレシピ

もうすぐ今年も終わってしまいますね。sekitobaです。

今日は、「CSS3逆引きデザインレシピ すぐにおいしいデザインサンプル×テクニック集」という書籍ついてです。

CSS3逆引きデザインレシピ

CSS3逆引きデザインレシピ

この本は、2013年に発行された書籍です。

書籍に関して

今から3年前に出版された書籍ですが、完全にCSSに特化して説明が書かれています。

書籍自体は大きく5つの章に分かれて構成されています。

第1章 CSS3時代のワークフロー
第2章 デザインサンプル UIパーツ編
第3章 デザインサンプル 文字・背景・イメージ編
第4章 デザインサンプル インタラクション編
第5章 効率化

CSSの経験が浅い方などは2、3、4章のデザインサンプルは必見だと思います。 実際に使用機会がありそうなものがサンプルとして掲載されています。

デザインサンプルの知識を押さえておけば応用もしやすくなるはずです。

また、1章ではCSS3の基本が丁寧に説明されています。
特に、CSS3で新しく追加されたセレクタなどは忘れ易いので非常に役に立つはずです。

おすすめのポイント

個人的におすすめな点としては「5章 効率化」の部分です。

CSSプリプロセッサやサイト高速化、パフォーマンス調査の方法などが紹介されています。

この部分に関しては書籍が古いので現在の流行りと異なっている部分がありますが、 web業界で活躍していくために必須の知識ですので目を通しておいて損はないでしょう。

HTML/CSSの知識に自信がない方はこの辺は一度飛ばしてしまっても大丈夫です。
まずは「HTML/CSS」を確実にするのが大切です。

対象者レベル

  • 本などを参考にとりあえずHTML/CSSでサイトを制作した事ある方
  • コーダーとして業務に就いたばかりの方
  • 就職活動用にかっこいいポートフォリを作成したい方

制作環境

Mac / Windowsともに対応

※本は人によって好みが分かれるので、一度書店などで手にとってご覧いただくことをオススメします。