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

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

ちょっと間は空いてしまいましたが、今回も続きをやっていこうと思います。

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

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

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



今回は前回作った

このコード。表示するとこうなりますね。

これをスタイリング(装飾)していこうと思います。


まずは一番テンションが上がりそうな

この「なんかいい感じの画像」の部分を作って行こうと思います。

画像は商用利用可能のフリー素材の港の写真を拝借してきました。

興味がある方はこちらから探してみて下さい。


拝借した画像はindex.htmlを置いたフォルダの中に更に「img」というフォルダを作った中においておきます。画像の名前は「top-image」とします。


<div>なんかいい感じの画像</div>

この部分を

<div class="top-image"><img src="./img/top-image.jpg"></div>

こんな具合に書き換えます。

そうすると

こうなります。

雰囲気出てきましたね。

では引き続きページのタイトルをいじっていきたいと思います。

ページのタイトルはWEBサイトの中で最も重要な部分です。

これは

<div>THE KASHIMA PORT</div>

これから

<h1>THE KASHIMA PORT</h1>

と書き換えましょう。

h1というのはこのページ一番の見出しです!という意味です。

h1を設定すると文字が大きく太くなりますので視覚的にもよい感じになります。


では、装飾を行っていくためにタグにclass(クラス)というものを振っていきます。

classはタグの名前の隣に半角スペースを空けて自由な名前を付ける事が出来ます。

メニューとなる部分はclass="menu"とし、メインコンテンツとなる部分はclass="contents"とし、コピーライトを各部分はページのフッターとなるのでclass="footer"としました。

更にこれら全てを包む要素として先頭に<body>を。末尾に</body>を入れました。


ここまで出来たらいよいよ装飾に入っていきます。

一番最後の</body>の下に

<style>

と書きましょう。その下にスタイリングを書いていきます。ここは細かい事は抜きにしてひとまず書き写してみて頂ければと思います。

こうですね。

表示するとこうなります。

どうでしょう?

それっぽくなりましたね。


これ以上の説明はちょっとマニアックになってしまうかも知れませんので割愛しますが、意外と簡単な手順でWEBサイトが出来てしまうのがお分かり頂けたでしょうか?


もし「もっと知りたい!」って方がいましたら言って頂ければ詳しくお話したいと思います。



TEL:029-863-1811

  • Instagram

※弊社のWEBサイト掲載内容を無断で転載・引用する事を禁止とさせていただきます。

©Copyright 2015 REITO,all right reserved.