カテゴリー: HTML/CSS/JS
この記事は2015年3月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Willさんいんでは、モリサワのすべてのフォントが使用できる MORISAWA PASSPORT を契約していますが、すべての MORISAWA PASSPORT 製品契約者は、追加料金なくモリサワの Web フォント（モリサワでは“クラウドフォント”と称しています）TypeSquare を利用できるということで、Willさんいんのサイトに導入してみました。この MORISAWA PASSPORT プランは、利用可能書体数、利用可能ドメイン数に制限がなく、1,000万PV／年まで無料で利用できます。
今回、視認性が高く、読みやすいというユニバーサルデザインフォントを採用し、本文を含むすべてに “UD新ゴ” をベースフォントとして使い、見出しには “UD新丸ゴ” を使ってみました。
“くもやじ” とか “プリティー桃” とか “はるひ学園” とか “すずむし” といったデザインフォントも使えます。
カテゴリー: HTML/CSS/JS
この記事は2015年3月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。
CSS によるレイアウトが当たり前となり、十数年前のようなバリバリのテーブルレイアウトというのはほとんど見られなくなりました。一方で、CMS の普及により、WYSIWYG エディタ上の編集エリア内で、複雑なレイアウトを実現するためにテーブルを使うという場合があると思います。
当然、編集エリアにデータテーブルを置く場合もありますので、枠線の有無やセル内余白など、レイアウトテーブルとデザインを区別する必要があります。
WYSIWYG エディタのスタイルボタンなどに予めレイアウトテーブル用の class を登録しておくという方法も考えられますが、最も単純で明快なのは、テーブルの枠線を付けるか付けないかという区別です。
HTML5 では、table 要素の border 属性の値には、1 または空文字列（border=""）のみを指定することができ、これ以外の値を指定することはできません。（ WYSIWYG エディタによっては、テーブルを挿入する際の枠線の初期値が 0 になっているものが多く、これは HTML5 では使えないので、設定ファイルで初期値を 1 か空に修正しておく必要があります。）
以前、テーブルの枠線は CSS で付けるべきで、border 属性は使うべきでないという考え方もありましたが、HTML5 では、table 要素に border="1" を追加することで、その表がレイアウト目的ではないということを示すことができます。