読み込み中 読み込み対象

読み込み中

Blogメニュー

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

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

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

(総記事数:43件)

新着記事一覧

  • CSS

    カスケードを理解しよう

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

    CSSの仕組みを知りたい方!




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


    今回はCSSの核心、カスケードに触れてみたいと思います。


    そもそもCSSとは何の略でしょうか。


    ずばり

    Cascading Style Sheets(カスケーディング スタイル シート)

    の略です。


    このCascadingがCSSを知るためには非常に重要になります。

    今回は説明が多くなりますが、とても大事なのでどうぞお付き合いください。



    本記事で得られるスキル

    • CSSで困らない為の必須知識











    カスケードとCSS

    カスケードを辞書で調べると

    小さい滝、滝のように落ちる、連続したもの

    といった意味があることがわかります。


    ここからCSSは

    上から下へ連続して流れるスタイルの群

    と考えることができます。


    これはどういうことなのか、見ていきましょう。










    CSSの流れ

    以下のようなCSSがあるとします。

    .text {
    color: red;
    font-size: 14px;
    font-weight: bold;
    }
    これは class="text" 属性を持つ要素です


    これに追記をしてみます。


    .text {
    color: red;
    font-size: 14px;
    font-weight: bold;
    }
    .text {
    color: blue;
    }
    これは class="text" 属性を持つ要素です


    すると、下に書いた
    color
    によってスタイルが上書きされていることがわかります。
    color
    以外のスタイルはそのまま当たっています。

    さらに追記してみましょう。


    .text {
    color: red;
    font-size: 14px;
    font-weight: bold;
    }
    .text {
    color: blue;
    }
    .text {
    color: green;
    font-size: 20px;
    }
    これは class="text" 属性を持つ要素です


    今度は更に下に書いた
    color
    font-size
    によってスタイルが上書きされました。

    このように、CSSでは下に書いたものほど優先してスタイルが当たります。
    これがCSSの流れであり、カスケードが意味することです。










    外部化されたCSSのカスケード

    では、上で書いたCSSを保存して、新たにCSSを作成し、読み込むとしましょう。
    以下のような状態です。

    <!-- 最初に書いたCSS-->
    <link rel="stylesheet" href="default.css">

    <!-- 新たに作成したCSS -->
    <link rel="stylesheet" href="override.css">


    そして、新たに作成したCSSに以下の記述をします。


    .text {
    color: gray;
    font-size: 14px;
    font-weight: normal;
    }
    これは class="text" 属性を持つ要素です


    すると、新たに作成したCSSによってスタイルが上書きされました。
    カスケードは1つのCSSファイル内だけでなく、複数のCSSファイル同士でも起きることがわかります。

    試しにCSSの読み込み順を逆にしてみましょう。


    <!-- 新たに作成したCSS -->
    <link rel="stylesheet" href="override.css">

    <!-- 最初に書いたCSS-->
    <link rel="stylesheet" href="default.css">
    これは class="text" 属性を持つ要素です


    予想した通り、後に読み込まれたCSSで、且つ一番下にあるスタイルが優先して当たりました。










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



    カスケードが分かれば、もうCSSをどんどん書いていくことができます!
    スタイルを当てたいHTML要素にclass属性を付与して、CSSファイルに
    スタイルを書いていきましょう。



    次回はよく使う、基本的なCSSのプロパティを紹介したいと思います。
    ではまた!
  • CSS

    CSSを外部化してみよう

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

    CSSを綺麗にまとめたい方!




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


    前回のCSSの書き方を知ろうで、インラインスタイル埋め込みスタイルという
    CSSの記述方法を覚えました。

    しかしこの方法では、スタイルの量が増えていくとHTMLファイルはどんどん膨れ上がり
    管理もし辛くなってきます。

    そこで、CSSの外部化をしてCSSを綺麗にまとめたいと思います!



    本記事で得られるスキル

    • 外部CSSファイルの作り方
    • 外部CSSファイルの読み込み方
    • CSSの書き方(おさらい)



    前準備
    CSSの書き方を知ろうで使用したHTMLファイルをそのまま使っていきます。
    HTMLファイルをテキストエディタとブラウザで開いておきましょう。



    それではいきます!
    ※ここから下では「外部CSS」のことを単に「CSS」と呼びます。










    CSSファイルの作り方
    テキストエディタで新規にファイルを作ります。
    以下の1行を入力しましょう。

    @charset "UTF-8";

    これはCSSファイルのお決まりなので、覚えておきましょう。
    この1行だけ書かれたファイルをテンプレートとして保存しておいても良いかもしれませんね。

    簡単に触れておくと
    このcssファイルはUTF-8で書きますよ!
    という宣言になります。

    この1行は必ずCSSファイルの先頭に記述します。



    では、ファイルを保存していきましょう。

    保存場所はHTMLファイルと同じ場所にしてください。
    ファイル名は
    style.css
    としましょう。










    CSSファイルの読み込み方
    CSSファイルが用意できたら、HTMLファイルから読み込んであげる必要があります。

    HTMLの
    <head>
    内を確認してみましょう。

    <head>
    <meta charset="UTF-8">
    <title>CSSの勉強始めます</title>
    <style>
    p {
    text-align: center;
    }
    .fontred {
    color: red;
    }
    .fontbold {
    font-weight: bold;
    }
    </style>
    </head>


    <style>...</style>
    の部分を外部化しますので、一旦削除してしまいましょう。


    <head>
    <meta charset="UTF-8">
    <title>CSSの勉強始めます</title>
    </head>


    そして、
    <title>
    の下に以下の1行を追加します。


    <link rel="stylesheet" href="style.css">


    これで先ほど作成した
    style.css
    が読み込まれます。
    <link>
    タグについて、少し詳しく見ていきましょう。





    linkタグ
    <link>
    タグは閉じタグが不要です。
    今回は
    rel
    href
    という属性を指定しています。


    rel
    (relation)属性の値には、HTMLとの関係性を記述します。
    CSSの場合は
    stylesheet
    となります。


    href
    (HyperText Reference)属性の値には、HTMLからの参照を記述します。
    CSSファイルはHTMLファイルと同じ場所に保存したので
    style.css
    となります。










    CSSの書き方
    では、CSSを書いていきましょう!
    といっても、書く内容は先ほどHTMLから削除したものと全く同じです。
    おさらいとして、もう一度書いてみましょう。

    現在、CSSファイルには
    @charset "UTF-8";
    の1行が書かれています。
    この下に各スタイルを書きます。

    @charset "UTF-8";

    p {
    text-align: center;
    }
    .fontred {
    color: red;
    }
    .fontbold {
    font-weight: bold;
    }

    これでブラウザを更新してみましょう。
    今までと同じようにスタイルが当たっているはずです。

    埋め込みスタイル


    もしもスタイルが当たっていない場合は、CSSの読み込み方をもう一度確認してみましょう。










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



    これでHTMLはHTMLファイルに、CSSはCSSファイルにそれぞれまとめることが出来ますね。

    CSSは1枚だけでなく、何枚でも読み込みができるため、1ファイルが肥大化して
    管理し辛くならないように、機能ごとに分けることもあります。
    といっても、1000行以内であれば1ファイルに収めて良いでしょう。



    次回はカスケード、CSSの核心に迫っていきますよ!
    ではまた!
  • CSS

    CSSの書き方を知ろう

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

    今日初めてCSSを勉強する方!




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

    本日はCSS基礎編から、CSSの書き方について記述していきます。



    本記事で得られるスキル
    • CSSの基本的な書き方
    • インラインスタイルについて
    • 埋め込みスタイルについて
    • セレクタの指定方法



    前準備
    実際にCSSでスタイルが変わることを確認しながら進めたいですね。
    簡単なhtmlファイルを用意してありますので、こちらをダウンロードして進めましょう。

    CSSの書き方用サンプルhtmlファイルをダウンロード

    ファイルをテキストエディタとブラウザで開いておきましょう。

    CSS基礎編勉強用



    それではいきます!










    文字色を変えてみる
    文字の色を変えてみたり、
    の部分を赤色にしてみます。
    以下のようにhtmlを書き換えてみましょう。


    <span style="color: red;">文字の色を変えてみたり、</span>


    ブラウザを更新してみてください。
    文字の色を変えてみたり、
    の部分が赤色に変化しています。

    cssで文字色変更










    文字を太くする
    続いて、
    文字を太くしてみます。
    の部分を太字にしてみます。
    以下のようにhtmlを書き換えてみましょう。


    <span style="font-weight: bold;">文字を太くしてみます。</span>


    ブラウザを更新すると太字に変化しています。

    CSSで太字指定










    中央寄せにする
    さらにテキスト全体を中央寄せにしてみます。
    以下のようにhtmlを書き換えてみましょう。


    <p style="text-align: center;">
    <span style="red">文字の色を変えてみたり、</span>



    ブラウザを更新するとテキストが中央寄せになります。

    CSSでセンタリング










    インラインスタイル
    ここまでの方法では、htmlタグに
    style
    という属性を付けました。
    このように、htmlタグに直接書くスタイルを

    インラインスタイル

    と呼びます。










    埋め込みスタイル
    インラインスタイル以外にもスタイルを当てる方法があります。
    一度、書き換えたhtmlを元に戻しましょう。


    <p>
    <span>文字の色を変えてみたり、</span>
    <span>文字を太くしてみます。</span><br>
    さらに、中央寄せにしてみます。
    </p>


    そして、
    head
    内を以下のように書き換えてみましょう。


    <head>
    <meta charset="UTF-8">
    <title>CSSの勉強始めます</title>
    <!-- ここから追加(この行は不要です) -->
    <style>
    p {
    text-align: center;
    }
    span {
    color: red;
    font-weight: bold;
    }
    </style>
    </head>


    ブラウザを更新すると、テキストが中央揃え、1行目が全て赤色、太字になっています。

    埋め込みスタイル

    分解して見ていきましょう。





    styleタグ
    <style></style>
    と書いてコードを囲みました。
    これは、中に書かれたコードの通りにスタイルを当てるよ!という宣言になります。
    style
    タグはなるべく
    head
    内に書くようにしましょう。





    セレクタ指定
    p { style }
    span { style }
    というように、htmlタグ名が書かれて、波括弧の中にまたコードが書かれていますね。
    これは、p(セレクタ)に対して style(スタイル)を当てるよ!という意味になります。

    この通りに、
    p
    タグの中は中央寄せになり、
    span
    タグの中は赤色、太字になりました。




    しかし、これでは最初に作っていたものと少し違いますね。

    文字の色を変えてみたり、
    の部分を赤色に、
    文字を太くしてみます。
    の部分を太字にしたいです。

    埋め込みスタイルでももちろんこれは可能です!










    セレクタの指定方法
    上の方法では、
    p
    span
    などのタグ名をセレクタとして指定していました。
    htmlでは、セレクタとして指定するための属性が用意されています。

    まず、html側を以下のように書き換えてみましょう。


    <span class="fontred">文字の色を変えてみたり、</span>
    <span class="fontbold">文字を太くしてみます。</span>


    続いて
    style
    タグの中身を書き換えます。


    span {
    color: red;
    font-weight: bold;
    }


    この記述を消して


    .fontred {
    color: red;
    }
    .fontbold {
    font-weight: bold;
    }


    とします。
    これでブラウザで確認すると期待通りにスタイルが反映されています。

    セレクタでスタイル指定


    このように、htmlタグに
    class="val"
    の形で属性を付け、スタイル側で
    .val { style }
    の形でスタイルを指定するのが一般的です。
    スタイル側のドット(
    .
    )は
    class
    属性を指定するためのものです。



    実は他の属性を付けてスタイルを指定することも出来るのですが、ほとんどは
    class
    属性です。
    ひとまずスタイルを当てる時は
    class
    属性を使う!と覚えておいて良いです。

    タグ名でスタイルを当てるのもなるべく避けたほうが良いです。
    理由はコード上に現れる全てのタグにスタイルが当たってしまうためです。
    なので、
    p
    タグにも
    class
    属性と任意の値を付けてスタイルを
    書き換えておきましょう。





    セレクタ指定の注意点

    • ドット(
      .
      )に続く文字が数字の場合はスタイルが当たりません。
    • class
      の値はなんでも良いのですが、一般的には半角英語の小文字が使われます。











    今回はここまでとなります。
    お疲れ様でした!


    今回の内容だけでも、あとはスタイルで何が出来るのかを調べていくだけで
    かなり豊かな表現が出来るようになります。

    ただ、記述量が増えてくるとhead内のstyleとhtmlを行き来するだけでも大変ですよね。
    インラインスタイルで1つ1つ書いていくのも効率的ではありません。
    そこで、CSSを外部化することになります。


    ということで、次回はCSSを外部化です!
    ではまた!
  • CSS

    CSS基礎編目録

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

    CSSを0から学びたい方!




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

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



    投稿予定
    • CSSの書き方
    • CSSの外部化
    • カスケードを理解しよう
    • よく使うプロパティ(基礎編)




    本編を通して得られるスキル
    • CSSの基本であり、最も重要な知識




    CSSはテクニックが多く、それ故に想定と違う動きをしてしまうことがとても多いです。

    基礎編で特に重要なのはカスケードです。
    これを理解すれば、CSSの基礎を身につけたと言えるでしょう。

    基礎編がしっかりと理解できたら、中級編で更にテクニックと重要な項目を覚えていきましょう。
    ゆっくりと、確実に!

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



    2016/02/25 投稿予定の内容を変更
  • 雑記

    独学エンジニア成長目録25

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    おわりに:今後の活動

    2015年アドベントカレンダー、最後の投稿になります。
    今年1年で学んだ、フロントエンド周りの技術をさらっと紹介させていただきました。

    本当に色々なことを学んだ1年で、私個人の作業効率はものすごく上がりました。
    ただ同時に、フロントエンドという領域にはこんなにも多くの技術が、こんなにも
    早いペースで生まれているのかと実感した1年でもありました。





    私自身の今後

    今後ですが、技術は追っていきたいと思います。
    ただ、自分にとって本当に必要だと思ったものに絞ります。

    新たな技術は次々出てくるでしょう。
    今はよくても、いずれついていけなくなる時が来ます。

    その時に、自分がこれがあるから戦える!という、自分だけの武器を持っていたいです。
    これから数年の間に見つけたいと思います。





    当ブログの今後

    今後も独学の応援ブログとして運営を続けていきます。

    当ブログは、数日でWEB知識を身につけることを目的としていません。
    その代わり、少しずつでも記事を見ながら勉強することで、確実に
    しっかりとした技術を身につけられることを目指します。

    あなたにしっかりとした技術をお伝えする為に、私自身もまだまだ
    成長しなければならないと思っています。

    そのために、私も独学勉強しますよ!





    アドベントカレンダー記事を書くにあたり、沢山の技術者の方の記事を
    参考にさせていただきました。
    とても勉強になりました。

    やはり、独学でもイケますよ!

WEB講座

講座一覧

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

新着記事

記事検索

検索範囲

検索結果

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

閉じる

パソ子