【連載】ウェブサイト作りませんか?③

#小室 #施設整備 #パソコン #社内発信 #ウェブ #プログラミング


この連載...まだ続きますw

1回目 → 【連載】ウェブサイト作りませんか?

2回目 → 【連載】ウェブサイト作りませんか?②

前回の最後になぜdivとspanを使わなければいけないのでしょうか?という事で終わっておりましたのでそのあたりからお話していきます。


■まずは特徴のおさらい

div ・・・ ブロックレベルです。前後に改行が入ります。サイズの指定が出来ます。

span ・・・ インラインレベルです。前後に改行は入りません。サイズの指定は出来ません。

こうでしたね。


divやらspanのこういった特徴を活かしてスタイリングに利用していきます。


■スタイリングとは!?

スタイリングとは

  • 大きさ

  • レイアウト

など見た目に関わる部分の事です。このdivやspanの持つ「ブロックレベル」や「インラインレベル」の特性を利用しつつ見た目を整えていきます。


■ウェブページのテーマとレイアウト

まずはウェブページのテーマを決めましょう。

そうですね。僕は今、鹿嶋に住んでいるので鹿島港をイメージしたページにしましょうか。


テーマが決まったら軽くウェブページのレイアウトをしていきましょう。

これは手書きとかペイントとかイラストレーターとかで作りながら想像しながらやってみるのが良いです。

こんな感じですかね。ページのタイトルは適当に「THE KASHIMA PORT」とでもしましょうか。

メニューには各ページへのリンクを貼るのですが「TOP」「BLOG」「PrivacyPolicy」の3つにしましょう。

なんかいい感じの画像は無料素材サービスの「pixabay」さんからお借りします。

これは練習サイトで全世界に公開しないので大丈夫なのですが、基本的に全世界に公開されるものにネットから適当に拾ったものを使用するのはやめましょう。SNSも同様です。

著作権に引っかかってしまいますからね。

で、フッターは「©2019-06 Tsuyoshi Komuro」としましょう。

コピーライトっていうのは著作権の表記です。©という文字が入ればコピーライトですよって意味です。

著作権表記に最低限必要なものが

  • ©という文字

  • 作られた日付

  • 著作者の名前や会社名

です。よく見るのは©CopyRightというものですが©とCopyRightは同じ意味なのでどちらかが入っていれば著作権表記としては問題ありません。


■HTMLで書いてみましょう。

では書いてみましょう。まずは上から順番にやっていきます。

ページのタイトルは横幅一杯にいきたいのでdivでいいです。

メニューは横幅一杯でいいのでdivでいいです。ただし、その中のリンクもdivでいいかと思います。(あとで説明しますが…)

なんかいい感じの画像はdivの中に括ってサイズ調整をしたいですね。

フッターも横幅一杯なのでdivでいいですね。

って全部divですねw

大体こんなものです。spanは要所要所で色を変えたい時とかにしか使わないので。

では改めてファイルを作って行きましょう。

今回はフォルダを作ってその中にindex.htmlを作りましょう。プラスで画像用のフォルダ「img」も作りましょう。

こんな感じです。

index.htmlはこんな感じで書きましょう。

間で一段右に寄っているもの(メニューの中身)ですが、これはdivの中にdivが入って見辛くなるので行っています。これをインデント(字下げ)と言います。これをおこなわなければhtmlが長くなってしまった時にどこがどこなのかが全く分からなくなってしまいます。


ブラウザで表示するとこうなります。

イメージに近くなってきたでしょうか?

これを実際にスタイリングしていくのですが、これは次回やっていきましょう。






TEL:029-863-1811

  • Instagram

©Copyright 2015 REITO,all right reserved.