選択されているタグ : CSS

タグを絞り込む : PIE みんビズ セミナー ホームページ作成 情報デザイン

デジタルアシストWeb勉強会で発表しました

デジタルアシストWeb勉強会


2011年11月19日に三島市のカフェ ククルクさんで開催された、デジタルアシストWeb勉強会に参加しました。勉強会では「みんビズ その傾向と対策」というお話をさせていただきました。

主に地元(沼津・三島近辺)のWeb制作者が集まる場として2008年にスタート。講師を招聘する講義形式ではなく、最近の取り組みやTipsなどを発表しあうアットホームな情報交換会というようなイメージです。


みんビズ でビジネスするということ


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

CSS : z-indexとposition

ホームページ作成者仲間からのヘルプで、CSSの調整をしましたのでその内容をまとめてみようと思います。調整内容としては、パーツの重なり順が思いどおりにならない、といったことでした。(ここでいうパーツは、専門的に言うところのブロックレベル要素)

パーツの重なり順の原則

まず、HTMLにおける重なり順を確認します。ホームページでは基本的な重なり順は「HTMLの記述の順に下から上に重なる」です。先に登場したパーツほど下に、後から登場したものほど上に重なります。

さて、HTMLでパーツが重なる状態が起こるのかといえば、原則は重なることはないです。HTML単体ではないのですが、見た目をコントロールするCSSを使うことで可能になります。ですので、重なり順のコントロールはCSSを上手く使うということでもあります。

完成図と実際の工程


CSS未設定の初期状態

左図がHTMLのみを記述した状態(サンプルファイル : sample.html)、右が完成図です。HTMLの記述順は黄色のエリア → ピンクのエリアとなっています。これを黄色のエリアとピンクのエリアを重ねあわせ、さらに黄色をピンクの上にもってきます。


Step 1)ピンクのエリアを移動する


ピンクのエリアを移動

ピンクのエリアを黄色のエリアと重なり合うように移動させます。ここでは上部余白をコントロールするCSSであるmargin-topプロパティを利用します。余白というと正の数(プラス)と思いますが、実は負の数(マイナス)を指定することもできます。マイナスの余白とは余白がなくなり詰まっていく状態となります。

サンプルファイル : sample_step1.html


Step 2)黄色のエリアの重なり順を調整する


黄色の重なり順を上に

ピンクのエリアを移動しただけでは、重なり順でピンクが黄色の上にきてしまいます。そこで黄色の重なり順を変更するためにCSSのz-indexプロパティを指定します。z-indexプロパティは値が大きいほど上になります。

しかしz-indexを指定しただけでは重なり順が変更されません。重なり順を指定するためには、エリア(ボックス要素)の配置方法を指定するpositionプロパティとセットで指定する必要があります。ここでは、position:relative(相対配置)を指定します。

サンプルファイル : sample_step2.html

OS/ブラウザのバージョンと互換性の問題

これで調整できたのできたのですが、さらに新たな問題が発生しました。私のところではOKなのですが、知人の環境ではNGだというのです。画面コピーで確認したところ、私はWindows VistaのInternet Explorer 7で、友人はWindows XPのInternet Explorer 7で見ていました。むむむ、想定外です。

問題はpositionとz-indexを指定した黄色のエリアが、画面の左端まで移動しているというものでした。これは、黄色いエリアを囲んでいる一つ上の入れ物(親要素)にもposition:relativeを指定すると解決します。CSSのpositionプロパティには特定のブラウザでは挙動が怪しいものがあり、それに該当したのかもしれません。

CSSという難解なパズル

現在のところCSSを利用することでホームページをレイアウトし装飾することができます。このCSSは難解なパズルのようなところがあります。組み合わせによって効果が変りますし、時に予期しない挙動をすることもあります。これには前述のような、OSとブラウザの組み合わせによっても出現したりしなかったりです。

同業者の方も含めまして、CSSでお悩みのことがありましたらご一報ください。可能な限り、パズルの解決をお手伝いいたします。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

リストマーカーの考察

