CSS

今回、個人のポータルページをデザインしていたときに、内側の枠線（Inner Border）の効果を作りたくなり、とても賢いやり方を学びました。CSS で内側の枠線を作ると聞くと、まず padding や margin でボックスを大きくすることを思いつくと思います。しかし、それではうまくいきません。ボックスを広げると枠線も一緒に動いてしまうため、この方法では内側の枠線のスタイルを作れないのです。 ...

HTML の Anchor（アンカー）機能はとても便利です。ページが長いとき、Anchor を使えば訪問者は指定した段落へすばやく移動できます。この手法は多くの技術ドキュメントやブログで使われています。https://coder.tw/?p=123#section1 のような URL を見たことがあれば、それが HTML Anchor の特性を利用したものです。この機能は便利ですが、いくつか問題も生じます。最もよくあるのは、ページの最上部に固定のフローティングメニューがある場合です。訪問者が Anchor リンクをクリックすると、ブラウザは指定の章まで自動でスクロールしてくれますが、一部の文字がメニューに隠れてしまうのです。私はずっとこの問題に悩んでいました。今日たまたま Facebook の技術ドキュメントを読んでいたところ、彼らの解決方法を見つけ、なかなか良いと思いました。 ...

前回の記事《CSS が変数と関数に出会うと SASS になる～ SASS のインストール手順》では、SASS のインストール方法を紹介しました。今回は SASS の使い方を説明します。この記事では、SASS の4つの特徴、変数（Variables）、関数（Mixin）、継承（extend）、ネスト（Nesting）を取り上げます。 ...

プログラムと CSS の両方を書く人なら、CSS にも変数や関数のような、プログラミング言語にある機能があればいいのに、と思ったことがあるでしょう。CSS には繰り返しの多い記述が多いので、変数や関数があれば、CSS を書くスピードがずっと速くなるはずです。一般的には、そんな夢は実現できないと思われてきました…… でも今日は、SASS という新しいおもちゃを紹介します。SASS を使えば、CSS がずいぶん違ったものになりますよ～ ...

きっと多くの人と同じように、私も Web ページを書くときは、DW（Dreamweaver）でデザイン画面をドラッグして組み立てるより、Notepad を開いて HTML を直接書くほうが好きです～ この方法の良いところは、自分の腕を磨けることです（XD）。ただ、欠点は開発のスピードがやや遅いことです（とはいえ、この書き方に慣れると DW より速くなるんですけどね…XD）。今日は Zen Coding を紹介します。これを使うと、Web ページを書く速度が何倍にも上がります！ CSS の記述のような書き方で、そのまま Web ページを書けるんですよ～ ...

以前ニュースで、Google のモバイル版で「傾斜」（中国語で「傾き」の意味）と検索すると、結果のページが右に傾いて表示される、と紹介されていました。この効果はそれほど難しくありません。CSS 3 の標準の一つなので、CSS の 1 行だけで実現できます。現時点では、IE 系のブラウザはこの CSS 3 の傾きの構文に対応していません（IE 9 も含みます）。また、実際には 1 行では済まず、ブラウザごとに構文が異なるため、複数行に分けて書く必要があります。この点は今後改善されるでしょう。 ...

CSS 2 の時代は、画像や div 要素に角丸効果を付けるのはかなり面倒でした。簡単な方法は、jQuery で誰かが書いてくれた関数を使うことでした。自分で作りたい場合は、角丸の画像をデザインして重ねて配置する必要があります。要するに、とても複雑だったのです。しかし CSS 3 では、そのような面倒な方法はもう必要ありません。CSS に直接書くだけで設定できます！ ...

Web デザイナーにとって、ページをデザインするときに一番つらいのは、ブラウザの互換性の問題です。ブラウザごとに CSS や JavaScript の対応状況が違います。CSS が Chrome では正しく表示されるのに、Firefox では違う見た目になることがよくあります。この問題は IE で最も起きやすく、IE は CSS や JavaScript の対応が最も不十分だからです。他のブラウザでは見た目が少し違う程度でも、IE では効果がまったく表示されないこともあります……。そこでこの記事では、IE だけ、あるいは IE 以外のブラウザだけに、特定のコードや CSS を適用する方法を紹介します。 ...

W3Cについて： W3C は、ウェブの標準化に取り組む団体です。W3C は、ウェブに関するさまざまな仕様を策定しています。例えば、標準の CSS4 や XHTML は、W3C が策定したものです。なぜこうした仕様が必要なのでしょうか？ 理由はシンプルです。ウェブページは異なるブラウザで表示されます。もしブラウザごとに使える構文が違っていたら、ウェブデザイナーはとても大変です。しかし、すべてのブラウザメーカーに一つの標準で合意させるのは困難でした。おそらく主な理由は、メーカー同士が競争しているからでしょう。そこで、公正な第三者である W3C が生まれ、標準を策定し、IE、Opera、Firefox などの各ブラウザメーカーは、その基本的な構文に従わなければならなくなりました。もちろん、各ブラウザが独自の構文を追加することもできなくはありません。とはいえ、すべてのブラウザが W3C の仕様に従っているわけではありません。IE のような大手は従っていないため、多くのウェブデザイナーは IE に対して愛憎入り混じった感情を抱いてきました（愛は多くの人が使っているから、憎しみはルールを守らないから）。ここまで読んで、W3C についてある程度ご理解いただけたと思います。では、ウェブページが標準に準拠しているかを確認する方法を紹介しましょう。...

CSS の記述を使うと、画像の最大幅と最大高さを設定できます。 最大幅: タグ名 img{ max-width:幅の値 } 最大高さ: タグ名 img{ max-height:高さの値 } また、高さ（幅）の値はパーセントで指定することもできます。 これらの記述を使うと、ブログの画像がはみ出さないようにできます。 ただし、この記述は IE6 では効果がありません。 IE でも効果を出す方法は、まだ調べているところです。 おそらく JavaScript を使えば実現できるでしょう。