【HTMLで作れる採用LP】Bootstrapを準備しよう

はじめまして!!今年のクリスマスは娘に3回サンタさんが来ました。
社内では、「がみさん」と呼ばれていますCTOの中神です。

デザイナーじゃないと、採用LPを作れないとか、ホームページ制作なんて、デザインださないと難しいんじゃないか。と思っているあなた!今は、デザイナーじゃなくても、プロ顔負けのホームーページを作成することができるんです。

いろんなツールがあるのですが、ここでは、Bootstrapを使った採用LPの作り方を、テクニック毎に説明していきます。

Bootstrapの使い方

まずは、Bootstrapを使う準備をしていきましょーーー。

Bootstrapについて

Wikipediaを見るとこんな感じで解説されていますが、

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

– Wikipediaより引用 https://ja.wikipedia.org/wiki/Bootstrap

要するに、デザイナーじゃなくてもhtmlがかければ、簡単にレイアウトデザインができるよ、って代物です。

IT苦手なオレでも出来る

IT苦手なオレでも出来る

準備する

まずは、こんな感じでhtmlを作ります。

これだけで、準備OK。

書いてみた

あとは、bodyの内の以下の場所にコンテンツを書いていくだけ。

 <!-- contents START -->
 <!-- 省略 -->
 <!-- contents E N D -->

 

では、Bootstrapのjumbotronといわれるものを表示してみます。
jumbotronとは、簡単にいえば、キャッチフレーズを表示するスペースで、採用LPを作成する際には必要なスペースになります。
※採用LPでは、ファーストビュー(LPにアクセスされた際にみられる最初の部分)に何を表示するかがとても重要です。

まずは、このままダウンロードして、htmlを表示してみるのもOKです。

ここをクリックして表示を確認

htmlを書くだけで、デザインしなくても形になっているのがわかって頂けますでしょうか?

ぜひ、手元の環境でやってみてください。

 

公式ページにマニュアルがありますので、参考に。

 

さて、次回は。。。

ヘッダーメニューの固定なんかをやってみたいと思います。

では、また^^

 

おしらせ

「宮崎でITの勉強会に参加したいけど、情報がない!」というあなたへ

宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。

宮崎IT関連勉強会はこちらから。

この記事が気に入ったら
いいね ! しよう

Twitter で
 

新卒採用をはじめるならディーレクトにご相談ください

新卒採用に踏み出せない人事担当者の方、 そのお悩み、ディーレクトが解決します!

ABOUTこの記事をかいた人

中神 大司

株式会社D-rect CTO 専務取締役。大学院在学中よりITベンチャー企業にてプログラマ・エンジニアとして活躍。有名アーティストや海外ブランドのECサイト構築に携わる。その後、株式会社インタークロスにおいて、求人サイト全てのシステム設計・構築に携わり、現在に至る。 Wordbench宮崎の主催や、職業訓練校においてプログラミングの講師を務めるなど、若手技術者の育成にも力を注いでいる。サーバーの構築を得意としており、得意な事は、粗探しとあげ足取り。