CSS・Webデザインの最近のブログ記事

2020年2月13日 (木曜日)

【HTML5.2】dlの中にdiv入れられるようになったことが嬉しくて...

このエントリーをはてなブックマークに追加 Check

div as a child of a dl element.

とんでもなくご無沙汰な更新になってしまいました。いつもブログを更新しなくちゃなーと思いつつ、スマホばっかり触って家では全然PCに障らなくなってしまいました。このままではいけませんね...反省です。

今回は自分の備忘録にもしておこうとHTMLのテクニカルな内容になります。

趣味全開の内容も今後アップしていきます(たぶん)

では、今回の内容です☺

HTML5.2で追加された内容に
「dlの子要素としてdivが追加できる」
という内容があります。

HTML5.2が勧告された時には一応内容をチェックしていたはずなのに、なぜかこの内容が頭から抜けていて、最近HTML5.2のことを調べなおす機会があり、この事実を再確認したわけです。

∑(゚∇゚|||)はぁうっ!

ってなりました。なりましたよ。
HTML5.2の追加点を丁寧に解説してくれているサイトをいくつか見ましたが、この内容ってわりとシレッと説明されているだけのところが多いんですけど、これ、めっちゃ便利じゃないですか??

ちなみにdlは定義リスト(用語説明リスト)です。

用語をdt、その説明をddでマークアップして、その全体をdlで囲みます。

例)

<dl>
<dt>肉まん</dt>
<dd>中華まんの一種、中に肉が入っている。うまい</dd>
<dt>あんまん</dt>
<dd>中華まんの一種、中にあんこが入っている。あまい</dd>
<dt>ピザまん</dt>
<dd>中華まんの一種、ピザソースが入っている。うまい</dd>
</dl>

これが基本形です。
特にCSSを指定しないブラウザでは、以下のように表示されます。

用語解説リストのプレビュー例

で、ですね、このリストをサイトを作っていると使いたいところがちょくちょく出てくるわけです。

例えば...

<h2>サービス一覧</h2>
<dl>
<dt>初期設定</dt>
<dd>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</dd>
<dt>サポート</dt>
<dd>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</dd>
<dt>訪問修理</dt>
<dd>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</dd>
</dl>

このままブラウザで表示をすると以下のような感じです。

用語解説リストのプレビュー例

でも、実際にデザインとしては以下のように仕上げたいと思った場合...

完成見本

これまではdlの子要素にはdtとddしか置くことができず、このデザインをdlのリストから作成するのは無理でした(めちゃくちゃCSSを凝って書けばできそうですけど現実的じゃない)

なので、これまではしぶしぶdl、dt、ddではなく、小見出しと本文でdivやらsectionやらで囲んで処理をしていました。

<h2>サービス一覧</h2>

<section>
<h3>初期設定</h3>
<p>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</p>
</section>

<section>
<h3>サポート</h3>
<p>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</p>
</section>

<section>
<h3>訪問修理</h3>
<p>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</p>
</section>

上記のsectionにクラスなんかをつけてフロートやらインラインブロックやらで並べるイメージです。

これで一応、思った体裁を作ることはできていたのですが、やっぱりCSSを外した素のHTMLで見れば、文章の流れ的にここは小見出し+本文よりも用語説明リストの方がしっくりくるわけです。
これまで私は、ずーーっとこのもやもやを抱えながらページを作っていたわけです。

が!今回のdlの中にdivを入れられることによって、下記のマークアップが可能になりました。

<h2>サービス一覧</h2>
<dl>
<div>
<dt>初期設定</dt>
<dd>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</dd>
</div>

<div>
<dt>サポート</dt>
<dd>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</dd>
</div>

<div>
<dt>訪問修理</dt>
<dd>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</dd>
</div>
</dl>

で、ここに以下のCSSをかけてあげるわけです。

dl {
display:flex;
justify-content: space-around;
}
dl div {
width:30%;
}
dt {
text-align:center;
font-weight:bold;
}
dd {
text-align:justify;
margin:0;
}

完成見本

これで、もうめちゃくちゃスッキリです!
もやもや解消です!

これからは、積極的に使っていこうと思います。

これ、もっと注目されてもいい変更点なんだと思うんだけどなぁ...

2016年11月 2日 (水曜日)

【書籍】沈黙のWebライティング

このエントリーをはてなブックマークに追加 Check

沈黙のWebライティング

今度、CSS niteでWebライティングをテーマにしたLPをするそうな。

うわぁ、いきたい!すごく行きたい!と思ったものの「会社は(受講料)出してくれないだろうなぁ」と迷っていたら満席になってしまいました。。

んじゃ、せめて「沈黙のWebライティング」の書籍を買いたい!と会社の近くの書店と、地元の書店を巡りましたが、どこにも置いておらず......orz

