ホーム  >  Webサイト制作

Webサイト制作

2024年10月27日
目次
  1. ページ全体の枠組みを作る
  2. メディアクエリを使ってPCサイトとスマホサイトを作成する方法
  3. OGP設置方法
  4. CSSデザインのトラブル解決
  5. Web制作に役立つテクニック
  6. 日本語のWebサイトで一般的に使用されるフォント
  7. コピーライトを表示したい
  8. テキスト色を変更したい（RGB）
  9. 箇条書きのナンバリングの番号を0を付けて桁合わせしたいとき
  10. 別のページの特定の場所にリンクするには
  11. メールアドレスをリンクにしたい
  12. 電話番号をリンクにしたい
  13. PDFファイルをダウンロードさせたい
  14. リンクの下線を点線にしたい
  15. マウスがホバーしたときに背景色をつけたい
  16. 画像にリンクをつけたい
  17. 画像を半透明にしたい
  18. ボックス全体にリンクしたい
  19. 見出しに下線をつけたい
  20. 枠線で見出しをデザインする
  21. ボックス全体を半透明にしたい
  22. 文法にミスがないか確認する

ページ全体の枠組みを作る

１、floatの基本的な使い方

CSSレイアウトでボックスを横ならべにする場合、一般的にfloatを使用しまが、もともとはマルチカラムレイアウトを行うことを目的にしたものではないため、ここでは、float本来の使い方を記載しています。

２、floatの特徴とclearfix

指定した要素は親ボックスからはみ出し、後続のボックスの中に入り込むとマルチカラムレイアウトに使おうとすると不具合が発生します。ここでは、clearfixを使用した解決方法を記載します。

３、floatでボックスを横に並べる

floatを使用したマルチカラムレイアウトについて解説

４、相対配置と絶対配置

positionプロパティによる相対配置と絶対配置の解説

５、HTMLとCSSでページ全体の枠組みを作る

サンプルページを作成してみます。

６、グローバルナビゲーションの作成

7、伸縮するマルチコラムレイアウト

メディアクエリを使ってPCサイトとスマホサイトを作成する方法

1つのHTMLファイルでWebサイトをPC向けデザイン、タブレット向けデザイン、スマホ向けデザインに対応させる方法を記載

OGP設置方法

OGP（Open Graph Protcol の略）とはFacebookやTwitter、LINEなどのソーシャルメディアの投稿などでリンクURLを貼り付けて紹介されたときに表示されるリッチオブジェクトを設定できる仕組みです。

CSSデザインのトラブル解決

img要素を配置した時に下側に謎の空白行が発生する現象を解消

Web制作に役立つテクニック

日本語のWebサイトで一般的に使用されるフォント

font-family: "Hiragino kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;

あまり細かくフォント名を列挙せず、次のように単純化して指定する方法もあります。

font-family: sans-serif;

serifとsans-serif

font-familyプロパティに指定している「sans-serif」は、ゴシック体を意味します。他に指定されているすべてのフォントが見つからなかった場合でもとくにかくゴシック体で表示できるように、フォントの指定の最後に「sans-serif」を指定します。特定のフォント名を指定しないキーワードに「serif」があります。これは日本語フォントでは「明朝体」を意味ます。

コピーライトを表示したい

<small>タグは、コピーライトや法的な注意書きを記すために使われます。CSSを書かなくてもはじめから小さなフォントサイズで表示されます。また、コピーライトにでてくる「©」マークを表示するには、この文字を直接入力するか、もしくは実体参照を使います。

<footer>
    <div class="footer-contatiner">
        <p><small>©TestSite</small></p>
    </div>
</footer>

テキスト色を変更したい（RGB）

「rgb()」は色を指定する方法のひとつです。赤、緑、青の各色の値を、カンマで区切ってそれぞれ10進数（0~255）で指定します。16進数の値で指定するHEXカラーと同様、実際につかうRGB各色の0~255の数値を調べるには、Photoshopなどの画像処理アプリケーションを使うのが一般的です。

