ポートフォリオ作成のためのランディングページ(LP)模写コーディング②

ポートフォリオ作成のためのランディングページ(LP)模写 プログラミング

この記事ではクラウドソーシングのポートフォリオ作成に向けてLPページ模写2つ目を完成させたので、その作成に当たって大変だったところや今後気をつけるべきポイントについて書いています。

 

クラウドソーシングの「ランディングページ(LP)制作」を受注してみたいけど、ポートフォリオが完成してないからどうしよう…と思っている人がこの記事を見てポートフォリオ作成の参考になれればと思っています。

 

LP制作①をまだ見ていないという方は 参考URLを利用してランディングページ(LP)模写に初挑戦! をどうぞ!

 

LP模写を行うまでに学習してきたこと

LP模写を行うまでにprogateやドットインストールさらにはUdemyなどで基礎を固めました。

 

 

ちなみにHTML&CSSの教科書として「よくわかるHTML5+CSS3の教科書」を使ってきましたね。

 

最後にサンプルファイルをダウンロードして実際に手を動かしながら勉強できるのでオススメです!

 

 

今回参考にしたサイト

ポートフォリオの作成には、クラウドソーシング(クラウドワークスやランサースなど)で「ランディングページ(LP)制作」の案件にある参考URLを使っています。

 

参考URLを自分で作る力がつけば実際に仕事を受注しても大丈夫だということを証明できるからですね。

 

今回は以下のページのLPを参考に作成しました。

レンタル自習室イーミックス 秋葉原・亀戸・本八幡・津田沼 24時間ご利用いただけます。
レンタル自習室イーミックス 秋葉原・亀戸・本八幡・津田沼 東京・千葉総武線沿線最大級の自習室 24時間ご利用いただけます。

 

今回のランディングページ(LP)制作で苦労した所

今回のランディングページ(LP)制作で大変だったのは、以下の所です。

  • clearfix
  • ネガティブマージン

 

floatを解除するためのclearfix

僕自身、今まではfloatを解除するためにはclear:both;を使っていましたが今回参考にしたサイトでは、あまり使ったことがないclearfixというクラスが使われていたので、clearfixも使えるようになろう! という思いました。

 

そもそもfloatを解除しないと、floatを指定した親要素から子要素を認識できなくなり親要素の高さを維持できなくなるからなんですね。

 

CSSでは以下のようにclearfixを指定しました。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix { /* IEに対応するための記述 */
    min-height: 1px;
}

* html .clearfix { /* IEに対応するための記述 */
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}

 

clearfixというのは、親要素の中にある最後の子要素を.clearfix:afterで疑似的に作りだし、それにclear:both;を指定することでfloatを解除する方法です。

 

上記の2つ目、3つ目の指定を見たときは、何のためにこの指定をしているのか分からなかったのですが、これはIE(Internet Explorer)に対応させるためのCSSだということが分かりました。

 

ネガティブマージン

ネガティブマージンの使い方がいまいち分かっていませんでした。

 

そもそもネガティブマージンというのは、今回書いたコードでは以下のようなものですね。

.section-reg {
  background: url(img/bar_back.png) no-repeat 0 0;
  width: 1000px;
  height: 175px;
  position: relative;
  top: -50px;/* ネガティブマージン */
  margin-bottom: -53px;/* ネガティブマージン */
  z-index: 100;
  display: block;
}

 

コードからも分かる通りネガティブマージンとは、marginにマイナスの数値を指定することです。

 

ネガティブマージンを使うことによって簡単に親要素の外に出すことができるようになるんですね。

 

上記でpositionを設定しているのはネガティブマージンが効かないブラウザにも対応させるために設定しています。

 

おわりに

やっぱり全部を0から完璧に何も見ずに仕上げるのは現段階では難しいですね。けど、徐々に慣れていけばいいかなとマイペースにやっていきたいと思っています。

 

プログラミング講師の迫さんも以下のように述べていますし。

 

また、progateやドットインストールの後に何をやるべきなのかについては、フリーランスエンジニアであるHIROKIさんが手順を述べられていました。

 

模写コーディングでも実力がついていくと信じて10個の参考URLをコーディングしていきます!

 

関連記事:こちらの記事も読まれています

サイトコーディングをUdemyのコースで1から行う!
この記事は、progateでHTML&CSSのレッスンを終え、ドットインストールのHTML入門とCSS入門も終えた後に何を行っていいか分からない...という方に向けて書いています。ずばり、その答えとしてUdemyで、「実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを使ってみよう」というコースをやり遂げましょう。
テックアカデミーの1週間無料体験を利用しての感想・レビュー
オンラインプログラミングスクール「テックアカデミー」の1週間無料体験を受けてみての感想・レビューを書いています。「プログラミング初心者だけど、どのように学習を進めていけばいいかわからない」、「有料コースを安く受けたい」という方におすすめ。
プログラミングスクール「テックアカデミー」のWebアプリケーションコースを2ヶ月間受講した感想・レビュー
プログラミングスクール「テックアカデミー」のコースを受講したので感想・レビュー記事を書いています。プログラミングを勉強したいのでプログラミングスクールに入りたい。独学だと勉強が厳しい。テックアカデミーのコースを受講しようと思っているけど実際どうなの?ついでに割引などがあれば割引を適用したい。という方は是非読んでみてください!

コメント