がじゅぺけ日記

ガジュマルを育てられない（枯らしかけた）がじゅぺけがお送りする日記

たった２週間でかっこいいWebページが作れる方法【30DAYSトライアル】

 

f:id:gajux29:20190803231948g:plain



がじゅぺけです。

 

はてなブログやWordPressにはたくさんの無料テンプレートテーマがあり、
充実していますが、企業のホームページとかにある、トップ画がくるくる変わったり、かっこいいWebページとなるとなかなかないですよね。

 

そこで、今回の記事では

 

２週間くらいで簡単にかっこいいWebページ作成をつくる方法

 

をお知らせします。

結論から言えば、30DAYSトライアルに参加してみる、というお話です。

 

 

背景 

とは言ってもなかなかかっこよくする方法を思いつくことは難しいもので、
かくいう自分も

 

「Webページを１から作るなんて知識もないし。。」

 

「何をどうすればよいかわからない。。」

 

なんて考えていました。

 

そんなとき、Twitterで「#トライアル30DAYS」（詳細は後述）というハッシュタグを見つけました：

 

最初は「#今日の積み上げ」のように、30日間継続してチャレンジしよう、みたいな啓蒙活動的なものかと思っていましたが（笑）、そうではなくWebプログラミングの勉強手順として30日間のプログラムを公開しているものでした。

 

これに参加するだけで、冒頭のGIF動画くらいのページは2週間足らずで作れるようになります。

※私もすべてのカリキュラムを終えておらず、ちょうど中間地点の節目でこの記事を書いているところになります。全て終えていなくても冒頭のGIF動画程度のものを作れる認識です

 

やったこと

f:id:gajux29:20190803235734p:plain

大きく大別すると、Webページを書くための基本知識を勉強するところから、Bootstrap（詳細は後述）の使い方、そして応用練習をしていく流れとなります。 

 Progateでhtml/css勉強

f:id:gajux29:20190803144652p:plain

progate_master

Progateはオンラインでできるプログラミングスクール です。

ここで、Webページ基礎になるhtml/cssについて一通りの勉強をしました。

Progateのページ上でコードを書きながら勉強することができ、単純に楽しいです。

私は1週間くらいかかりましたが、ある程度知識のある人だともっと早くできるかも。。

 

f:id:gajux29:20190804224044p:plain

Progate道場コース

道場コースでは、仕様書が渡されて解説無しでページを作っていく必要があります。わかってるつもり、になっている部分が浮き彫りとなり想像以上に多くかなり苦戦しました😅

 

ちなみにProgateは初級までは無料で勉強できますが（たしか）、途中から有料会員限定となります。

 

ドットインストールでBootStrap講座を受講

f:id:gajux29:20190804224333p:plain

ドットインストール

ドットインストールもProgate同様、オンラインでプログラミングを学ぶことのできるWebサービスになります。ただし、こちらは動画ベースの解説がメインになっており、別の所で自分でプログラムを書きながら勉強していくスタイルとなります。

講座は途中まで無料ですが、最後まで学習しようとするとお金がかかります。

 

Bootstrapって？

f:id:gajux29:20190804225341p:plain

Bootstrap



Webページを作るために必要なもの（例えば、一番トップにあるナビゲーションバーや、トップ画がスライドして変わっていくカルーセル、など）が簡単に使えるようパッケージ化されてるもの、と考えてください。

 

Bootstrapを使うことで、本来はJavaScriptの知識などがないと作れない、動的なWebページなんかがかんたんに作ることができます。また、レスポンシブデザインにもBootstrapのフレームワーク内で対応することができます。無料で使えます。

 

レクチャー動画を見ながらBootstrapを使ってLP（ランディングページ）制作

タイトルのままですが、具体的なLPページをBootstrapを使って書いていく練習です。

動画自体はyoutubeで公開されているものを使用するので、実質無料で勉強できます。

 

英語の動画になりますが、雰囲気で何をどうすればいいかわかりますのでご安心ください。コーディングしている部分も動画に映っていますしね。

 

成果物・ポートフォリオ

ポートフォリオ、というのはおこがましいですが、#30DAYSトライアルの中で練習用に作成したページを晒します。

Webサーバにおいてるので、キャプチャではなく本当のページです（別タブで開きます）

ちなみにトップに載せたGIF動画のページもあります。

 

Bootstrap　ドットインストール講座用ページ

f:id:gajux29:20190804230819p:plain

ドットインストール勉強用ページ

https://gajux29.github.io/bootstrap_training/

解説：ドットインストールBootstrap講座の勉強用ページです。

中身はかなりあっさりしていますが、ナビゲーションバーの実装や、表にカーソルを合わせると色が変わったり、タブ表示があったりとBootstrap機能が盛り込まれた物となっています。

