30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY16 BootstrapでビジネスLP(2つ目)を作る続き

 

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY16を進めていきました。今回の内容は、前回の続きです。前回までで作成したHTMLをCSSを用いてスタイルを当て、完成させます。

 

->詳細はコチラ


今回やること

・動画を最後まで見て、仕上げる!

・できれば、最初は自分でCSSを当てる!

 

今回のポイント

今回は、自分でCSSを当てたか、当てていないかで全く難易度が異なります。

僕も少しだけ自分で当ててみましたが、なかなかに酷い有様でした。色やフォントサイズが詳しくわからなかったという点を考慮してもとても時間がかかってしまいました。もう少しできるようになりたいです。。。

コーディングを早くするには

コーディングを早くするには、どうするのがいいのでしょうか。僕自身、遅いので考えてみました。結論としては、自分の思い通りにCSSを当てられるようになること(一発で当てる必要はない)、という当たり前な結論に至ります。

どうして早くコーディングできないかを考えたことはありますか?

人によってこの問題のボトルネックは全く異なります。例えば、タイピングが遅い、Bootstrapの使い方がわかっていない、どういう順にHTMLやCSSを書いていっていいのかわからない、デザインを再現するCSSをイメージできていない、など様々な理由があります。

人によって解決策は異なります。デザイン通りにCSSを当てられるけど、タイピングが遅い人がどれだけ、CSSの書き方を勉強しても早くなりません。そういう人は、タイピングのスピードをあげたり、Emmetなどを覚えることがコーディングを早くするための解決策です。

反対に、どれだけタイピングが早く、Emmetを使いこなしていても、CSSをデザインイメージ通りに当てることが全くできない人は、コーディングの高速化はおろか、完成させることもできません。そんな人が、さらにタイピングを早くしても、コーディングでは手が止まってしまいますよね。

自分のボトルネックがどこにあるのか、今のうちに知っておき、それを克服していきましょう!

 

CSSをデザインイメージ通りにできない人へ

僕自身、速さは遅いのであまりアドバイスにはなりません。しかし、以前はもっと遅かったので、現在に到るまでにどうやって早くCSSを当てられるようになったかを書いていきます。

ポイントは二点です。

・とにかく書いたこと

・常日頃どうやってスタイルを当てれば、WEBサイトが出来上がるかを考えたこと

です。

前者は言葉の通り、とにかくコーディングをしました。

ブロック要素とインライン要素の違い、padding, border, marginの関係性、など基本的なことを考えながら、模写や本、動画をみてのコーディングを行いました。

二つ目についてですが、好きなWEBサイトをみて、そのWEBデザインがどのように作られているのかを考えました。かっこいい!、かわいい!っていうWEBサイトってあると思います。そのWEBサイトを自分で1から作るならどうやって作っていくか考えてみてください。

もちろん、HTML、CSS以外に動きをつけるためJavaScriptなどを使っていたりします。そんな時は、動きはなしで考えてみてください。「自分ならこうやって作れるな」って思えるようなら、素晴らしいです!余裕があれば、実際にその自分のイメージを形にするのもいいと思います。

この二つ目の方法のいいところはなんといってもズボラでもできることです。必要なのは、WEBサイトと自分の頭だけです。手を動かす必要がないのです!(手を使ってやった方が効果は何倍にもましますが、ズボラにはまさりません!!)

まとめ

今回はで二つ目のLPが完成しました。今回のLPのコードも商用利用可能ですので、画像を張り替えれば、自分の作品の仲間入りです!!

それではまた次回!