プログラミング

投稿日:

ポートフォリオ作成で学んだこと【HTML5/CSS3/Bootstrap4】

現在の仕事・課題

・働いているレストランのLP制作

→旧30DAYSトライアルのDAY21の課題にもなりますが、これは完成後納品となる可能性があるので、「仕事」ということで進めています。

・新30DAYSトライアル DAY3

→たまたま4連休だったため、とうとう新30DAYSトライアルを始めました。この4日間はDAY1とDAY2の課題に苦しめられ、無理やり終わらせたもののDAY3の課題でかなりのずれが判明したため、やり直そうという所です。

 


 

 

こんにちは。

今回から最初に書いた現在の仕事・課題というのを毎回書いていきます。これで僕が今どんなレベルにいるのかやどんなことをしているのかが、よくわかるのと思います。

ほぼ未経験の僕がどうやってスキルアップするのか、そのリアルをお届けします。

 

では、今日の内容に入ります。

先週、旧30DAYSトライアルの課題であったポートフォリオサイトの作成が完了しましたので、その作成中に学んだことをいくつか紹介したいと思います。

 

 

ベンダープレフィックス

-webkit-や-moz-というものを見たことはありますか?

以前からちらほら見かけていたのですが、ずっとなんだろうと思っていました。

そして今回のポートフォリオ作成で元にしたHTMLテンプレートに多く出てきていたので、この機会にこれらについて調べてみました。

 

結論から言うと、-webkit-や-moz-というのは、「ベンダープレフィックス」というもので、CSSのプロパティの前に付けて使うようになっています。

種類は4つあって以下のようになっています。

接頭辞 対応ブラウザ
-webkit- Google Chrome/Safari
-moz- Firefox
-ms- Internet Explorer
-o- Opera

 

以前は多くのプロパティに必要なものでしたが、今ではほとんどのブラウザがCSS3に対応しているため、ベンダープレフィックスが必要なプロパティは少なくなっています。

しかし、今でもtransformやanimationなどのプロパティには、ベンダープレフィックスをつけなければなりません。

そしてベンダープレフィックスをつけたプロパティはベンダープレフィックスを外した書き方を再度する必要があるので、大変めんどくさく書く量も増えます。

ベンダープレフィックスの例

div { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }

 

対象のプロパティにベンダープレフィックスが必要かどうかは、Can I use...を確認してみてください。

また、以下のサイトにベンダープレフィックスへの対応策が紹介されています。

CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入

 

 

横スクロール・縦スクロールの表示/非表示

ポートフォリオのトップイメージを作っている途中に、急に横スクロールが出てきました。

邪魔だなと思い、消す方法を調べたところ、overflow-x: hidden;とすると消えることが分かりました。

ついでに、overflowとは何かを調べてみました。

 

overflowとは...

overflowはあふれるという意味です。その名の通り、要素からあふれた部分を処理するプロパティになります。

overflowの値は、以下の4つをおさえておきましょう。

visible: 要素からあふれた部分も見える。(初期値)

hidden: 要素からあふれた部分は見えなくなり、スクロールバーも表示されない。

scroll: すべての部分が要素に収まるが、隠れて表示される。隠れた部分はスクロールバーで見ることができる。

auto: ブラウザによって表示が変わるが、基本的にスクロールバーが表示される。

 

また、overflowはoverflow-xとoverflow-yをまとめて指定できます。

その場合は、overflow: overflow-xの値 overflow-yの値;と書きますが、どちらかというと、そのままoverflow-x、overflow-yと書く方をよく見ます。

 

サルワカさんのサイトにわかりやすい説明がありますので、参考にしてみてください。

【CSS】overflowの使い方:hiddenやscrollの違いは?

 

お問い合わせフォームの作り方

30DAYSトライアルDAY22の課題ですね。

2つのパターンが紹介されていましたが、僕はパターン2を選んで実装しました。

とても簡単にお問い合わせフォームの実装ができますが、見た目をきっちりしようと思うと、自分でやる必要があります。

僕のお問い合わせフォームはこんな感じです。

デザインはほとんどパクリですが。笑

 

そして実は、まだポートフォリオサイトのドメイン取得が完了していないので、お問い合わせフォームの実装は完了していません。

ドメイン取得ができ次第、お問い合わせフォームの実装を完了させてポートフォリオサイトを公開しようと思います。

 

一応、下にformrunのリンクを貼っておきます。

formrun

 

最後に

ポートフォリオサイト作成で一番難しかったのは、デザインを考えることです。

今回はテンプレートを利用したのですが、これが自分のポートフォリオサイトになるんだと考えると結構悩みました。

これが一からデザインを考えなければならないとなると、本当に大変です。

でも、この先はそれも含めてやっていきたいので、少しずつでもデザインの勉強をやっておきたいと思います。

 

ただ、ポートフォリオサイトを作り終わった今は、やるべきことを1つずつやっていくのが良かったなと反省しています。

1度にいろんなことを学ぶのは効率的ではないので、今はデザインにこだわるのではなく、30DAYSトライアルを通して学んだことを生かしてポートフォリオサイトを作る、ということを優先させるべきでした。

今後はこれに注意して、今やるべきことを見失わないようにやっていきます。

 

以上!

スポンサードリンク




スポンサードリンク




-プログラミング

Copyright© トマブログ , 2021 All Rights Reserved Powered by STINGER.