今すぐに読みたいからAmazonじゃだめだ!今日買うんだ!と意気込むとコレですよ。。

とりあえず、衝動を抑えるためにサイトを一気読みしました。すげぇ、勉強になります。

ちょうど会社のWebサイトをフルリニューアルし始めたタイミングなので、ガチで参考にさせていただきます。

Webサイトのアクセスやコンバージョン率にお悩みの方、ぜひご一読を。

  1. 沈黙のWebマーケティング
  2. 沈黙のWebライティング

ちなみに話が一応続いていますので、1→2の順で読んでいただくと尚いい感じです。

どちらも書籍も販売されています。今回私が見つけられなかったのが、この書籍。書籍版だと、さらに詳しい解説が載っているらしいので、それが読みたいんですよねぇ...

2016年2月 4日 (木曜日)

【Web】Movable typeからWORDPRESSへ乗り換えるか否か

このエントリーをはてなブックマークに追加 Check

MTからWPへ

すごく悩んでいます。

仕事で以前WORDPRESSでつくった会社のブログ。

ずーっと当時のデフォルトテンプレートを改造したものを使ってましたが、最近バージョンをアップし、テーマを変更して改修しました。

久しぶりに触ったら、いやはやすこぶる使いやすくなってるWORDPRESS。

このブログは、2005年からずーっとMovable typeで運用しています。

が、さすがに10年以上続いているだけあってエントリー数が4000を超えています。

で、再構築がままならないわけです。

もう数か月、「すべてを再構築」なんてやってません。

というわけで、MTからWPへの移行を検討中です。

ネットで調べると現在のパーマリンクを維持したままWPに乗り換えるのは結構いけるみたいで。。。

ただ、万が一失敗してこれまでの積み上げてきたものが無くなったりするのはさすがに怖く......うーーーむ......

2015年7月26日 (日曜日)

【MT】バージョン6.1.2にアップグレードしてみました

このエントリーをはてなブックマークに追加 Check

MT6にアップしました

先日決心したMT6へのアップグレード。

今までが、結構ひどい思いをしているので、ちょっと尻込みしながらの実行でしたが、意外とあっさりとアップできちゃいました。

以前アップグレードした時よりも、かなり親切設計になっていまして、これまでのデータに上書きせずに、別のディレクトリにインストールして、まるごと差替える、という作業でした。

そのため、失敗したら元にもどせばいいわけで、サクッと作業は終了。

管理画面などの操作感もあまり変わらず、違和感なく作業ができます。

あとは、気のせいか若干公開時の再構築が速くなったような気もします。

さて、あとは過去の記事もまとめて再構築する機会が出た時に、トラブルが起きないか?ですねぇ...怖いなぁ。。

ま、何はともあれ、アップグレードは成功したということで、ひとまず喜んでおきます。

2015年7月24日 (金曜日)

【Web】そろそろMTのバージョン変えないと...と思う今日このごろです

このエントリーをはてなブックマークに追加 Check

Movable type

このブログはMovable Typeで運用しています。

最初に導入したのが2005年。

それまで、CGIの日記プログラムを使ったり、HTMLをせっせと更新して日記を書いていましたが、ブログの存在を知り...

Movable typeの存在を知って、どうにかこうにか立ち上げることができました。

当時のブログエントリーがこいつです

最初のバージョンは3.2でしたでしょうか...

2005年の11月末に立ち上げたブログは、そのまま2011年までバージョンを変えずに使っておりました。

が、再構築時のエラーが目立つようになり、2011年8月にバージョンアップを決意します。

が、決意したものの、もしも失敗したら...というチキンな面が邪魔をしてずるずると...

そして同年9月に致命的な問題が...サーバー側のメンテナンス作業により、データベースが破損。

当時のエントリー

MTをバージョンアップしようと思ってもサーバー側のPHPとMySQLのバージョンが低くバージョンアップができないジレンマ

そこで、サーバーをXREAから同社が運用するCoreserverに引っ越すことに

そして10月にブログの復旧を試みていますが、これもめちゃくちゃ苦労しまくりで...

めちゃくちゃ苦労その2

このアップグレードの際、全ページを再構築したわけですが、バージョンが変わったことで、もともとのファイル名の付け方がハイフンとアンダーバーで違っていて、各ページのURLが変わってしまった、というオチまでつきました。

ということで、これまでのアップグレードには苦労の記憶しかなく、それはそれはアップグレードが恐ろしいわけです。

なのですが、さすがにブログの管理画面にログインするたびに警告が出ますし、現在はアップグレードに際して上書きじゃない方法が推奨されているようなので、失敗してももとに戻しやすいかなぁ...ということでやってみる気になってきました。

Movable Type 6へのアップグレード

ガクブルですが、どこかで時間作ってやってみたいと思います。

月別 アーカイブ