2015年03月19日
▲→川俣晶の縁側→ソフトウェア→技術雑記 total 6014 count

今どきのHTML/CSSを少しお勉強してみる

Written By: 川俣 晶連絡先

　必要なことが実現出来ていることと、それが十分にコンパクトなコードかは別問題なので、少しお勉強。かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技を参考に、いくつかサンプルソースを作成してみました。スクリプトは使用していません。HTML/CSSのみで実現している機能です。

ソースコード §

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>HTML/CSS Sample</title>

    <link rel="stylesheet" href="app.css" type="text/css" />

    <script src="app.js"></script>

</head>

<body>

    <h1>クリック可能なdiv</h1>

    <a href="http://mag.autumn.org/">

        <div>This is a div</div>

    </a>

    <h1>偶数奇数でスタイルを変える</h1>

    <style>

        li:nth-child(odd) {

            background: #ff0;

        }

        li:nth-child(even) {

            background: #0ff;

        }

    </style>

    <ul>

        <li>LINE1</li>

        <li>LINE2</li>

        <li>LINE3</li>

        <li>LINE4</li>

    </ul>

    <h1>横に並んだDiv要素の高さを揃える</h1>

    <style>

        .main {

            display: -webkit-flex;

            display: flex;

        }

        .sec {

            background-color:#f00;

            margin:1em;

        }

    </style>

    <div class="main">

        <sction class="sec">

            <p>PART-1</p>

        </sction>

        <sction class="sec">

            <p style="font-size:2em;">PART-2</p>

        </sction>

        <sction class="sec">

            <p style="font-size:3em;">PART-3</p>

        </sction>

    </div>

    <h1>要素の中央に揃える</h1>

    <style>

        .main2 {

          display: flex;

          justify-content: center;

          align-items: center;

          height: 400px;

          background-color:#f00;

        }

        .sec2 {

            background-color:#00f;

        }

    </style>

    <div class="main2">

        <sction class="sec2">

            <p>CENTER ME</p>

        </sction>

    </div>

</body>

</html>

結果 §

クリック可能なdiv

This is a div

偶数奇数でスタイルを変える

  • LINE1
  • LINE2
  • LINE3
  • LINE4

横に並んだDiv要素の高さを揃える

PART-1

PART-2

PART-3

要素の中央に揃える

CENTER ME

問題はどこか? §

「結局問題なんだい?」

「難解も検索した機能なのに、全く別の実現方法があったことに驚いたのだ。やはり、もっと色々世の中を知る必要があると思ったよ」

「それで、いろいろ分かった?」

「そうだね。偶数奇数でスタイルを変えるなんて、自分で書いたら絶対にスクリプトで実現している」

「気づいて良かったね」