2015年03月19日
川俣晶の縁側ソフトウェア技術雑記total 3839 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

問題はどこか? §

「結局問題なんだい?」

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

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

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

「気づいて良かったね」

Facebook

キーワード【 川俣晶の縁側ソフトウェア技術雑記
【技術雑記】の次のコンテンツ
2015年
03月
24日
低価格Windowsタブが開いたパンドラの箱とは何か
3days 0 count
total 3804 count
【技術雑記】の前のコンテンツ
2015年
02月
22日
現状のプログラム開発を斬る・これじゃいかんと痛感したのだ
3days 0 count
total 3975 count
2015年03月19日
川俣晶の縁側ソフトウェア技術雑記total 3839 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

問題はどこか? §

「結局問題なんだい?」

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

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

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

「気づいて良かったね」

Facebook

キーワード【 川俣晶の縁側ソフトウェア技術雑記
【技術雑記】の次のコンテンツ
2015年
03月
24日
低価格Windowsタブが開いたパンドラの箱とは何か
3days 0 count
total 3804 count
【技術雑記】の前のコンテンツ
2015年
02月
22日
現状のプログラム開発を斬る・これじゃいかんと痛感したのだ
3days 0 count
total 3975 count
【技術雑記】のコンテンツ全リスト【技術雑記】の表紙

このコンテンツを書いた川俣 晶へメッセージを送る

[メッセージ送信フォームを利用する]

メッセージ送信フォームを利用することで、川俣 晶に対してメッセージを送ることができます。

この機能は、100%確実に川俣 晶へメッセージを伝達するものではなく、また、確実に川俣 晶よりの返事を得られるものではないことにご注意ください。

このコンテンツへトラックバックするためのURL

http://mag.autumn.org/tb.aspx/20150319171040
サイトの表紙【技術雑記】の表紙【技術雑記】のコンテンツ全リスト 【技術雑記】の入手全リスト 【技術雑記】のRSS1.0形式の情報このサイトの全キーワードリスト 印刷用ページ

管理者: 川俣 晶連絡先

Powered by MagSite2 Version 0.25 (Alpha-Test) Copyright (c) 2004-2017 Pie Dey.Co.,Ltd.