低価格・高品質・最速のHTMLコーディングはクロノドライブへ

コーディングノウハウコラム

[HTML]たった1行でアイコン付きの要素を右寄せにするテクニック

アイコンなどをbackgroundで指定した要素を右寄せにしたいとき、みなさまはどのようにスタイルを指定しているでしょうか。text-alignを使って要素を右寄せにしても、背景は動かないため、背景ごと動かさなければなりません。また、background-positionで直接位置を指定するのも、あまりよい方法とは言えません。今回は、そんな状態をたった一行で解消するテクニックを紹介します。対応方法...続きを読む

[jQuery]簡単に作れるスライド式メニュー

jQueryを使うと、アニメーションをさせながらメニューの開閉が行えたり、要素を移動させたりすることが可能です。その中で、今回はスライドしながら開閉するメニューのサンプルをご紹介します。導入の手順まず、head要素内でjQueryのコアファイルを読み込みます。viewsourceprint?1<scripttype="text/javascript"src="js/jqery-1.5.1.m...続きを読む

あなたはどれを使う? スマートフォンの呼び方一覧

スマートフォンのシェアも広がり、「スマートフォン」という存在がかなり身近になってきたのではないでしょうか。しかしその「スマートフォン」という呼び方にも、いくつかバリエーションがあるようです。そこで今回は、それらについて調べてみました。■スマートフォン■スマートホン■スマフォ■スマホ■smartphone現在は上記の5つの呼び方が一般的でしょうか。特に、略さない場合の呼び方は「スマートフォン」、略し...続きを読む

[HTML]今さら人に聞けない「左・右・中央寄せが出来ない時の対処法」

今回もコーディング初心者向けのテクニックです。要素の位置を寄せたいとき、「スタイルで指定しているのにできない!」という時があるかと思います。その解決法です。インライン要素を寄せるときtext-alignを使います。左寄せtext-align:left中央寄せtext-align:center右寄せtext-align:righttext-alignは、インライン要素にしか適用されません。ブロック要...続きを読む

CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。【比較】覚えておきたいロールオーバー画像切替え5つの手法(CSS?JS?onmouseover?)バナーなどでロールオーバーした際に画像を変化させる方法はいくつかありますが、今回はonmouse属性を使ったロールオーバーの方法をご紹介します。使い方例えば、リンクバナーをロールオーバーした際に画像を変化させるには、vi...続きを読む

今さら人に聞けない「idとclassの使い分け」

5月もゴールデンウィークを過ぎてしまいましたが、この4月から新たな生活を始めた方もいらっしゃるのではないかと思います。「これからコーディングの仕事を始めるよ!」という方もいらっしゃるかもしれません。そこで、今回は、基本に立ち返って、idとclassの使い分けについて考えます。idとclassの定義idこの属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。classこの属性は...続きを読む

CSS3で新たに追加されるプロパティと各ブラウザの対応状況まとめ

CSS3で新たに追加されるプロパティは多岐に渡りますが、今回はそれらのうちから色に関するプロパティの説明とサンプル、そして各ブラウザの対応状況をご紹介します。RGBaプロパティRGBaプロパティはRedGreenBluealphaTransparencyの略で、要素に対して透明度を持った色を指定することができるプロパティです。適用できる要素は、border-color、background-col...続きを読む

意外と知らない? ol要素で箇条書きの開始番号を指定するテクニック

順序付きリストであるol要素ですが、例えば1~3番目の要素を記述して、その間にテキストや画像などを挟み、またそれまでの番号から続けようとolを新たに記述すると、箇条書きの番号がまた1から始まってしまいます。そういった場合に、箇条書きの開始番号を指定してリストを作成する方法です。HTMLviewsourceprint?01<ol>02  <li>1番目の要...続きを読む

ゼロから始めるガラケーコーディング 初歩の初歩編

現在、スマートフォンが爆発的な流行を見せていますが、一方で日本独自の携帯、いわゆるガラパゴス・ケータイの勢いが衰えることはありません。そこで、今回から数回に渡り、「ガラケー」向けのコーディングについて、考えていきたいと思います。一般のHTMLとは何が違うのか?基本的には、一般的なHTMLをコンパクトにしたものと考えても差し支えありません。しかし、キャリア...すなわち携帯電話会社ごとに独自仕様のH...続きを読む

通常のスタイルとは別に、印刷時のみに有効となるスタイルを作成する方法

通常、何も意識せずに記述したCSSは、画面表示時と印刷時で同じように適用されます。しかし、メディアタイプを指定して記述することで、それらを別々に分割することが可能です。CSS内に直接記述する方法「@mediaprint」という記述以降に書かれたスタイルは、印刷時のみ有効になります。例えば、viewsourceprint?1#contents{2    fon...続きを読む
1 2 3 4 5 6 10