HTML&CSS

HTML&CSS

target疑似クラスを使う〜CSS3

target疑似クラスを使うと、id名を利用したページ内リンクをクリックしたときに、リンク先に対してCSSを適用させることができます。 工夫次第でスクリプトを使用せずにちょっとした仕掛けを作成できます。 E:target {プロ...
HTML&CSS

アイコンフォントの使用方法〜疑似要素への導入方法も追加

アイコンフォントとは アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。 アイコンフォントの使い方 疑似要素に導入する方法はこちら Font Awesomeを例にしてCDN(Cont...
HTML&CSS

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

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

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

時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。 なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは?と考えてしまいます...
HTML&CSS

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

ul要素とli要素はナビゲーション作成などで使用頻度の高い要素です。 リストは特殊な構造になっています。 ulとliは組み合わせて使用する必要があります。 特にulの直接の子供はliのみとなりますので、ulの入れ子状態で再びulを使用...
HTML&CSS

doctypeの変更〜DreamweaverCC

XHTMLなどからHTML5にdoctypeを変更するにはDreamweaverの変換を使用すれば簡単にできる。 CCになってからその機能の場所が変わっていたのでメモ。 CS6の場合はメニューから「ファイル」→「変換」→HTML5 ...
HTML&CSS

input 要素のサイズ指定

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

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

ページを画面いっぱいの高さにする方法です。 ポイントはCSSでhtml要素とbody要素をあらかじめ100%指定しておきます。 heightをパーセント指定するときは親要素のheight指定が必要になります。 次の例はpositi...
HTML&CSS

HTML5とCSS3のIE8対策

制作課題の作品を夢中で作成しているとついつい自分のPC環境が標準になってしまいます。 自分がChromeだからChromeで表示されれば満足してしまいがちです。 これではIE対策を忘れてしまいす。IE8は2014年4月時点のデスクトップ...
HTML&CSS

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

ハンバーガーボタンをクリックするとナビゲーションがアコーディオン状で展開されます。 jQueryを使用していますが、簡単な内容ですから自由にカスタマイズできます。 ヘッダーの高さは奇跡の44pxとして使いやすい高さに設定しました。サンプルあり。
スポンサーリンク
タイトルとURLをコピーしました