読み込み中 読み込み対象

読み込み中

Blogメニュー

独学WEBエンジニアのためのブログ

記事をカテゴリーで絞り込む

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 9
  7. 最後へ

(総記事数:43件)

新着記事一覧

  • HTML

    classとid

    この記事をお勧めしたい方

    classとidの使い分けがよく分からない方!




    今日もお疲れです!
    ビギナー中里です!


    今回はclassとidについて学びたいと思います。


    私は専門学校の頃に1度だけあったWEBの授業で
    「idは良くない、classを使いなさい」
    とざっくりした説明(のようなもの)を受けました。

    確かにこれは、状況によっては正しいです。
    しかし、idにも当然使うべき時があります。

    今回はそこを理解できるようにしていきましょう。



    本記事で得られるスキル

    • classのルール
    • idのルール
    • classとidの使い方





    それでは行きましょう!










    classのルール

    classには特にルールはありません。

    ページ内で同じクラス名を複数回使うこともできますし
    マルチクラスとにすることも可能です。


    <!-- OK -->
    <div class="box">箱です</div>
    <div class="box">箱です</div>
    <div class="box box-blue">青い箱です</div>


    class="box box-blue"
    のように、半角スペースで区切ることで
    1つの要素に複数のクラス名を設定することをマルチクラスと言います。










    idのルール

    idは上で述べたclassでできることをするとルール違反となります。つまり

    1つのページに同じid名は複数存在してはならず
    1つの要素に複数のidを指定してはいけない(指定するメリットがない)

    ということになります。


    <!-- OK -->
    <div id="box1">箱です</div>
    <div id="box2">箱です</div>
    <div id="box-blue">青い箱です</div>

    <!-- NG -->
    <div id="box">箱です</div>
    <div id="box">箱です</div>
    <div id="box box-blue">青い箱です</div>











    classとidの使い方

    classの使い方

    classを使うのは以下の2つの場面です。

    • スタイルを当てる
    • JavaScriptの基点にする






    idの使い方

    idには複数の使い方があります。

    • スタイルを当てる(非推奨)
    • JavaScriptの基点にする
    • ページ内リンク
    • フォーム要素との関連付け


    まず、idでもスタイルを当てることはできますが、これはclassで行うべきです。
    非推奨と書きましたが、idでのスタイリングは行わないようにしましょう。

    JavaScriptの基点にする、については、JavaScript講座で別途触れたいと思います。





    ページ内リンク

    このリンクをクリックしてみてください。

    青い箱


    青い箱の先頭にジャンプしましたか?
    これは以下のコードで実現しています。


    <a href="#box-blue">このリンクをクリックしてみてください。</a>
    <div id="box-blue"></div>
    (スタイルの記述は省略しています)





    フォーム要素との関連付け

    2つのチェックボックスを用意しました。
    それぞれチェックボックス、関連するテキストをクリックしてみてください。


     
     


    チェックボックス1はテキスト部分をクリックしても何も起こりませんが
    チェックボックス2はテキスト部分をクリックするとチェックが付きます。
    これは以下のコードで実現しています。


    <input type="checkbox"><label for="checkbox1">チェックボックス1</label>
    <input type="checkbox" id="checkbox2"><label for="checkbox2">チェックボックス2</label>
    (チェックボックス1の
    for
    属性は本来不要ですが、id動作の確認のために付けています)






    ページ内リンクとフォーム要素との関連付けで分かったように、idには
    対応する1つの要素を限定する使い方があります。

    そのために1つのページに同じid名は複数存在してはならず、1つの要素に
    複数のidを指定してはいけない、となるのです。










    今回はここまで、お疲れ様でした!


    これから全てidでコーディングしている人を見つけたら、優しく「ちょいちょい」と
    言って教えてあげましょう!

    ・・・はい。3年前の自分です。
    よくサイト動いていたなぁ。と思います。


    次回はHTMLの正しい構造についてです。
    ではまた!
  • HTML

    インライン要素とブロック要素

    この記事をお勧めしたい方

    思った通りに表示されず困っている方!




    今日もお疲れです!
    ビギナー中里です!


    今回はインライン要素とブロック要素について学びたいと思います。


    HTMLにはインライン要素とブロック要素があるのですが、これを知っていないと

    「あ、勝手に改行された。」
    「あれ、これは改行されないぞ?」

    なんてことになり、悩んでしまうことがあります。



    本記事で得られるスキル

    • インライン要素とブロック要素の正しい使い分け





    それではいきましょう!










    インライン要素とブロック要素の違い

    インライン要素とブロック要素の違いは


    続く要素が改行されるかどうか


    で見分けることができます。
    実際に見てみましょう。



    div
    タグはブロック要素、
    span
    タグはインライン要素です。
    以下のコードを書いてみます。


    <div style="background-color: yellow;">divタグはブロック要素です。</div>
    <span style="background-color: lightgreen;">spanタグはインライン要素です。</span>
    <span style="background-color: lightblue;">spanタグはインライン要素です。</span>


    実際の表示はこうなります。


    divタグはブロック要素です。
    spanタグはインライン要素です。spanタグはインライン要素です。


    div
    で囲まれたテキストは
    br
    を書いていなくても改行されています。
    対して、
    span
    で囲まれた要素は改行されず、続けて表示されています。


    また、色を付けたことでわかるように

    基本的にブロック要素は
    幅いっぱいに領域を広げます。

    対してインライン要素は
    自分自身の大きさが領域になります。










    インライン要素

    インライン要素となるものをいくつが挙げてみます。

    • span
    • img
    • a
    • em
    • b
    • i
    • input


    これらのインライン要素は、ブロック要素の中に存在することがルールです。


    <!-- OK -->
    <div>
    <img src="path" alt="画像">
    </div>

    <!-- NG -->
    <body>
    <img src="path" alt="画像">
    </body>



    インライン要素の中にブロック要素を含めることはできません。
    インライン要素の入れ子は可能です。


    <!-- OK -->
    <div>
    <a href="path">
    <img src="path" alt="画像">
    </a>
    </div>

    <!-- NG -->
    <span>
    <div>これはダメ</div>
    </span>


    NGの書き方をしても、ブラウザで表示が大きく崩れることはありませんが
    文法的に間違いですので、気をつけましょう。
    Another HTMLなどのHTML採点では減点されます。










    ブロック要素

    ブロック要素となるものをいくつか挙げてみます。

    • div
    • p
    • h1-6
    • ul
    • li
    • table
    • form


    ブロック要素にはルールが多く、中に書くことのできる要素が
    決まっているものも多くあります。
    上に挙げた要素で確認してみましょう。





    ブロック要素内に書くことのできる要素

    div
     ー 全てのインライン要素、ブロック要素
    p
     ー 全てのインライン要素
    h1-6
     ー 全てのインライン要素
    ul
     ー li
    li
     ー 全てのインライン要素、ブロック要素
    table
     ー caption、thead、tfoot、tbody、tr
     ※tr内のth、tdには全てのインライン要素、ブロック要素を記述可能
    form
     ー formを除く全てのインライン要素、ブロック要素



    デザイン目的でブロック要素を使う場合、ほとんどが
    div
    になります。










    HTML5におけるインライン要素をブロック要素

    HTML5では、インライン要素とブロック要素という考え方は廃止されています。
    代わりにセクションイング・コンテンツやフロージング・コンテンツといった
    考え方が出てきましたが、これらを覚えるにあたり、従来のインライン要素と
    ブロック要素の考え方は十分に役に立ちます。
    また、HTML5でもひとまずは従来の考え方でコードを書いても問題ありません。










    今回はここまで、お疲れ様でした!


    ある程度の規模のサイトでは、文法チェックは頻繁に行われます。
    SEOという検索順位対策によるものですが、個人のサイトでも
    関係のない話ではありませんので、なるべく綺麗に書けるよう
    心がけたいですね。


    次回はclassとidについてです。
    ではまた!
  • HTML

    HTMLでコメントを書く

    この記事をお勧めしたい方

    このコードはなんだっけ?となりがちな方!




    今日もお疲れです!
    ビギナー中里です!


    HTML中級編を進めるにあたり、まずはコメントの書き方を覚えたいと思います!


    新しい事を覚えたばかりの頃は、1日しか経っていないのに
    既に忘れかけている・・・なんてことが(私は)あります。
    そんな時に少しのメモでも書いておけば、思い出すには十分な情報となります。

    また、規模の大きなサイトを作るとなると、1度書いたソースコードを
    1ヶ月後に見る、なんてこともあるでしょう。
    他の人が書いたコードを見ることも、もちろんありますね。
    そんな時のために、コメントを残しておくことは重要です。



    本記事で得られるスキル

    • コメントの書き方
    • コメントの活用方法



    前準備

    コメントが問題なく書けているか、確認するためのHTMLファイルを用意しましょう。





    それではいきます!










    コメントの書き方
    HTMLのコメントは

    <!--
    で始まり
    -->
    で終わります。

    この記号の間に書いた文字列がコメントとして扱われます。
    文字列の前後には半角スペースを入れましょう。


    では、実際に書いてみます。


    <p>この下の行はコメントです。</p>
    <!-- この行はコメントです -->
    <p>この上の行はブラウザでは表示されません。</p>


    ブラウザで表示を確認してみましょう。


    HTMLコメントの表示結果


    このように、コメント部分はブラウザでは表示されません。









    コメントの活用例
    コメントは個人のメモとして使うことができますが、少し便利な使い方もできます。
    いくつか例を挙げてみます。





    タグの始まりと終わりを表す
    下のようなコードがあったとします。


    <div class="content">
    <h1 class="head">見出し1</h1>
    <div class="inner">
    <h2 class="subHead">見出し2</h2>
    <p class="text">
    テキストです。
    </p>
    <ul class="list">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    </ul>
    </div>
    </div>


    これにタグの開始と終了を表すコメントを入れてみます。


    <!-- start content -->
    <div class="content">
    <h1 class="head">見出し1</h1>
    <!-- start inner -->
    <div class="inner">
    <h2 class="subHead">見出し2</h2>
    <p class="text">
    テキストです。
    </p>
    <ul class="list">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    </ul>
    </div>
    <!-- end inner -->
    </div>
    <!-- end content -->


    こうすることで、タグの開始と終わり、特に終わりの部分が
    どれに対するものなのかが分かりやすくなります。

    この例のコード量であればコメントはなくても問題ありませんが、コードが長く
    更に同じ閉じタグが5個、6個と重なってくると、断然見やすくなるでしょう。





    一時的にコードを控える
    一度コードを書いたものの、別の書き方が良いかもしれない、となった時に
    一時的にコードを控えるために使えます。


    <!-- 
    <div class="old">
    <p>前のコード</p>
    </div>
    -->
    <div class="new">
    <p>新しいコード</p>
    </div>


    新たにコードを書いた結果、前のものが良ければコメント用コードを外す。
    新たに書いたコードが良ければ、コメントごと古いコードを削除する。
    といった使い方ができます。





    後で処理するタスクを残す
    コードを書いていく上では、迷ったり、後回しにせざるを得ないこともあるでしょう。
    そんな時には、タスクの内容をコメントと決まったルールで残しておきます。


    <!-- TODO: 内容再確認 -->
    <p class="text">これでいいかな?</p>
    <ul class="list">
    <!-- TODO: リスト数洗い出し -->
    </ul>


    このHTMLファイル内で
    TODO
    と検索すると、残したタスクを
    すぐに見つけ出すことが出来ます。

    ※タスクのコメントには
    TODO
    がよく使われます。










    今回はここまで、お疲れ様でした!


    今回覚えたコメントの書き方で、今後の学習で必要だと思ったことは
    コードの中にメモをしていってください。

    また、今後大きなサイトを作り、運営していくときにもコメントは必ず役立ちます。



    次回はインライン要素とブロック要素についてです。
    ではまた!
  • HTML

    HTML中級編目録

    この記事をお勧めしたい方

    HTMLをもっと深く知りたい方!




    今日もお疲れです!
    ビギナー中里です!


    これからHTML中級編を開始します。
    HTML中級編で学習を予定しているのは以下の通りです。



    投稿予定
    • コメントを書く
    • インライン要素とブロック要素
    • classとid
    • HTMLの正しい構造
    • HTMLタグの規則
    • METAタグを使う
    • 属性を使う
    • フォームを作る
    • スマートフォンに対応する
    • HTMLの種類
    • HTMLの情報収集方法



    本編を通して得られるスキル
    • 個人でホームページを運営できるスキル





    ここからは本格的なHTML学習になります。

    ボリュームが多く、内容も深く難しいものとなってきますが、中級編を終えれば
    あなたは個人でホームページを運営するには十分なHTMLスキルを
    身につけているはずです。

    必要な時には読み返して、ゆっくりでもいいので確実に覚えていきましょう。


    それでは、次回からまたよろしくお願い致します!


    ※長くなるものは数パートに分ける場合があります。
     中級編の内容は後から追加、削除する場合があります。
  • CSS

    よく使うプロパティ(基礎編)

    この記事をお勧めしたい方

    プロパティって何があるの?とお困りの方!




    今日もお疲れです!
    ビギナー中里です!


    今回はCSS基礎編の最後、本当によく使うプロパティ
    10個ほど紹介したいと思います。



    本記事で得られるスキル

    • CSSを書く上で必ず使うプロパティの知識



    前準備

    p
    タグで囲まれたテキストを1つ用意しましょう。
    この要素にCSSプロパティを設定していきます。

    <p>ここにスタイルが当たります。</p>

    ここにスタイルが当たります。






    ではいきましょう!
    ※今回は特別にセレクタに直接スタイルを指定します










    background-color
    まずはわかりやすくするために背景色をつけてみます。


    p {
    background-color: #ffffff;
    }

    ここにスタイルが当たります。



    #ffffff
    という白を表すカラーコードを指定しました。

    色はwhiteなどの英単語でも指定することができますが、カラーコードを使うと
    より自由に色を指定することができます。
    WEBカラーピッカー」などで検索してみると便利なサイトが見つかります。





    border
    白背景だけでは分かりづらいので、境界線も引いてみます。


    p {
    border: solid 1px #4a77d3;
    }

    ここにスタイルが当たります。


    ※以降、スタイルは差分のみ記述していきます。



    border
    というプロパティの中に、スペース区切りで3つの値が書かれていますね。
    ここでは
    solid
    に続く2つの値に注目しましょう。

    1px
    は線の太さの指定、
    #4a77d3
    が線の色を指定しています。
    数値を変更して太さや色が変わるのを確かめてみると良いでしょう。





    color
    文字色も変更しておきましょう。


    p {
    color: #4a77d3;
    }

    ここにスタイルが当たります。



    境界線の色に合わせてみました。





    font-size
    今度は文字サイズを変更してみます。


    p {
    font-size: 24px;
    }

    ここにスタイルが当たります。



    数値で大きさを指定します。





    font-weight
    さらに太字にしてみましょう。


    p {
    font-weight: bold;
    }

    ここにスタイルが当たります。



    bold
    で太字、標準は
    normal
    です。





    text-align
    テキストを中央揃えにします。


    p {
    text-align: center;
    }

    ここにスタイルが当たります。



    left
    で左寄せ、
    right
    で右寄せの指定できます。





    width
    少しを狭めてみましょう。


    p {
    width: 450px;
    }

    ここにスタイルが当たります。



    数値で幅を指定します。





    height
    高さも変えてみましょう。


    p {
    height: 50px;
    }

    ここにスタイルが当たります。



    同じく数値で高さを指定します。





    padding-(方向)
    height
    ではテキストが垂直中央にならず、なんだか気持ち悪いですね。
    内側の余白を調整することで良い感じにしてみましょう。
    height
    の設定は消しておきます。


    p {
    padding-top: 20px;
    padding-bottom: 20px;
    }

    ここにスタイルが当たります。



    内側上下に20pxの余白が取れました。
    padding-(方向)
    の方向をleftやrightに変えれば左右の余白を取ることもできます。





    margin-(方向)
    外側の余白もとって、要素の周りの隙間を広げてみます。


    p {
    margin-top: 50px;
    margin-bottom: 50px;
    }

    ここにスタイルが当たります。



    今度は要素の外側上下に50pxの隙間が取れました。
    padding
    と同じく、rightやleftで左右の余白を取ることもできます。










    今回はここまで!
    お疲れ様でした!



    CSSプロパティは名前と効果が直感的で、すぐに覚えられそうではありませんか?
    まずはこんなプロパティがあるんだ、というところから覚えていきましょう。


    実は、今回紹介したプロパティでも、値の指定の仕方によって効果が変わります。
    カラーコードや数値は紹介した通り、borderのsolidや、pxなどの単位も変えられそうですね。

    また、要素によってはスタイルが当たらないものもあります。

    この辺りはCSS中級編以降で触れていこうと思います




    さて、次からはHTMLの中級編に入っていきますよ!
    ではまた!

WEB講座

講座一覧

HTML講座
CSS講座
JavaScript講座
  • 基礎編
  • 中級編
  • 上級編
  • 特別編

新着記事

記事検索

検索範囲

検索結果

  • ここに検索結果が表示されます。

閉じる

パソ子