10月
13

簡単なので覚えておきたい。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

コンテンツとコンテンツを区切るために使える罫線。
点線を使った罫線だとデザインの邪魔にならずに格好良くコンテンツを区切ってくれます。
普通の罫線とちがってちょっと控えめにクールに罫線を描きたい、
そんなときはCSSを使ってスタイリッシュな点線の罫線はいかがでしょう。
点線の罫線をわざわざ画像で作って使っている人も見かけますが、
そんなことをしなくても簡単に作れます。

10月
13

コンテンツの区切りなどに使える罫線用のタグ <hr>

By admin // HTML, その他, タグ, リファレンス // No Comments

コンテンツや内容の区切りとして罫線を使いたい場合はタグ１つで簡単に使うことが出来ます。
フッターと本文の間に引かれていたりすることも多いです。
うまく使ってわかりやすいページ構成を心がけましょう。

10月
12

テーブルの枠線の太さを指定するタグ <table border=”">

By admin // HTML, タグ, テーブル, リファレンス // No Comments

テーブルは要素を縦横に表として整列させることの出来るタグです。
border属性を使えばテーブルの周りに枠線を表示させることが出来ます。
border属性に指定する数値で線の太さを指定できます。
また、border属性で1以上の数値を指定した場合はセル間にも境界線がひかれます。
要素同士を視覚的に線で区切りたい場合はこのborder属性を使います。

10月
12

非視覚系ブラウザのためのテーブルの説明を設定する。<table summary=”">

By admin // HTML, タグ, テーブル, リファレンス // No Comments

パソコンは様々な人が使います。
目が見えない方でもインターネットを活用できるような非視覚系のブラウザもあります。
目が見えないので主に音声で情報を伝えることになります。
例えば非視覚系特有の機能の一つとして、このテーブルの説明が利用されます。

10月
11

テーブルの縦のセル(行要素)を結合する。<td rowspan=”">

By admin // HTML, タグ, テーブル, リファレンス // 1 Comment

テーブルのセルは必ずしも縦と横のセルの数が揃っているわけではありません。
中には２行を結合してまとめた部分も存在するでしょう。
セルの行要素同士を結合する属性を学びましょう。

10月
5

テーブルの横のセル(列要素)を結合する。<td colspan=”">

By admin // HTML, タグ, テーブル, リファレンス // No Comments

テーブルのセルは必ずしも縦と横のセルの数が揃っているわけではありません。
中には２列を結合してまとめた部分も存在するでしょう。
セルの列要素同士を結合する属性を学びましょう。

10月
5

テーブル（表）の上部にタイトルをつけよう。<caption>タグ

By admin // HTML, タグ, テーブル, リファレンス // No Comments

レイアウトに使う場合を除いて（使ってはいけませんが）、
テーブルにはその内容を表すタイトルがあると思います。
テーブルのタイトルをテーブルの上部に表示させるためのタグを知っておきましょう。

10月
3

これは大事と思う場所をもっと強調したい。強調タグの<strong>

By admin // HTML, タグ, テキスト, リファレンス // 1 Comment

文章の中でページのテーマで大事な単語が出てきたときに、
ここが重要な部分であることを示すためのタグ。
検索エンジンでもこのタグを読み取ってテーマとしての評価を強める要素になっているといわれます。
つまり、SEOにも大切な要素ということです。
一部ブラウザでは太字で表示されるなど視覚的にも強調されます。
強調を表すタグは他にも<em>があります。

10月
3

これは大事と思う場所を強調したい。強調タグの<em>

By admin // HTML, タグ, テキスト, リファレンス // 1 Comment

文章の中でページのテーマで大事な単語が出てきたときに、
ここが重要な部分であることを示すためのタグ。
検索エンジンでもこのタグを読み取ってテーマとしての評価を強める要素になっているといわれます。
つまり、SEOにも大切な要素ということです。
一部ブラウザではイタリック体で表示されるなど視覚的にも強調されます。
強調を表すタグは他にも<strong>があります。

10月
1

これは使える！マウスを画像の上に持ってくると明るくなる処理をCSSだけで実装。

By admin // ケーススタディ, デザイン, 便利 // No Comments

画像の上にボタンを持ってくると画像の色が変わるようなページがあります。
マウスがフォーカスしている画像が明るくなると、今どこを選んでいるのかがわかりやすくなってユーザーにとても親切です。
デザイン的にもマウスにあわせて画像が明るくなるとかっこいいですね。
そんなマウスオーバーの処理をCSS（スタイルシート）だけで簡単にやってしまう方法を紹介します。