電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

html/css「見出しと本文を入れてホームページを完成させよう!」

calendar

reload

html/css「見出しと本文を入れてホームページを完成させよう!」

ホームページ制作第6回目、一応今回で最終となります。

前回は共通フレームの作成まで実施しました。↓

今回は、各ページのmain要素に見出しや本文を入れて、WEBサイトを完成させたいと思います。

スポンサーリンク

各ページのhtml

5つ項目があるので、5ページの記述が必要ですが、今回はだいたい全てのページが同じような記述になりますので、代表して「index.html」のページだけ抜粋して説明します。

index.html(home)

main要素に9~31行目を追加します。

div class=oneの中に、見出し、画像、段落、文章がはいります。

また、最下部のaside classの前に、「sticky class」を追加します。

これは、のちのcssを記述することで、下スクロールした時にside画面が指定した場所で固定され、ついてくる感じになります。

style.cssの追加

全て共通CSSに追加します。

one class要素でパディングを設定し、上下左右に隙間を設定します。見栄えがかなり良くなりますね。

また、one img classで画像を中央寄せします。

imgはテキスト要素になるので、display: block;を使うとブロック要素になり、marginなどで位置調整しやすいです。

sticky classの記述は、前途したsideメニューの固定に必要です。

完成したWEBサイトはコチラになります(クリックで再生)↓

WEBサーバーにアップロード

無料レンタルサーバー「xdomain」

出来上がったWEBサイトのデータは、WEBサーバーに格納する事で誰でもアクセスできるようになります。

とりあえずテスト的にやってみたい方は、無料のレンタルサーバーに登録するとよいです。

「xdomain」などの無料レンタルサーバーがあるので、そちらで無料登録すればドメイン(専用URL)が貰えます。

登録したレンタルサーバーのFTPサーバーに作成したファイルをアップロードすれば、晴れて自分が作成したホームページの公開となります。

html/css「見出しと本文を入れてホームページを完成させよう!」まとめ

html/cssのみでのWEBサイト作成について、6回にわたりまとめましたが、意外と簡単に出来るもんだとお分かりいただけたかと思います。

細かいタグの説明などはかなり端折りましたが、なんとなくは理解できたんではないでしょうか。

とにかく、html/cssについては、手を動かしていれば自ずと知識や仕組みが身についてくると思います。

よくプログラミングは、「手を動かせ」といいますが、この6回分のwebサイト作りを体験して頂ければ、その意味を実感できるはずです。是非チャレンジしてみて下さい。

html/cssのwebサイト作りは一旦終了しますが、細かいタグの内容とかは別途記事にしてまとめたいと思います。

あと、phpやjavaスクリプトなど、本格的なWEBサイト作成についても後日まとめたいと思います。

最後に、ここまでのindex.htmlとcssをのせておきます。