これなら誰でも簡単にホームページがつくれる！

ホームページの作り方

スタイルシートの使い方がよくわかる

初回掲載：2014/09/26
更新：2023/02/18
三澤 通宏

　遥か昔2000年頃、古い規格(html2？)でスタイルシートを使わない「ホームページの作り方」を会社同期会のホームページに掲載しました。
　今年中に新規格のhtml5が正式勧告されようとしており、書店には、html5の本が多数出版されています。よく知らない人がこの本を開いてみると、タグやスタイルシートが出て来てとても手に負えないと思ってしまいます。
　書籍は、著者の考え方に基づいて順序よく記述してあります。これをまともに取り組むと途中で挫折する人が多いようです。
　そこで、速やかに初歩的な画面が作成できるよう解説ページを作成することにしました。新規格のhtml5に準拠しましたので、スタイルシートが出てきますが、スタイルシートは、それほど難しいものでありません。慣れてくると、理に適っておりむしろやさしいと思うようになるでしょう。

　それでは、これからホームページの作り方に入って行きます。

　ホームページの文書は、HTML形式で記述する必要があります。HTML文書は、書かれたものを見るとむずかしそうですが、中身は、テキスト文書ですから簡単です。HTML文書を完成するに当たっては、色の表現、画像形式、画面サイズなど多少の知識が必要ですから、これらも併せて解説します。
　まず、HTML文書とは、どんな文書か知らない人は、次の操作をやってみてください。

この画面の何もないところで、右クリックするとメニューが出てきますが、この中の「ページのソース表示」をクリックします。出て来た画面が、見ているこの画面のHTML文です。

　複雑でむずかしそうで、とても手に負えないと思うかもしれません。だが、少しわかってくれば、なーんだこんなことかと思うようになります。

　第２章9節まで行けば、自分のホームページが作成できるようになります。是非、挑戦してみてください。

　ところで、HTML5は、廃止になりましたが、これについては、ココを見てください。

目次

HTML文書の作り方

第１章　HTMLについて

第２章　さっそく、HTML文書を作ってみましょう

  1. 見出し文字を書いてみましょう
  2. 文章の記入と配置
  3. フォントの指定と段落
  4. 画像の貼り付け
  5. リスト（箇条書き）
  6. 画像の横並べ
  7. 表 組
  8. 画像の準備
  9. トップページとリンク
  10. 地図の挿入
  11. その他のタグなど　―――――――――――――→
  12. HTML5の新規タグ（音楽や動画の掲載が簡単になる）
  13. スタイルシートのいろいろな使い方　―――――→
  14. ナビゲーションの作り方
  15. その他いろいろ１
  1. 見出し文字の修飾
  2. 括弧付番号を付ける
  3. イメージマップ
  4. 顔をポイントすると氏名表示する
  5. ふりがな（<ruby>)
  6. <iframe>タグ
  7. overflowプロパティ
  8. <form>タグ
  9. 文字間にスペースは入れないこと
  10. JavaScript
  11. default marginを覚えておこう
  1. その他いろいろ２
  1. ピクセル定規を使おう
  2. 地図の作り方
  3. 改造CGIの紹介
  4. アクセス・カウンターの設置
  1. 逐次追加
  1. <iframe>内のページが更新されないとき
  2. 縦書き
  3. Google mapの挿入
  4. 動画をyoutubeへアップロード・掲載
  5. フォントの比較
  6. リスト（箇条書き）を使いこなそう
  7. 画像横並べのいろいろな方法
  8. ブラウザ比較
  9. 全角スペースはレイアウトを乱すことがある
  10. BGMを自動で鳴らすことはできなくなった

第３章　サーバへのアップロード

第４章　HTMLエディタの紹介

色の表現
画像ファイルの形式
  1. 強調タグと太字タグ
  2. 上付き文字と下付き文字
  3. テキストを斜体（イタリック）にする
  4. <span>タグ
  5. <hr>タグ
  6. 引用タグ <blockquote>
  7. <small> タグ
  8. アンダーラインの引き方
  9. 打消し線の引き方
  10. 特殊文字
  11. ブロックレベル要素とインライン要素
  12. display プロパティについて
  13. 画像の下の謎の空白
  14. 中途の文字の頭を揃える
  15. vertical-align プロパティについて
  16. 同じページの特定のところへ飛ぶ
  17. 他のページの特定のところへ飛ぶ
  18. 同じページのトップへ戻る
  1. CSSの第３の表記法
  2. 背景に色を付けてみましょう
  3. 背景に画像を使ってみましょう
  4. リストのマークを色つきにしてみましょう
  5. 全角スペースを使わない字下げ
  6. 画面を左右に分割する
  7. 疑似クラス
  8. 枠の角に丸みを付ける
  9. 画像の上に文字を重ねる
  10. 画像の隅を丸くする
  11. 枠や画像に影を付ける
  12. 文字に影を付けたり縁取りをする
  13. 文章の右端を揃える（均等割付）
  14. 子孫セレクタ
  15. class セレクタの複数使用法
  16. 文章の最後の行の右端に文字を入れる

更新来歴

質問などは、こちらへ

戻る