color:rgb(赤,緑,青)
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
    <style>
        .year-price{
            color:rgb(26,167,177);
        }
    </style>
</head>
<body>
    <p>どんなに利用しても<span class="year-price">年間4,500</span>この機会に年間パスポートをご検討ください。</p>
</body>
</html>
実行結果
実行結果

箇条書きのナンバリングの番号を0を付けて桁合わせしたいとき

「list-style」プロパティの値に「decimal-leading-zero」を指定することで、番号に「0」をつけて桁合わせしています。

<ol class="files">
        <li>keyimage1.jpg</li>
        <li>keyimage2.jpg</li>
        <li>keyimage3.jpg</li>
        <li>keyimage4.jpg</li>
</ol>
.files{
        margin:0;
        list-style-type: decimal-leading-zero;
}

別のページの特定の場所にリンクするには

同じページだけでなく、別のページの特定の場所にリンクを設定することもできます。その場合は、<a>タグのhref属性を次のようにします。

書式：別のページの特定の場所にリンクする

<a href="リンク先ページのURL#リンク先要素のid属性">~</a>

たとえば、「about.html」の「h2 id=”address”>アクセス</h2>」にリンクを設定するなら、次のように書きます。

書式：別のページの特定の場所にリンクする例

<a href="about.html#address">~</a>

メールアドレスをリンクにしたい

<a>タグのhref属性に「mailto:メールアドレス」という形式でメールアドレスを書いておくと、そのリンクをクリックしたときにメールアプリが起動するようになります。※Webサイトにメールアドレスを書いてしまうと悪意のあるクローラーにより収集され、スパムメールが増えることがあります。

<p>お申込みはメールで<a href="mailto:contact@example.com">contact@example.com</a>まで送りください。</p>

電話番号をリンクにしたい

電話番号をリンクにして、タップしたら電話がかかるようにしたいとき<a>タグのhref属性に「tel:電話番号」という形式で電話番号を書いておくと、リンクをタップして電話がかけられるようになります。もちろん、スマートフォンなど電話の発信ができる機器にだけ有効な機能です。ただし、発信機能があるかどうかにかかわらず、どんな機器でも動作するブラウザでもリンク自体は有効になります。

電話番号フォーマット
<a>タグのhref属性に指定する電話番号は、途中に「-」があってもなくても問題ありません。次の2つのフォーマットのどちらでも、電話番号として正しく認識されます。
１、href=”tel:0311111111″
２、href=”tel:03-1111-1111″

<p>お問い合わせ<a href="tel:0311111111">03-1111-1111</a>までお電話ください。</p>

PDFファイルをダウンロードさせたい

リンク先のファイルを開くのではなく、ダウンロードさせたいとき<a>タグのリンク先にPDFファイル（.pdf）を指定していると、現在の多くのブラウザはブラウザウィドウ内で表示します。しかし、銀行の取引明細や通話料金の請求書など、PDFファイルをブラウザウィドウ内で表示するのではなく、ユーザーにダウンロードしてほしいときがあります。そのような場合は、<a>タグにdownload属性を追加します。

<p>カタログダウンロード</a>
<p><a href="product-all-2000.pdf" download="product.pdf">総合カタログ</p>

リンクの下線を点線にしたい

リンクの下線を点線にするには、<a>タグに以下の設定をします。

  • <a>タグに「text-decoration:none;」を適用して、テキストそのものについている下線を消す
  • border-bottomプロパティを使って、下辺にボーダーラインを引く
      a{
        color: #ea6357;
        text-decoration: none;
        border-bottom:1px dashed #ea6357
      }
      a:hover{
        color: #4fb24b;
        border-bottom: 1px solid #ea6357;
      }
実行結果

マウスがホバーしたときに背景色をつけたい

:hoverセレクタのスタイルにbackgroundプロパティを追加しておくと、ホバーしたときだけリンクテキストの背景色をつけることができます。

a{
    color: #ea6357;
}
a:hover{
    color: #ea6357;
    background: #ffee94;
}
実行結果

