ga-04-02

HTML/CSS初心者の為の 無料で挫折させない ホームページ作成講座

2.主要HTMLの使い方

目   次

1.pタグの使い方サンプル

2.spanタグの使い方サンプル

3.divタグの使い方サンプル

4.h1タグ~h6タグの使い方サンプル

5.コメントアウトの使い方サンプル
 (CSSのコメントアウトの使い方を含む)



  1.pタグの使い方サンプル

pタグはParagraphの略で、<p>~</p>で囲まれた部分がひとつの段落であることを表します。<p>~</p>の前後に1行分改行されます。<br>タグを使うと改行だけができます。

【サンプル画像】

画像
※枠線は後から付けました。

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     pタグの使い方サンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <h3>
        pタグの書き方サンプル1(段落ごとに1行改行する)
    </h3>
    <p>
        pタグはParagraphの略で、<p>~<p>で囲まれた
        部分がひとつの段落であることを表します。<p>~
        <p>の前後に1行空けて改行されます。
    </p>
    <p>
        段落毎に1行空けたく無い場合は、<br>タグを使うと
        改行だけができます。
    </p>

    <h3>
        pタグの書き方サンプル2(段落の途中で改行する)
    </h3>
    <p>
        pタグはParagraphの略で、<p>~<p>で囲まれた
        部分がひとつの段落であることを表します。<p>~
        <p>の前後に1行空けて改行されます。<br>

        段落毎に1行空けたく無い場合は、<br>タグを使うと
        改行だけができます。
    </p>
</body>
</html>
        
今回は、CSSコードはありません。
  
  2.spanタグの使い方サンプル

spanタグ自身は意味を持っていませんが、<span>~</span>で囲まれた範囲に対してスタイルシートを適用することに用いられます。同様の機能を持っているタグにdivタグがありますが、spanタグは改行しないのに対しdivタグは改行します。詳細は、 「13.レイアウトの基本」の「3.[inline]と[block]と[inline-block]」 を参照してください。spanタグはインライン要素で、divタグはブロックレベル要素です。
spanタグは前後に改行が入らないので、文章のスタイルの一部を変更することに使います。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     spanタグの書き方サンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <p>これは、
    <span class="d-moji-red">文字を赤色にする</span>
    サンプルです。
    </p>

    <p>これは、
    <span class="d-underline">アンダーライン</span>
    のサンプルです。</p>

    <p>これは、
    <span class="d-keikoupen">赤色蛍光ペン</span>
    のサンプルです。</p>
    
    <p>これは、
    <span class="d-haikei-yellow">背景色を黄色にする</span>
    サンプルです。</p>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    spanタグの書き方サンプル
--====================================*/
.d-moji-red{
    color:red;
}
.d-underline{
    text-decoration:underline;
}
.d-keikoupen{
    background:
    linear-gradient(transparent 70%,#ff99ab 70%);
}
.d-haikei-yellow{
    background-color: yellow;
}
        
  
  3.divタグの使い方サンプル

divタグは、spanタグと同様にそれ自身で意味を持ちませんが、spanタグと違って、幅と高さを指定することができるので、大きな範囲のスタイルを設定することに用いられます。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     divタグの使い方サンプル
=====================================-->
<html lang=“ja”>
<head>
  <meta charset=“UFT-8”>
  <title></title>
  <link rel="stylesheet" href="style-1.css">
</head>

<body>
    <div class="container">
        <h1>◆divタグの使い方サンプル◆</h1>
        <div class="box bg-darkblue
                     text-yellow">
            <p>カテゴリー1</p>
            <small>カテゴリー1の内容です。</small>
        </div>
        <div class="box bg-skyblue
                     text-black">
            <p>カテゴリー2</p>
            <small>カテゴリー2の内容です。</small>
        </div>
        <div class="box bg-lime
                     text-black">
            <p>カテゴリー3</p>
            <small>カテゴリー3の内容です。</small>
        </div>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      divタグの使い方サンプル
--====================================*/
.container{
    width:584px;
    max-width:90%;
    height:auto;
    padding:10px;
    margin: 30px auto;
    border: solid 3px darkblue;
    text-align: center;
    color:red;
}
.box{
    width:160px;
    padding: 10px;
    margin: 10px 5px 30px 5px;
    display:inline-block;
    text-align: center;
}
.bg-darkblue{background:darkblue;}
.bg-skyblue{background:skyblue;}
.bg-lime{background:lime;}

.text-white{color:white;font-weight: bold;}
.text-black{color:black;font-weight: bold;}
.text-yellow{color:yellow;font-weight: bold;}

p {margin:0;}
        
  
  4.h1タグ~h6タグの使い方サンプル 

h1タグ~h6タグは見出しタグと言われます。数字の小さいほど大きな見出しとなります。記事の論理性を考えて、小さな数字から使っていくことがSEO対策にも良いようです。例えばページタイトルにh1タグを使い、当該ページの大項目のタイトルにh2タグを使い、中項目のタイトルにh3タグを使うとかです。

【サンプル画像】

画像
枠線は後から付けたものです。


【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     h1タグ~h6タグのサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <h1>これは、h1タグのサンプルです。</h1>
    <h2>これは、h2タグのサンプルです。</h2>
    <h3>これは、h3タグのサンプルです。</h3>
    <h4>これは、h4タグのサンプルです。</h4>
    <h5>これは、h5タグのサンプルです。</h5>
    <h6>これは、h6タグのサンプルです。</h6>
</body>
</html>
        
今回は、CSSコードはありません。
  
  5.コメントアウトの使い方サンプル

コメントアウトとは、コード上に書いてもコードとして反映されなくすることをいいます。コメントアウトは、段落の説明文とし段落ごとに入れる、及び1行単位に補足説明をするときに使います。その他にトラブルシューティングにも使います。HTMLとCSSでは、コメントアウトの書き方が異なります。

1.HTMLのコメントアウトの書き方
コメントアウトしたいエリアを“<!--”と“-->”で挟みます。複数行にまたがっても大丈夫です。Sublime Text では、範囲指定をして[Ctrl+/](Ctrlを押しながら/を押す)を押せば、自動的にコメントアウトしてくれます。解除するときは、コメントアウトされた1カ所にカーソルを置いて、[Ctrl+/]を押せばコメントアウトされたエリアを解除できます。

2.CSSのコメントアウトの書き方
コメントアウトしたいエリアを”/*”と”*/”で挟みます。複数行にまたがっても大丈夫です。Sublime Text では、範囲指定をして[Ctrl+/]を押せば、自動的にコメントアウトしてくれます。解除するときは、コメントアウトされた1カ所にカーソルを置いて、[Ctrl+/]を押せばコメントアウトされたエリアを解除できます。

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    コメントアウトの書き方サンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <p>A.赤色の蛍光ペン ・・・ これは
        <span class="d-keikoupen-red">
        蛍光ペンのサンプル</span>です。
    </p>
</body>
</html>
        

HTMLコメントアウトの書き方

CSSコード(style-1.css)
@charset "utf-8";
/*====================================
     コメントアウトの書き方サンプル
====================================*/
/*赤色の蛍光ペン*/

.d-keikoupen-red{background:
    linear-gradient(transparent 70%,#ff99ab 70%);
}
        

CSSコメントアウトの書き方

 back
pagetop
 next

HTNLの基本

主要HTMLの使い方

CSSの基本

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken