トップに戻るボタン 【アレンジ1】ホームページのテーマを決める

index.html× _ □ ×

●HTML●

●CSS●

何か1つでもできることが増えると自信がつきますね。学習で獲得した知識を活かして、ぜひオリジナルのホームページ作りに挑戦してください!

まずはテーマを決めてしまうのが一番。思い通りのホームページを作る近道ですよ。

その前にアレンジ版でまずは腕試しをしていきませんか?アレンジ版ではステップ1からステップ60で作ったホームページを土台に、少しずつ改良を加えていきます。

ステップ30のHTML&CSSファイルセットのおまけで「大人っぽい女性」をテーマにアレンジ版を作ることを予告しました。でももう少し詳しく「和風の大人っぽい女性」をテーマにホームページの編集をしていきます。アレンジ版は今回を含めて7つのステップにまとめました。

  1. ホームページのテーマを決める
  2. ページの幅を調整する
  3. 16進数方式で背景と文字を配色する
  4. 境界線の色と線種を変更する
  5. アイコンの変形とフチ取りをする
  6. 文字形式(フォント)を明朝体に設定する
  7. 背景にパターン画像を使う

「3000円で作る!ホームページ」には登場しなかったHTMLのタグやスタイルシート(CSS)のプロパティを使えばホームページの幅が広がると思います。アレンジ版ではスタイルシートを編集してアレンジする方法にしぼりました。それだけでも雰囲気が全然ちがってくるんですよ。

その前にHTMLもちょっとだけ修正します。オーナーさんがそのファビコンとプロフィールアイコンじゃダメって言うんです。私はかわいいと思うのにな。相談してホームページの名前とハンドルネームも変わってます。

じゃあ、ファビコンとプロフィール画像を変更します。

●HTML(ファビコンとプロフィール画像)●
<link rel="icon" href="myfavicon.ico">
※ヘッド(head)要素の中にあります
<img src="images/myprofile.jpg" alt="プロフィールアイコン">
※サイドメニュー(div id="side")要素の中にあります

タイトルとハンドルネームも編集です。あとヘッダー要素のホームページ名にはbrタグをつけました。アレンジ2ではページの幅を広げるんだけど、そうすると表示が崩れちゃうので画像の手前で折り返すことにしました。

●HTML●(ホームページの名前とハンドルネーム)
<title>素朴で素敵なものをさがす人</title>
※ヘッド要素の中にあります
<h1><a href="index.html">素朴で素敵なものをさがす人<br>
<img src="images/header.png" alt="ヘッダーのイメージ画像">
</a></h1>
※ヘッダー(header)要素の中にあります
<b>素朴な人</b>
※サイドメニュー要素のプロフィール要素の中にあります
<p>&copy; 2016 homy 素朴で素敵なものをさがす人</p>
※フッター要素の中にあります

HTMLは準備万端ですね。スタイルシートは用意できていますか?次に行きますよ!

HTML/CSSファイルセットA1
50円(内税)
購入ボタン(HTML/CSSファイルセット【アレンジ1】50円)