リストマーカー(CSSのlist-style-typeプロパティ)で迷ったことがありまして

あるHTMLコーディングの仕事において、リストマーカー(CSSのlist-style-typeプロパティ)について迷うことがありました。それはホームページの利用規約や個人情報保護方針のような、条文タイプのテキストをHTMLコーディングするときに発生しました。通常、条文タイプのテキストでは番号リスト(HTMLタグ : ol)でマークアップします。条文には番号(順番)があり、これが重要なためです。

序列のあるリストは、OL要素で生成される。レシピのように、順番が重要である情報を含むべきである。(HTML 4仕様書邦訳計画補完委員会より)

こういうテキストのお話

番号リストでマークアップされたテキストは、ブラウザによって各条文の先頭に「1.」「2.」のように連番が振られて表示されます。ここで問題が発生しました。原稿には「(1)」「(2)」のように括弧付きの連番がふられています。また条文のなかには「2.(1)(2)を除いて〜」のように条文番号を括弧付きの連番で参照するものが含まれています。

現状で広く使われているCSS2.1のlist-style-typeプロパティで表現できるのは、数字順(「1.」「2.」)やアルファベット順(「a.」「b.」)など限られた表記です。「(1)」「(2)」を上手く表現することができません(CSS3では可能になりますが、対応しているブラウザが限られます)。

テキスト表記を修正しつつ標準の「1.」「2.」でいくのか、デザインに忠実に「(1)」「(2)」を何とか実装するのか、悩ましいところです。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

IEをパワーアップするPIE

CSS3がもたらすホームページ作成の未来

現在のホームページ作成はWeb標準に基づく制作が主流です。つまりHTMLで文書を構造的にマークアップし、CSSで見た目をコントロールします。ところが、見た目を制御するCSS(現行版は2.1が最新)では、グラフィックソフトのようなリッチなデザインを施すことができません。

そのためCSSでは見た目のコントロールというよりも、レイアウトのコントロールを行います。見た目のデザイン的な質感については、グラフィックソフトで作成したパーツを画像(前景及び背景)として利用しています。CSS3という新規格が策定中ですが、見た目のデザインを施す機能が大きく強化れるため、実用段階にはいると制作現場の作業も大きく変わりそうです。

FirefoxやSafari/Chromeの最近のバージョンではCSS3の先行実装が進んでいます。ところが最大シェアを誇るIntenet Explorerの実装具合は、まだまだこれからという状況です。これは最新版のCSS3対応度が低いことと、非対応の旧バージョンの利用者も多いことが問題点です。

IEのCSS3対応度を擬似的に引き上げるPIE


「CSS3は使いたい、しかもIEも対応する形で」という状況に、一考の価値があるのがPIEです。PIEはIE6以降のCSS3対応度を引き上げるプログラムで、昔からあるIEの独自機能を利用してCSS3と同じデザインを可能にします。対応するのは「角丸」「ドロップシャドー」「背景グラデーション」「複数背景画像」などです。

利用法はサイトからファイルをダウンロードして適切なフォルダに保存。CSS3を利用したい箇所のCSS設定の最後に「behavior: url(PIE.htcへのパス);」を記述するだけです。角丸を適用するソースのサンプルはこんな感じです。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

フロートした画像とテキストの面合わせ(つらあわせ)

フロートで画像とテキストを並べるにはひと工夫必要

Webデザインでは画像の横にテキストを回り込ませることをフロートと言います。ホームページをレイアウトするうえで欠かせない技術です。これは通常、CSSのfloatプロパティで指定します。しかしフロートしただけでは、画像の上端とテキストの上端がそろわず、いささか不恰好です。



このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

プロフィール

矢部 靖人(hamnaly)

いくつかの制作会社でWeb制作やDTPから営業まで経験し、2010年に独立。現在はhamnaly(ハンナリィ)という屋号で、Web制作を中心に地元企業のWeb活用を応援する事業を模索中。理想は高く現実は厳しく、下請け制作を中心に生きています。Knock! Knock! 主催。

エントリーリスト

カテゴリーリスト

タグ