追加:2020/07/10
作成:2020/06/27

風仙洞


HTML と CSS のテスト

  1. アコーディオン式メニュー
  2. Google MAP Static API による地図
  3. display: grid
  4. 折り畳みメニュー
  5. ul マーカーの inside 指定
  6. 縦書き
  7. 画像に文字を重ねた
  8. a 要素を display: block でボタン化
  9. a 要素の下線 > text-decoration: none
  10. 背景のグラデーション

アコーディオン式メニュー

label 要素と input 要素を使ってアコーディオン式開閉メニューを作ってみた。残念ながら、三角印(▼/▶)は自動では付かないので、「▼」を文字として入力しておかなければならない。しかも HTML と CSS だけでは「▶」と切り替わらないし......。

● CSS
  • LABEL {display: block; width: 140px; cursor: pointer;
    padding: 2px 5px; margin-left: 3px; font-weight: bold;
    border: black solid 2px; border-radius: 5px; font-size: 105%;
    }
  • input[type="checkbox"] {display: none; width: 140px;}
  • UL.acm-menu {list-style-type: none; width: 140px;
    margin: 3px 0 3px 0; padding: 0; height: 0;
    overflow: hidden; transition: height 0.6s;}
  • #acm1:checked + ul {height: auto;}
  • UL.acm-menu LI {margin: 5px 5px 5px 15px; padding: 0;
    line-height: 2em;}
  • UL.acm-menu A {display: block; text-decoration: none;
    padding: 0;}
● HTML
  • <aside style="width: 160px; margin: auto;">
  • <label for="acm1">▼ 古代史関係</label>
  • <input type="checkbox" id="acm1">
  • <ul class="acm-menu">
    <li><a href="../ancient/yi-shandao-wei-guoyi.html">
    <img src="../images/ban_yishandaoweiguoyi.gif"
    class="menu-item" alt="「『依山島為国邑』とは?」" width="120"
    height="30"></a></li>
  • (中略)
  • </ul>
  • </aside>

Google MAP Static API による地図

Google MAP Static API を使って地図を表示してみた。事前準備として Google Cloud Platform で登録(メールアドレス、名前、住所、クレジットカード)し、API Key を発行してもらうことが必要になる。API の利用は有料だが、初回登録のクーポンがあり、毎月一定量までは無料。

使い方は、img 要素の src 属性に記述する。

  • center:地図の中心となる目標を設定(marker が設定されている場合は、たしか自動計算されるので省略可能だったような......。)
  • zoom でズーム量、size で横x縦の表示サイズ(px)を記述、maptype で roadmap、terrain(地形)、hybrid、satellite(衛星写真) を選択
  • markers では、色(black, brown, green, purple, yellow, blue, gray, orange, red, white)、ラベル(A-Z,0-9)、緯度・経度を記述
  • key では Google Cloud Platform 発行のキーを入力
● HTML
  • <p class="center">
  • <img src="https://maps.googleapis.com/maps/api/staticmap?
    center=33.307984,130.364586
    &zoom=10&size=400x300&maptype=hybrid
    &markers=color:blue%7Clabel:A%7C33.329293,130.384198
    &markers=color:green%7Clabel:1%7C33.423424,130.598615
    &markers=color:red%7Clabel:Z%7C33.286241,130.116352
    &key=YOUR_API_KEY" alt="Google MAP Static API による地図">
  • </p>

Google MAP Static API による地図


display: grid

display: grid を利用して記事を2列に配置した。section 要素や article 要素を使った場合、見出し要素(h2~h6)を使わないと W3C の Nu Validator に怒られるので注意。

● CSS
  • div#kiji {display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr; width: 540px; grid-gap: 10px;
    margin: auto; border: black solid 1px;}
  • section.merit {padding: 10px; width: 240px; height: 120px;
    border: brown solid 1px; text-align: left}
● HTML
  • <div id="kiji">
  • <section class="merit">
    <h4>記事1</h4>
    <p></p>
  • </section>
  • (以下略)

記事1

記事2

記事3

記事4


折り畳みメニュー

折り畳みのメニュー・ボタンを作った。

● CSS
  • SUMMARY.hidden-open {width: 150px; margin: 10px auto;
    line-height: 1.8em; font-weight: bold; font-size: 100%;
    border: solid black 2px; border-radius: 5px;}
  • UL.letter-menu {width: 130px; margin: 15px 10px;
    padding-left: 10px; list-style-type: none; text-align: left;
    font-size: 100%; line-height: 1.8em;}
  • UL.image-menu {width: 130px; margin: 10px auto;
    line-height: 1.8em; list-style-type: none; padding-left: 0;}
  • IMG.menu-item {border-radius: 4px; border: 0;
    margin: 3px 0 0 3px;}
● HTML
  • <details class="vnavi">
  • <summary class="hidden-open">
    その他</summary>
  • <ul class="image-menu">
  • <li><a href="../misc/link.html">
    <img src="../images/ban_link.gif" width="120" height="25" class="menu-item" alt="リンクのページへ"</a> </li>
  • (中略)
  • </ul>
  • <br class="both">
  • </details>
その他
  • 壁FAQのページへ
  • リンクのページへ
  • 自己紹介のページへ


ul マーカー の inside 指定

ul のマーカー表示位置を表示領域の内側にした。

● HTML
  • <ul style="margin-left: 0; padding-left: 2em;
    list-style-position: inside; text-align: left;">
  • (以下略)
  • 本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。

縦書きのテスト

● HTML
  • <p style="writing-mode: vertical-rl; height: 180px;
    border: black solid 1px; text-align: left; padding: 10px;">
  • (中略)
  • </p>

本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。


写真に文字を重ねた。

● HTML
  • <div style="position: relative; width: 300px; margin: 10px auto;">
  • <img src="../images2/summer-lily.jpg" width="300"
    height="221" alt="ユリの写真">
  • <p style="position: absolute; top: 90px; left: 100px;
    color: red;">
  • ユリの写真
  • </p>
  • </div>
ユリの写真

ユリの写真


a 要素を display: block でボタン化

リンク範囲を幅 300px の BOX にした上で、角を丸めた。

● CSS
  • ul#search {width: 350px; margin: auto;}
  • ul#search li {list-style-type: none; border: navy solid 1px;
    line-height: 2em; margin: 5px; width: 300px;
    border-radius: 5px;}
  • ul#search a {display: block;}

a 要素の下線 > text-decoration: none

a 要素の下線は text-decoration: none よりも優先する。

● HTML
  • <p>
  • <a href="link.html" style="text-decoration: underline;">
    リンクの<span style="text-decoration: none;">
    ページ</span></a> </p>

リンクのページ


背景色のグラデーション

背景色を青系の 55aaff から white にグラデーションを掛け、四隅を 10px 丸めた。

● HTML
  • <ul class="usual" style="margin: 10px; padding-right: 10px;
    background-image: linear-gradient(to right, #55aaff,white);
    border-radius: 10px;">
  • ヘッダ部、フッタ部も含めた全体を「content」という id を持った DIV 要素というスタイル・コンテナとして定義した上で全体の横幅を 800px 確保
  • 「content」という id を持った DIV 全体を CSS の margin: auto でセンタリング(左右のマージンが auto と同値だから、結果としてセンタリング)