画像にリンクをつけたい

画像にリンクを付けるには、<a>タグで<img>タグを囲みます。

<div>
    <a href="https://www.example.com">
        <img src="images/map.png" alt="map">
    </a>
</div>

画像を半透明にしたい

サムネイルなどリンクがついている画像にマウスホバーしたときに、その画像を半透明にします。ポイントは「:hover」セレクタを使用します。

<div>
    <a href="https://www.example.com">
        <img src="images/map.png" alt="map" class="map">
    </a>
</div>
.map:hover{
    opacity:0.5;
}

ボックス全体にリンクしたい

ボックス全体をリンクするときや通販サイトなどで、画像と商品名をまとめてリンクするときなどに使用します。HTML5になってからは<a>タグで<div>タグなどを囲んでボックス全体をリンクにすることができます。古いブラウザの中には、<a>タグや<div>タグなどを囲むと表示が崩れるものがありました。

<a href="./address.html">
    <div>
        <h1>入会金無料</h1>
        <p>お問い合わせ</p>
    </div>
</a>

見出しに下線をつけたい

見出し（<h1>~<h6>）を目立たせるために下線をつけたい。border-bottomプロパティで、見出しの<h1>や<h2>などに下線を引くことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
  .contents h1{
    border-bottom: 4px solid #2097b6;
  }
  .contents h2{
    border-bottom: 1px dotted #2097b6;
  }
  </style>
</head>
<body>
<div class="contents">
  <h1>事業内容</h1>
  <p>当社の事業内容を紹介します。</p>
  <h2>環境設備</h2>
  <p>環境改善向けの製品を開発</p>
</div>
</body>
</html>
実行結果
実行結果

枠線で見出しをデザインする

見出しを装飾するために、ボックスの各辺のボーダーを設定したり、パディングやテキストの行揃え変更したりします。border関係のプロパティ、paddingプロパティ、text-alignプロパティなどを組み合わせるだけで様々デザインパターンが作れます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
  .contents h1{
    padding: 20px;
    border-top:5px solid #2097b6;
    border-bottom: 1px dashed #999;
    text-align: center;
  }
  .contents h2{
    padding-left: 10px;
    border-left: 8px solid #2097b6;
  }
  .contents h3{
    padding: 10px;
    border-top: 1px dotted #2097b6;
    border-left: 3px solid #2097b6;
    color: #2097b6;
  }
  </style>
</head>
<body>
<div class="contents">
  <h1>事業内容</h1>
  <p>当社の事業内容を紹介します。</p>
  <h2>環境設備</h2>
  <p>環境改善向けの製品を開発</p>
  <h3>水道事業</h3>
  <p>水質改善装置</p>
</div>
</body>
</html>
実行結果
実行結果

ボックス全体を半透明にしたい

div要素にopacityプロパティを設定します。

<div class="translucent">
</div>
.translucent{
border: 1px solid #c0c0c0;
padding: 10px
width: 400px;
background-color: #e7e7e7;
border-radius: 10px;
opacity: 0.5;
}

文法にミスがないか確認する

本当に正しいHTMLになっているかどうか確認します。ブラウザでW3CのMarkup Validation Serviceのページhttps://validator.w3.org/を開いてください。上部のタブから「Validate by File Upload」（❶）を選択します。ファイルを選択するボタン（❷）をクリックしてチェック対象のファイルをセットします。➌のCheckボタンをクリックします。

文法チェックが完了すると、「Document checking completed. No errors or warnings to show.」と表示されます。

エラーがある場合

HTMLの文法チェックをする意味
わざわざHTMLの文法チェックをするのはなぜでしょうか？それは、HTMLにちょっとしたミスがあっても、HTMLの段階では表示の問題として現れないことが多くあるからです。そのじょうな状態でCSSを指定すると、CSSを指定した段階で表示の問題となって現れるため、問題はCSSにあると考えてしまい、問題個所の発見にかなり時間がかかってしまうことがあります。