HTML と CSS のテスト
TABLE 要素の列固定
counter-increment プロパティの利用
グーグル・カレンダーを表示した
楕円を斜めに表示し、画像に重ねた
カラフルな絵文字
アコーディオン式メニュー
Google MAP Static API による地図
display: grid
折り畳みメニュー
ul マーカーの inside 指定
縦書き
画像に文字を重ねた
a 要素を display: block でボタン化
a 要素の下線 > text-decoration: none
背景のグラデーション
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>1列目</td><td></td><td></td><td>4列目</td>
</tr>
<tr>
<td>1列目</td><td></td><td></td><td>4列目</td>
</tr>
</table>
CSS の最後にある疑似クラス ~:before が無くても列固定としては動作するが、これを付けないと、左罫線がチラチラすることを教えてくれたサイトがあった。
counter-increment プロパティの利用
番号付リストの場合、li 要素を margin: auto でセンタリングすると、マーカーとの間に異様な隙間ができてしまう。counter-increment プロパティを使うとその問題を解決できる。
ポイントは、
準備として li 要素のマーカーを消し、幅(width)を fit-content にしておく。
counter-increment と counter 関数の値に共通の適当な名前を付ける。ここでは「eel」にしたが、全角文字でも構わない。
疑似要素「::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>
結果
テキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
グーグル・カレンダーを表示した
手持ちのグーグル・アカウントを使ってグーグル・カレンダーを表示してみた。カレンダーはスマホのグーグル・カレンダー・アプリと同期している。
Webのグーグル・カレンダー・アプリ で、サイズや表示項目を設定してから iframe 要素を利用したソースをコピー&ペーストするようになっている。ここで設定しているサイズは、サイドバーの幅に合わせて、横は 150px、縦は 240px。
楕円を斜めに表示し、画像に重ねた
横長の div 要素に border を付与し、border-radius: 50% と宣言すると楕円ができるのは昨年(2021年)秋から知っていたが、transform: rotate(角度) を使うと楕円を斜めに表示できることがわかった。
そこで更にその楕円を画像の上に重ねてみた。グラデーションは、linear-gradient での角度の指定が transform: rotate に影響されるかどうかの確認のため。
● 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>
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>
(以下略)
折り畳みのメニュー・ボタンを作った。
● 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 と同値だから、結果としてセンタリング)
Copyright © fengxian 2022. All Rights Reserved.