勉強からは学べなかったHP制作に必要だったこと

こんにちは、レッドインパルスのアルバイターの秦(はた)です。

この記事では前回の続きを書いていきます。まだ読んでいない人はこちらからどうぞ。さて、今回はプログラミング初心者が初めてのHP制作で実際に学んだ技術的な知識や考え方などについて書いていきます。

 

この記事についての思い

前回から今回にかけて僕がなぜHP制作についての記事を書こうと思ったかと言うと、独学でプログラミングを勉強していていざ実践に移った際に同じ苦労を他の人にしてほしくないからです。先に苦労をして要点を知っている人が後から苦労をしそうな人に、要点をまとめて教えてあげた方が断然生産性がいいです。また、自分自身の経験したことをまとめアウトプットすることによって今回の失敗などを次に生かせると感じたからです。

今回の記事では前回に引き続きインカレのHP制作を通して学んだ事の技術的な面が初心者なりに書いてあります。基礎レベルではありますが参考になればなと思います。今回の具体的内容は以下の通りです。

  • float を使いたくない人向けのツール
  • レスポンシブデザインを考えている人に向けて
  • 分からないことがあった時にどうすべきか
  • font-family にやられた話
  • まとめ

 

float よりも Flexbox

float って難しくない?

HTML,CSSを学び始めて最初に学ぶ配置変更の方法は float だと思います。僕もそうでした。しかし、float って要素が浮いてしまうのでいちいち解除してあげる必要が出てきて、更にどこにそれを書けばいいのか分からなくて難しいですよね?僕は float が嫌いでした。もっと直感的に配置変更したいと思うはずです。そこで Flexbox の登場です。Flexbox は float のように解除の必要が無いし、直感的にコードを書くことが出来ます。Flexbox の使い方の前にまず、メリットとデメリットについて見ていきましょう。

 

Flexbox のメリット

  • ひと手間省ける

先も書いた通り Flexbox では float のようにいちいち解除する必要がありません。なので、面倒なコードを書かずに済みます。

  • 配置を自由自在に

僕的に最も大きな利点だと考えているのはここです。最近はモバイルファーストが加速し、ほとんどのHPがレスポンシブデザインに対応しています。そうした、スマホ用にサイト対応させる際に出てくる順番を変えるという作業がとても簡単に行えます。更に、配置の仕方の数がとても多いです。なので、自分の望んだとおりのレイアウトを完成させられます。

 

 

Flexbox のデメリット

  • 対応してないブラウザがある

古いバージョンのブラウザでは Flexbox が対応していないものがあります。IE11 や Chrome など最近のブラウザはほとんどが対応していますがアップデートしていない場合はFlexboxが使えないので気を付けましょう。詳しくはこちらの Can I use を見てください。

 

Flexbox の使い方、気を付ける点

Flexbox は親要素に flex をかけることによって、子要素の配置を変えられます。その際気を付ける点は孫要素には反映されない事です。これを知らないとレイアウトが思ったようにいかないので気を付けてください。コードの詳しい内容ですがここで僕が書くよりもすごく分かりやすいサイトがありますのでそちらをご覧ください。Flexboxの実例

 

レスポンシブを先に

スマホが急激に普及し、現在はスマホファーストの時代です。なので、スマホに対応したサイトが当たり前となっています。なので、サイトを作る際はレスポンシブデザインにするのが当たり前です。僕はHP制作が初めてだったのでレスポンシブデザインも初めてでした。

そこでコーディング中に気づいたことを書きます。と言っても気を付ける点はただ一つです。レスポンシブデザインにするならレスポンシブデザインを先にコーディングするだけです。ふつうはPC用のコードを先に書きます。しかし、そのあとにレスポンシブデザインを書くとうまくいかないことが多いので、結局修整を加えることになりかなり面倒でした。なのでこれから初めてHP制作をしようと言う方は是非気を付けてください。

 

ググる力!!

初めて成果物を挙げてみて、勉強だけでは何もできないことを実感しました。基本的構造や文法などは勉強して覚えておく必要はありますが、機能を実装ための具体的なコードは覚えている必要はないと感じました。実戦経験を積む中で多く使うものは自然と覚えていくので無理に覚えようとして勉強に時間を割きすぎるのであれば先に何か成果物を挙げた方がいいと思います。しかし、具体的コードも覚えていないのにどうやって実装していくのか。それは文明の利器と先人の知恵を利用します。

ラーメン屋を検索せよ!

今ではインターネット上には多くの情報が存在しています。その情報の中には先人が気付いたことは方法が数多くあります。その知恵を利用しない手はないでしょう。つまるところ分かんないことはどんどん検索していこうという事です。しかし、現代っ子はみんな検索はすぐに書けますよね?そこで大切になってくるのは検索する力です。

例えば、お昼にラーメンを食べたくなったとしましょう。そこで以前友達に教えてもらったお店に行くとしましょう。場所が分からないでお店を検索しようとしましたが、お店の名前を忘れてしまいました。こんな時あなたならどうやって検索しますか?「おいしいラーメン屋」と検索しますか?世の中にラーメン屋は多すぎてどこだかわかりません。

この様にある固有名詞や特徴が分からないと検索することさえできないのです。なので、プログラミングの勉強の際は具体的なコードよりも機能の名前や動作について勉強していくことが大切だと思いました。そうすれば行きたかったラーメン屋にもたどり着けます。

 

font-familyがエラー?

僕はProgate、Udemyを基本的な使って勉強してきました。その中で基本的なものとして字体を指定する font-family があります。そして、実際サイトを作る際ももちろん使いました。しかし、font-family で指定をした字体が反映されずデフォルトのまま表示されてしまう事態が発生しました。どこも間違っていないのにうまく反映されませんでした。勿論検索してみました。そしたら、デフォルトで表示されてしまう問題の解決方法がいくつか出てきました。

結果として全て試したのですが、うまくいきませんでした。状態としては font-family を指定する際一つ目まではうまく機能していました。しかし、二つ以上指定するとデフォルトに戻ってしまいました。「,」を打ち込んだ途端にデフォルトになりました。結局 Pragin のHPも字体を一つしか指定できずにいます。そうです。解決してません。今後も調べていきますので、もし解決した場合はまた記事にしたいと思います。読者の中に何かわかる方がいましたら Pragin の公式Twitterにて連絡をもらえると嬉しいです。

 

まとめ

今回は前回よりも技術的な面について書いてきました。中には未解決のこともありましたが、HP制作をしているとリリースを優先させるために妥協せざるを得ないときもあります。そういったときはSNSなどで呼びかけたりして解決策をリリース後に見つけ改善していけばいいと思います。それでは一緒に頑張ってスキルアップしていきましょう!!

 

最後まで読んで頂きありがとうございます。

次回もお願いします。