HTML&CSS

target疑似クラスを使う〜CSS3

target疑似クラスを使うと、id名を利用したページ内リンクをクリックしたときに、リンク先に対してCSSを適用させることができます。 工夫次第でスクリプトを使用せずにちょっとした仕掛けを作成できます。 E:target {プロパティ名:値;} Eはリンク先の要素を指定するのがポイントです。 次のサ  >>続きを読む

イメージマップのリンク部分の青い線を消す

Chromeなどでイメージマップのリンク部分に青い線が表れます。 これを消すにはareaに対してCSSでclassなどを使用して以下の設定をします。 area{ border:none; outline:none; } IEの古いバージョン対策ではHTMLタグの中に以下の属性を加えます。 onFoc  >>続きを読む

floatとdisplay:inlineを一緒に設定する理由〜CSS

時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。 なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは?と考えてしまいます。 これは、今となってはもう古い書き方でIE対策を施しているも  >>続きを読む

ul要素の構造〜余計な余白は誰?

ul要素とli要素はナビゲーション作成などで使用頻度の高い要素です。 リストは特殊な構造になっています。 ulとliは組み合わせて使用する必要があります。 特にulの直接の子供はliのみとなりますので、ulの入れ子状態で再びulを使用する場合などに注意が必要です。 以下の例は間違いの書き方です。 &  >>続きを読む

doctypeの変更〜DreamweaverCC

XHTMLなどからHTML5にdoctypeを変更するにはDreamweaverの変換を使用すれば簡単にできる。 CCになってからその機能の場所が変わっていたのでメモ。 CS6の場合はメニューから「ファイル」→「変換」→HTML5 CCでは「ファイル」→「変換」が無くなっている。 同様の機能はプロパ  >>続きを読む

input 要素のサイズ指定

input要素でsize属性を使用した場合は、size属性の値は半角文字の文字数になります。 しかし、フォントの設定やブラウザの種類で表示文字数は思い通りになりません。 次のサンプルはsize属性とstyle属性、そしてmaxlength属性を使用した例です。 サンプル <dl> <  >>続きを読む

ページの高さを画面いっぱいにする

ページを画面いっぱいの高さにする方法です。 ポイントはCSSでhtml要素とbody要素をあらかじめ100%指定しておきます。 heightをパーセント指定するときは親要素のheight指定が必要になります。 次の例はpositionで指定された固定のheaderとfooterが存在し、コンテンツの  >>続きを読む

HTML5とCSS3のIE8対策

制作課題の作品を夢中で作成しているとついつい自分のPC環境が標準になってしまいます。 自分がChromeだからChromeで表示されれば満足してしまいがちです。 これではIE対策を忘れてしまいす。IE8は2014年4月時点のデスクトップブラウザシェアの1位で20.9%です。 常に色々なブラウザで確認  >>続きを読む

スマホサイト用のハンバーガーボタンナビ

スマホサイトのナビゲーションの例は新しい記事を書きましたのでそちらも参考にしてください。(2015/10/23) ハンバーガーボタンをクリックするとナビゲーションがアコーディオン状で展開されます。 jQueryを使用していますが、簡単な内容ですから自由にカスタマイズできます。 ヘッダーの高さは奇跡の  >>続きを読む