技術ブログに追加したいほっこりCSS5本

2016.1.18に書いた記事から分けました。

本ブログのような技術情報を書いていくうえで追加して良かった css をご紹介します。

コードハイライター

いわずもながですね…

Google Code Pritify を使っています。テーマは Vim sunburst theme です。

Which browsers does it work with?

It's been tested with IE 6, Firefox 1.5 & 2, and Safari 2.0.4. Look at the tests to see if it works in your browser.

フルHD用のレスポンシブレイアウト

フルHD用のレイアウトによって大画面での閲覧時にメインコンテンツを2段組表示しています。

開発の際にはパソコンモニタでの閲覧性が抜群で、まじお勧めです!

引用ブロック

技術ブログを書いていると参照元を表示することが多くなります。

うまく引用ブロックをデザインすれば、引用部分のマークアップを書く手間も苦にならなくなるかも。

本ブログでは、<blockquote> タグの title 属性と cite 属性の内容を表示するようにしています。

ずっと気になっているあのマークアップ・・・

やっぱり、他のサイトからの「引用」文やツイッターからの「引用」文は、全部<div>で囲ってあるだけで、引用文であることを示す<blockquote>じゃない。

2013-06-27 の記事ですが NAVER のソースを拝見すると現在も <div> タグで引用部分を囲っていて <blockquote> は使っていませんね…

CUI 風スタイル

図示したいときに使っています。画像を用意する手間を省けます(^-^;

-+- test_source
 |
 +- test_output

ノート

メインの内容から脇道にそれる場合や補足を書く際に使用します。内容の理解を損ねないかと躊躇する話題もどしどし盛り込んでいくことが出来ます。

次のように左側に大きめに余白を開けて表示します。それだけ… (^-^;;

“あの時代”は遠くになりにけり

僕は2003年から“1980年代の文化と技術”に関するホームページを運営していています。ホームページ開始当時ですら懐かしい話題であり、現在は益々“あの時代”は遠くになりました。

そして Web サイト開始当初には当たり前のように使っていた用語に注釈の必要を感じています。

ゆくゆくは登場する固有名詞のほぼ全てにページ作者による注釈が必要になるかもしれません。