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

この記事では、ポートフォリオを作成するにあたり、LP（ランディングページ）模写コーディングを行なったので、難しかった点などについて書いています。

LP模写コーディングをする際に参考にしたページ

LP 模写コーディングを行うにあたり、今回は下記のサイトを参考にしました。

• 参考サイト：レンタル自習室イーミックス

今回のLP模写コーディングで難しかったところ

今回の LP 模写で難しかったのは、下記です。

float を解除するための clearfix

今回参考にしたサイトでは、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:after で疑似的に作りだし、それに clear:both; を指定することで float を解除しています。

この clearfix クラスは便利だなと思ったので、今後も使っていこうと思います。

ネガティブマージン

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

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

.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 を設定しているのはネガティブマージンが効かないブラウザにも対応させるために記述しています）

ポートフォリオ作成のためのランディングページ（LP）模写コーディング｜まとめ

やはり、全てを1から完璧に何も見ずに仕上げるのは、現段階では難しいですね。今回もかなり LP 模写コーディングを行うのに時間がかかりました。

昨今では、デイトラ のように、Web 制作を体系的に学ぶことができるオンラインスクールもあるようなので、こういったスクールを活用するのも1つの手だとは思います。

コースでいうと、例えば「Web制作コース」ですね。無料体験もできるようなので、気になる方は見てみると良いかと思います。