LP模写練2|本格的な模写に取り組む前に超基礎練習問題をやっておこう。
最近はLPの模写のことで頭がいっぱい。
検索してみると、模写して勉強しましたって人結構いるみたい。
その中でも
イサラさんのLPは模写するのにとっても良いサイトみたいで、いろんなサイトさんで紹介されている模様。
だが、しかし!
構造はシンプルなんだけど、コーディングすることが結構たくさんあるらしく、最初から挑戦すると挫折するかもとの意見を発見。
そうか、身の丈に合った学習をしないとな。
(正直、イサラさんのサイトwordpressでできてるって気付いて(今時当たり前なんだけど・・・)ちょっと不安になっていたところであった・・・。)
最初にワンクッション挟みましょ!
基礎の勉強になりそうなサイトないかな〜と色々探していたところ、noteで良き記事を発見。
初心者向け練習用のサンプルコードなるもの。
これならできそう!
よし。今日はこれをやってみる。
- コーディングエディタどうする?DreamweaverかSublime Textか
- デスクトップに練習用のフォルダを作る
- DWでサイト作成第一歩!
- DWでhtmlとcssのフォルダを作る
- それではさっそくHTMLを書いていく!
- まとめ
コーディングエディタどうする?DreamweaverかSublime Textか
そうと決まれば話は早い。
まずはコーディングするエディタをどうするか。
前にコーダーの方々がSublime Textが良いよ!と勧めてくれたことがある。
プロが言うんだからきっと良いに違いないと、早速ダウンロード!
と思ったら。。。
Mac OS X(10.7以降)じゃないと使用できないそうな。
私のMacは中古品なので10.6.8
作動できませんっ!!!!!!!(涙)
10.7にアップロードするには2千円くらいのお金と、時間がかかる。
10.9だったら無料ですぐできるっぽいけど、やり方を調べてもいまいちわからない。
ええい、めんどくさいから諦める。
私はアップデートしたいのではなくコーディングがしたいのだ。しかも今すぐに。
独身時代5年ローンを組んでまとめ買いしたアドビシリーズ、Dreamweaverをとりあえず使おう。
教えてくれたコーダーの先輩方、本当に申し訳ない。
デスクトップに練習用のフォルダを作る
名前はsample-projectで。
同じ名前にしておかないと後で分からなくなりそうだから。
この中にindex.htmlとstyle.cssとimagesの3つのファイルが入っているようにしたい。
画像はまとめてダウンロードして、
imagesフォルダを作って放り込み
sample-projectフォルダに入れといた。
DWでサイト作成第一歩!
DWを開いたら、
右のファイルタブ下あたりにある▼マークをクリックするとサイトの管理が出てくるのでこいつをクリック。
新規サイトをクリック
サイト名をsample-projectとする。
ローカルサイトフォルダーは右のフォルダマークをクリック
さきほどデスクトップに作ったファイルをとりあえず指定しておく。
(ちなみにこの方法で良いのかは謎。DW詳しい人がいたら教えてください)
サイトができた。
完了ボタンを押してOK!
DWでhtmlとcssのフォルダを作る
command+Nのショートカットキーを押すと新規ドキュメントが作成できる。
ページタイプはHTML、レイアウトは<なし>、ドキュメントタイプはHTML5を選んで作成ボタンをクリックする。
CSSファイルの作り方も同じ要領で、cmmand+N→ページタイプCSS→作成でファイルが作れる。
どちらも最初に名前を付けて保存した。
名前はindex.html(cssはstyle.css)場所は先ほど作ったsample-projectファイルに設定して保存。
そしたらこんな感じになった。
それではさっそくHTMLを書いていく!
まずはCSSのリンク設定から
こんな感じで左側に参考HTML、右側にエディタを配置。
ひとまず、titleをsampleに変更して、cssファイルのリンクを設定する。
<link href・・・まで書くと自動的に参照が表示されるのでクリック。
参照先から(sample-projectのフォルダ内にあるかチェック)style.cssを選んで開く。
つづき、rel="stylesheet" type="text/css">と書く
これでcssのリンク設定はOK。
bodyタグの下はサイト全体を囲むdivを指定
headタグの次にbodyタグ。
参考サイトによると、まずウェブページ全体を囲むdivタグを作るそうな。
名前がpage。
idを使っているということは、このid名「page」1回しか使えないということだな。
classは同じページ内で何度でも使えるので、一括で同じ設定をしたい時に便利だったはず。
忘れないうちに終了タグも頭揃えて書いておく。
headerの設定
そのあとheaderタグ。
書いたらすぐ終了タグを書く。
それからheader内もdivで囲む。
名前はheader_inner。こちらもid
サイトのロゴを配置。
ロゴはロゴで別に囲んでおくらしい。id名はheader_logo。
ロゴはimagesフォルダに予め「ligo.png」と名前を付けて保存してあるので、imagesの中にあるlogo.pngですよと指定する感じで。
するとこうなる。
今度は右側の問合せ関連情報について。
お問い合わせボタンは、名前をheader_contactにして個別に囲む。
aタグなのでリンクを飛ばす(urlないのでひとまず#で代用)
お問い合わせの文字をさらにheader_contact_innerという名前で囲む。たぶんボタンのデザインとかを設定するのかな。
それからさらに電話番号と営業時間について。
電場番号と営業時間もheader_textという名前で囲む。
文章なので普通にpタグで書く。番号と時間の間は<br>で改行。
するとこうなる。
全体通してみるとこんな感じ。
メイン画像の設定
次にメイン画像の設定。
divタグでmain_imageと名前をつけて、さらにその内側にmain_image_innerと名前つけその中にキャッチコピーを書く。
main_imageは文字通り画像の枠で、main_image_innerはキャッチコピーの枠と認識。
メイン画像はCSSで背景として設定する模様。
メイン画像下のテキストとナビゲーションの設定
そしてお次は、メイン画像下のテキスト部分とナビゲーション。
まずは<main>タグで全体を囲んでおく。
その下に<section id="section01"> sectionタグを書いてさらに囲んでおく。
メイン画像下のテキストはdivでscrollと名前をつける。
おや、こちらはclassだわ。
テキストは<h2>で記載。
丸いかたちのナビゲーションはulタグにmai_navと名前をつけて、ilタグでリストに。
それぞれ#div01,02,03と名前をつけて、クリックしたら同じページ内の各々の詳細部分に飛ぶようにaタグを設定する。
3つのナビゲーションの詳細
ナビゲーションの飛んだ先の詳細部分について。
アイコン1の内容は、
まずdivでcontentsと名前を付ける。こちらはclass。アイコン2と3も同じデザイン設定にするから多分classなんじゃなかろうか。
そのあとidも設定。こちらはナビゲーションをクリックした時に飛ぶ宛先になっているので、アイコン1と同じdiv01と設定する。
アイコン2も要領は一緒だけど、テキストと画像は左右逆なので名前を付けるときleftとrightに気をつける。
アイコン3はアイコン1と同じ。
見た目はこんな感じになる。
下部問合せ部分の作成
そして問合せ部分の作成。
グレーの背景を指定するためdivでmain_contactと名前を付ける。classである。
問合せの左側は電話番号と受付時間なので、divでcontacit_left_innerと名前を付けて囲み文字情報はpタグで囲む。
あとでCSSで受付時間部分の文字を小さく設定するため、受付部分だけspanタグで囲む。
問合せの右側はボタンになるので、まず全体をcontact_right main_contact_innerと名前をつけて囲み、問合せボタン自体にcontact_right_innerで囲む。
問合せボタンはpタグで囲む。
ここまでがmainの内容。
フッターの設定
最後フッターは
footerタグで囲んでpタグでコピーを書くだけ。
</div>は最初に予め囲んだpageの終了タグのこと
この時点で出来たものは下記のとおり。
めちゃ初期のホームページみたい。
まとめ
HTMLを久しぶりに書いたが、自分が思っていた以上にdivタグで囲みまくっていることに驚きを隠せない。
sectionタグっていまいち意味が分からないな。(あとで調べるとする)
次はcssでデザインを付けて行こう。