追加：2023/02/24｜初出：2020/06/27

追加：2023/02/24
初出：2020/06/27

風仙洞

HTML と CSS のテスト

  1. TABLE 要素の列固定
  2. counter-increment プロパティの利用
  3. グーグル・カレンダーを表示した
  4. 楕円を斜めに表示し、画像に重ねた
  5. カラフルな絵文字
  6. アコーディオン式メニュー
  7. Google MAP Static API による地図
  8. display: grid
  9. 折り畳みメニュー
  10. ul マーカーの inside 指定
  11. 縦書き
  12. 画像に文字を重ねた
  13. a 要素を display: block でボタン化
  14. a 要素の下線 ＞ text-decoration: none
  15. 背景のグラデーション

TABLE 要素の列固定

表を作成しているときに、セルの横幅の合計が、MAIN 要素の横幅よりも大きくなってしまった！なんて時に、昔は JavaScript を使っていたそうである。しかし、position: sticky というへんてこりんな宣言（プロパティ＋値）が使えるようになったおかげで、私にも列固定ができるようになった。

なお、この宣言を使った場合、left: 0 も指定しないと、縦スクロールに追随してくれないので注意。

１列目 ４列目
１列目 ４列目
● CSS
  • DIV.container {width: 450px; overflow: auto; margin: 20px auto;}
  • TABLE.fixed-column {border-collapse: collapse; width: 613px;}
  • .fixed-column TD {width: 150px; border: black solid 1px;
    height: 50px;}
  • .fixed-column TD:first-child {background-color: khaki;
    color: black; position: sticky; left: 0;}
  • .fixed-column TD:first-child:before {
    content: ""; position: absolute;
    top: -1px; left: -1px; width: 100%; height: 100%;
    border: 1px solid black;}
● HTML
  • <div class="container">
  • <table class="fixed-column">
  • <tr>
    <td>１列目</td><td></td><td></td><td>４列目</td>
  • </tr>
  • <tr>
    <td>１列目</td><td></td><td></td><td>４列目</td>
  • </tr>
  • </table>

CSS の最後にある疑似クラス ～:before が無くても列固定としては動作するが、これを付けないと、左罫線がチラチラすることを教えてくれたサイトがあった。

counter-increment プロパティの利用

番号付リストの場合、li 要素を margin: auto でセンタリングすると、マーカーとの間に異様な隙間ができてしまう。counter-increment プロパティを使うとその問題を解決できる。

ポイントは、

  1. 準備として li 要素のマーカーを消し、幅（width）を fit-content にしておく。
  2. counter-increment と counter 関数の値に共通の適当な名前を付ける。ここでは「eel」にしたが、全角文字でも構わない。
  3. 疑似要素「::before」を利用し、content プロパティの値である counter 関数の前後にダブルクォテーションで括って付加したい文字列を指定する。
● CSS
  • ol.auto-count {padding-left: 0;}
  • ol.auto-count li {list-style-type: none; width: fit-content;
    margin: 2px auto; counter-increment: eel;}
  • .auto-count li::before {content: "No."counter(eel)"： ";}
● HTML
  • <ol class="auto-count">
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
  • </ol>
結果
  1. テキストテキストテキスト
  2. テキストテキストテキストテキストテキストテキスト
  3. テキストテキストテキストテキストテキストテキスト
  4. テキストテキストテキストテキストテキスト

グーグル・カレンダーを表示した

手持ちのグーグル・アカウントを使ってグーグル・カレンダーを表示してみた。カレンダーはスマホのグーグル・カレンダー・アプリと同期している。

Ｗｅｂのグーグル・カレンダー・アプリで、サイズや表示項目を設定してから iframe 要素を利用したソースをコピー＆ペーストするようになっている。ここで設定しているサイズは、サイドバーの幅に合わせて、横は 150px、縦は 240px。

楕円を斜めに表示し、画像に重ねた

横長の div 要素に border を付与し、border-radius: 50% と宣言すると楕円ができるのは昨年（2021年）秋から知っていたが、transform: rotate(角度) を使うと楕円を斜めに表示できることがわかった。

そこで更にその楕円を画像の上に重ねてみた。グラデーションは、linear-gradient での角度の指定が transform: rotate に影響されるかどうかの確認のため。

Google MAP Static API による地図
● SOURCE
  • ※ 重ねるための前提条件：親要素（今回の場合 figure 要素）に CSS で予め position: relative を付与しておく。
  • ※ ↓赤字部分が図形の回転に関係する部分、緑字部分が図形の重ね合わせに関係する部分。

<div style="position: absolute; width: 100px; height: 50px;
border: red solid 2px; border-radius: 50%;
top: 160px; left: 230px; transform: rotate(135deg);
background-image: linear-gradient(90deg, navy, transparent, black);"></div>

カラフルな絵文字

Shift_JIS を文字コードとして指定していた頃と違い、UTF-8 を文字コードに指定することで、unicode の文字コード表に定義された大量の絵文字が利用可能になっている。

ATOK の文字パレットでの unicode 表「その他の記号」グループ

多くの絵文字は「その他の記号」グループにあるが、他のグループにもある。そして、私は遅ればせにも昨年(2021年)秋になって気がついたのだが、一部はモノクロではなく、色つきなのだ。

下に色つき絵文字の例を拡大表示する。

✅⛪⏳⏰⏩⚾⛵⛽⛹✊✋❎☕☔⚡⛺✨⏱

モノクロの絵文字も面白い。

⏏➲⛝⛭⛯⛫⛏➳✥⛸⛷✉✌☑✍❏❍⛩✬✤❀❦⛈⛱✬❁⛋⚠♽⚕♘⛨⚓♨☃☚☒☣☫✈➦☘☯⚙☀☘

フォントサイズを 150% にしているが、文字の大きさが結構バラバラ(^^;;;

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

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：地図の中心となる目標を設定（&markers が設定されている場合は、たしか自動計算されるので省略可能だったような......。）
  • &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 の説明では見やすいように区切りの良いところで改行しているが、実際には勝手に改行すると指定通りにならない。
● 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>
その他
  • 壁ＦＡＱのページへ
  • リンクのページへ
  • 自己紹介のページへ

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 と同値だから、結果としてセンタリング）