レスポンシブデザインにも対応していますので、PC/スマホいずれの表示でも最適なレイアウトで表示がされます。

 

Bootstrap　LPページ練習その１

 

Complete Bootstrap 4 Website Layout

解説：Bootstrapを使ってLP（ランディングページ）を作ってみよう、その１です。

トップ画像が一定周期でくるくる変わるのがなんかそれっぽくて好きです（カルーセル、というらしい）大雑把な構成自体はこの練習用で使用したhtmlファイルを流用できそうです。

Bootstrap　LPページ練習その２

 

Nuno - Responsive Bootstrap Theme

 説明：BootStrapを使ってLP制作してみよう、その2です。

 黒基調のクールなページです。やってることはその１とあんまり変わりがないです。

 

学んだこと

以下は#30DAYSトライアルに参加して学んだことのまとめになります。

今回の本題とは少し関係ない部分もありますが、まとめとして記載します。

すべてのWebページはhtmlでできている

知っている人にとっては当たり前なのかもしれませんが、インターネットで見ることのできるすべてのWebページはhtmlでできているんです。

そのhtmlをどう見せるか決めるのがcss。PCなら１行で、スマホなら２行で、なんていうレスポンシブデザインでに関わる部分もcssで決めます。

 

JavaScriptやphpはその他の要素ですが、いずれにしろhtmlから
呼ばれるものになります。

htmlは喋らない

いや、それは当然でしょ、って言われるかもしれませんが、電化製品や自動車部品などのICに含まれるプログラムはエラーを教えてくれる（しゃべる）んです。詳しく言うと、私が今まで勉強してきたC、C++といったプログラム言語はコンパイル、といって、人間が書いたプログラムを機械が読める形に変換するプロセスを経由します。

このプロセスがあると、なにかプログラムにミスがあるとき、エラーや警告メッセージでコンパイラが教えてくれるんです。

 

一方、htmlは沈黙します。間違ってても何も言いません。ただ何も表示されないため、コードの中の何が間違っているかプログラマ自身が見つける必要があります。

これがすごく大変。。なんかわからないけど、余白設定が効いてない、とかなぜかフォントが大きいままとかそんなのがザラにあります。 

Chromeのディベロッパーツールを使うと、喋らないhtmlちゃんを画面表示からじっくり探ることができるので非常に有用です。部品ごとにカーソルをあわせて、問い合わせながらページ設定や今表示に効いているプロパティについて調べられます。

 

VSCode, Emmet, Bootstrapなどなどを駆使してとにかく効率的にコーディングすることが重要

htmlを直にキーボードを叩きながらコーディングするのは非常に時間がかかります。すでに先駆者たちや企業がフリーで出してるツールをいかに使いこなすかがコーディングの効率を数倍、数十倍にあげます。多分この分野のプロのコーディングを見ると魔法みたいに見えるんじゃなかろうか。。

 

Bootstrapはcssとの組み合わせで使う

ドットインストールの講義ではBootstrap単独でWebページを作成する方法を解説していますが、実際はBootstrap単独でWebページコーディングをすることはないそうな。。かゆいところに手が届かない、ということなんでしょうかね。

 

というか、Bootstrap自体もあんまり使われない、
と言われているとかいないとか。。

 

わからないことはググり、それでもわからなければ先駆者に聞く

Webプログラミング分野には先駆者がたくさんいるので、わからないことがあってもだいたいどなたかが直面している問題だったりします。調べれば大半の問題は解決しますし、わからなければSNSを使って効いてみるのも手だと思います。

 

ちなみに#30DAYSトライアルではSlackがあるため、質問は容易にできると思います。

 

参考：30DAYSトライアル（通称：でいとら）とは？

フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）さんが企画した、Webプログラミングを勉強するためのプログラムになります。私はこのプログラムに参加して勉強をすすめています！

プログラミングの完全初心者でも勉強しやすいように毎日実施できる学習プログラムが組まれています。

これまでに『初心者からコーディングの副業で月5万円を稼ぐためのトライアル』『コーダーとして企業と仕事可能なレベルになるためのトライアル』を実施しましたので、この連載はその60日分のカリキュラムまとめになります。

30DAYSトライアルの特徴

・プログラミング未経験の方でも勉強しやすい「HTML/CSSのコーディング」が題材

・３０日間の集中学習で到達できるゴール設定

・毎日の具体的な学習ロードマップを用意

・実務に役立つ知識とスキルが身につくように構成

・参加無料

 詳しく知りたい方はこちら↓↓

tokyofreelance.jp

 

今回簡単にかっこいいWebページが作れる方法を紹介しましたが、もともと私がこの#30DAYSトライアルに参加した目的は副業としてできることを模索する事にあったので、このまま勉強を続け、まずはクラウドソーシングでも何でもいいので、仕事をこなしていきたいと考えています。

 

がじゅぺけでした。