はじめまして！！今年のクリスマスは娘に3回サンタさんが来ました。
社内では、「がみさん」と呼ばれていますCTOの中神です。
デザイナーじゃないと、採用LPを作れないとか、ホームページ制作なんて、デザインださないと難しいんじゃないか。と思っているあなた！今は、デザイナーじゃなくても、プロ顔負けのホームーページを作成することができるんです。
いろんなツールがあるのですが、ここでは、Bootstrapを使った採用LPの作り方を、テクニック毎に説明していきます。
Bootstrapの使い方
まずは、Bootstrapを使う準備をしていきましょーーー。
Bootstrapについて
Wikipediaを見るとこんな感じで解説されていますが、
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
– Wikipediaより引用 https://ja.wikipedia.org/wiki/Bootstrap
要するに、デザイナーじゃなくてもhtmlがかければ、簡単にレイアウトデザインができるよ、って代物です。
IT苦手なオレでも出来る
準備する
まずは、こんな感じでhtmlを作ります。
これだけで、準備OK。
書いてみた
あとは、bodyの内の以下の場所にコンテンツを書いていくだけ。
<!-- contents START --> <!-- 省略 --> <!-- contents E N D -->
では、Bootstrapのjumbotronといわれるものを表示してみます。
jumbotronとは、簡単にいえば、キャッチフレーズを表示するスペースで、採用LPを作成する際には必要なスペースになります。
※採用LPでは、ファーストビュー（LPにアクセスされた際にみられる最初の部分）に何を表示するかがとても重要です。
まずは、このままダウンロードして、htmlを表示してみるのもOKです。
htmlを書くだけで、デザインしなくても形になっているのがわかって頂けますでしょうか？
ぜひ、手元の環境でやってみてください。
公式ページにマニュアルがありますので、参考に。
さて、次回は。。。
ヘッダーメニューの固定なんかをやってみたいと思います。
では、また＾＾
おしらせ
「宮崎でITの勉強会に参加したいけど、情報がない！」というあなたへ
宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。
宮崎IT関連勉強会はこちらから。
