IE8以前でCSS3の表現を使うには
IEの独自拡張filterプロパティでCSS3を再現 前回紹介したCSS3の機能は、Internet Explorer（以下IE）8以下ではサポートされていません。今回は、クロスブラウザなテクニックとして、IEの独自拡張であるfilterプロパティを使ってCSS3の表現を再現する方法を紹介します。 filterプロパティは、テキストや画像を透過させたり、影を付けたり、色を変えたりと、さまざまなフィルタ効果を指定できるIE独自のCSSプロパティです。これらのフィルタ効果を利用すれば、画像やJavaScriptを利用せずに、CSS3のようなドロップシャドウやグラデーションなどの表現ができます。 filterプロパティには、IE 5.5以上で使用できる効果と、IE 4以上で使用できる効果があり、書式がそれぞれ異なりますので注意しましょう。本稿では混同しないように、より広い機能に対応している、IE
チーム制作のメリット・デメリット
チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ
プロ直伝のコーディングテクニック
柔軟性のあるコーディング Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。 要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。 このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。 秘伝の3つのコツ 第1のコツ
プロ直伝のコーディングテクニック
柔軟性のあるコーディング Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。 要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。 このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。 秘伝の3つのコツ 第1のコツ
検索結果をより目立たせるマークアップとは？
HTML4とHTML5の違い では、具体的なタグに触れながら、HTML4とHTML5の違いを説明していきましょう。HTML4とHTML5を比較して、大きく変わった1つとして、文書構造を伝える要素が新しく追加されました。それが以下のものです。 section article header footer nav hgroup aside figure （※）追加要素について詳しくは、「今さら聞けないHTML5総おさらい／第1回 HTML5の新機能、HTML4との違い（P2）」をご覧ください。 これらを使用することで、文書がどのように構成されているか、検索エンジンにアウトラインを示せるようになりました。HTML4ではdiv要素でしか表現できなかったものを、header要素、footer要素、section要素で表現できるようになったのです。 また、新しいルールとしてsectionごとにh1が設定
CSSだけでできる？の判断スキル向上など、失敗から得た5つの気づき
前回の記事では、ぼくらの自社サイトリニューアルがいったん失敗に終わり、ゼロから作り直す羽目になった顛末をお話しました。失敗はつらくて、恥ずかしい。今も、こうして記事を書いている中で、「できれば失敗せずに済ませたかったな」という複雑な思いが胸にこみ上げてきます。 せめてその失敗を反省し、「繰り返すべきでないこと」と「今後も継続すべきこと」をきちんと言語化しておくことで、失敗の経験を「成長」につなげたい。そういう思いから、こうして失敗談を記事にさせていただくことにしました。 今回の後編では、その失敗から得られた5つの気づきをお話ししたいと思います。もし、これらの気づきがみなさんを楽しませたり、お役に立てたりすれば幸いです。とは言えたった一度の経験から得られたものですので、まだまだ洞察が深まっていないところもあるかと思います。至らぬ点や誤りなどがあったら、@Shumpeiまでお気軽にご指摘くださ
CSS3の機能を試す！
セレクタで効率の良いCSS設定 今度は表現手法とは少し違うのですが、CSS3から可能になる効率的な設定方法を紹介しましょう。CSSを記述していると、いつのまにかものすごい量のコードを書いていることがよくあります。多い時は何千行にもなってしまうことも・・・。 それでいつも困るのが、後からの変更・修正です。長くなってしまったCSSコードのどれとどれが関連しているかわらなくなってしまい、それを検証しながらの修正は苦労します。筆者のコーディングが汚いということもあるかもしれませんが、「コードを短く、シンプルに書く」ということがCSS自体の機能にないというところも原因かもしれません（きっとそうだ！）。 これを改善してくれるのが、CSS3から用意されている新しいセレクタです。これによって複雑な指定もできるようになり、効率的なCSSコードが書けるようになります。これでCSS自体のコード量も減らすことがで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
