タイトルを見て「何かしら」と思われる方は、興味範疇外の内容ですので、
どうぞ 読み飛ばしてください。←つて「いつも読み飛ばしているけど」なんて言わないで欲しい。
valign ( vertikal-align ) は、HTMLのタグのひとつです
ブログ内に表を使った歳、左・中央・右を上揃えにしたくてこのタグをよく使います。
ざっくり言うとこんな感じ⤵
topと書いてある位置に表示したい時は、valign="top"と指定すれば上寄せに表示され、
valign="middle" と指定すれば 中央揃えになり、
valign="bottom" とすれば下揃えになったのです、今までは。
ところが、この命令が効かなくなった
私は暇にまかせて、昔のコンテンツを4つのカテゴリーにわけてブログ分けをしています。
メインのブログを、料理・読書・動物・外出といった4つのカテゴリーごとにサブブログを作成中。
本のことしか興味がない方もいらっしゃるし、料理のことだけ読みたいという方もいらっしゃるだろうからです。
それで、昔の記事を読み返していて、表の上揃えが効いていないことに気がついたんです。
ネットで「valign効かない」など検索して調べたところ、
一軒だけ最新の情報として、こんな記事を書いていらっしゃるサイトさんがあった。
valign属性が廃止になった
という衝撃的なことが書いてあったのです。
HTML5の登場により、多くの要素や属性が廃止や変更になったそうで、valign属性もそのひとつ。
これからはcssでスタイリングをするしかないようです。
今でもHTML4前のブラウザなら、valign属性は効いているようですが、いずれ全部のPCで表示されなくなるらしい。
要するに。
現在、Valign属性で書いてある部分を書き換えないといけないということ。
がががかーん
ITの世界ってなんて人に優しくないのか、と思います。
折角構築したものが、無になってしまうなんて。
どういう風に表示が違うかの例
これが表の写真・番号・文章が同じ高さで上揃えになっているもの
【作り方】の赤茶色の線が一直線 ⤵
これが表の写真・番号・文章の高さがガタガタになってしまったもの
こうなってしまったものをひとつひとつ、訂正していかなければならないなんて。
こんなご無体な！
これは、、、大変なことです。｡｡｡＿|￣|○
他にも重要なことが沢山書かれていますが、まずこんなところから直していこうと思います。
/* CSSコード */
td {
height: 150px;
}
.baseline {
vertical-align: baseline;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
<!-- HTMLコード -->
<table border="1" width="100%">
<tr>
<th colspan="4">vertical-alignで位置を指定する</th>
</tr>
<tr>
<td class="baseline">1行目のベースラインを揃える</td>
<td class="top">上揃え</td>
<td class="middle">中央揃え</td>
<td class="bottom">下揃え</td>
</tr>
</table>
本日の昼ごはん
金ちゃんラーメン
我が家の卵の消費量はちょっと多すぎるかと、心配になる。
本日の夜ごはん
つまみ三品盛り
「あれ、昨日に似てる」と言われたので「気のせい」と言っておく。
三品盛りは、手を抜いたが、それ以外で取り戻す。
さあどうだ。結構手間かかってんのよ今日のおかずは。←何を誰に対して威張っているのか意味不明
鶏の手羽を塩糀に漬けて置いたものでスープにしました。
ポイントは、手羽の骨を切っておくこと。
骨付の髄の部分からいい出汁が出たように思います。
にんにくもひとかけ入れて、生姜と塩糀とで体が温まる一品に仕立てたつもり。
鯵の南蛮漬けを作っておきました。
これは鯵のカリカリ香ばしい味で、にんじんと玉ねぎを食べる料理だと思う。
なすを買ってきたしとのためにもう一品は、
ナスの生姜炒め+大根おろし+とろみ
南蛮漬けと味がかぶらないようにしたつもりだが、
やっぱり被っている。
