はてなブックマーク

こんにちは 馬場です。 前回（前々回？）は、 テキストの横に並ぶ画像の位置調整について vertical-alignを使用した対応をご紹介しました。 今回は、 vertical-alignとは別の方法、 positionやmarginを使った対応方法を ご紹介します。 vertical-alignを使用した場合と それほど表示が変わるわけではないので、 こんな方法もあるという程度で ご覧ください。 テキストの横に並ぶ画像の位置合わせ　その１へ ・positionを使った対応 ・marginを使った対応 ・vertical-alignとposition(margin)を使った対応 ▼positionを使った対応 positionを使って調整する場合は、 position:relativeを指定し、 topやbottomで調整します。 その１でご紹介した、 vertical-alignの数値指

こんにちは。島津です。 今回は、テーブルの列の幅指定に関する話題です。 表組みを使う時、内容やデザインにしたがって 列の幅サイズを指定することはよくあると思いますが、 colspanによるセル結合と組み合わせて使った場合に 実はちょっとした落とし穴があります。 とりあえずサンプルをご覧下さい。 ▼スクリーンショット ※上がWindows Firefox3、下がWindows Internet Explorer7です。 （htmlコーディング） <table> <tr> <th class="col01">商品No．</th> <th class="col02">商品名</th> <th class="col03">価格</th> <th class="col04">概要</th> </tr> <tr> <td class="col01">01</td> <td class="col02">

こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 ▼スクリーンショット ※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。 （htmlコーディング） <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> （cssサンプル） li{ zoom:1; } ol { margin-le

こんにちは、溝上です。 今回はちょっと便利なfloatの使い方をご紹介したいと思います。 以前紹介したfloatを使う際の注意点に反してしまいますが 幅が決められない（決めたくない）要素をfloatさせたいときってありますよね。 例えばフッターにテキストリンクを多数並べたい場合などが考えられます。 | 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ | ↑こんなリンクです。 「それなら以前紹介したこの方法でいいんじゃない？」 と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。 まずは前回の先輩のサンプルを応用（拝借）してみます。 （htmlコーディング） <div class="list"> <ul> <li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テスト

こんにちは。島津です。 しばらく更新が滞ってしまいました！失礼致しました… さて今回は、divやテーブルなどのブロック要素で画像を囲んだ際に 画像の下に不必要な余白が表示されてしまう場合の解消方法について ご紹介しようと思います。 とりあえず実際の表示を見てみましょう。 ▼スクリーンショット ※Windows IE7のものです。 （htmlコーディング） <div> <img src="sample.jpg" alt="" /> </div> <div> <img src="sample.jpg" alt="" /> abcdefg </div> （cssサンプル） body { font-size:40px; } div { padding:0; border:solid 1px #DDDDDD; } img { margin:0; } divの内余白、imgタグの外余白とも0を指定して

こんにちは 馬場です。 「テキストの横に並ぶ画像の位置合わせ」 について、2回に分けてお話します。 今回は、vertical-alignを使った方法を ご紹介します。 「テキストの横に並ぶ画像の位置合わせ」と 言葉で表現してもピンと来ませんが、 サイトで更新があった項目などに 「New」などのアイコンが 表示されているのを ご覧になったことがありますよね？ あの「New」アイコンの 縦方向の位置調整というイメージです。 ・指定なしの場合 ・vertical-align:middleを設定 ・vertical-alignに数値を設定 ▼ 指定なしの場合 何も意識せず、 テキストと画像を 横に並べてみました。 なんだか高さが合ってくれません。 （htmlコーディング） <p>新しい<img src="icon_new_01.gif" /> 新しい</p> ▼ vertical-align:mi

こんにちは、溝上です。 今回はfont-sizeを%指定するときにちょっと便利（かもしれない）font-sizeの指定方法をご紹介します。 以前の記事で先輩がfont-sizeについて書いていますのでぜひこちらも御覧下さい。 以前の記事で先輩はこう書かれています。 (bodyに)75%に指定すると、(サイトの基準が)12pxのフォントサイズになり、この大きさを基準にし、さらに85%にすれば、約10px、120%にすれば約14pxです。 ※(～)は私が足しました。 ただ、この文章内の『約』が示す通り正確なフォントサイズではありません。 ほとんどのブラウザでデフォルトの文字サイズは16pxになっていますので、 先輩の書かれた通りにfont-sizeを指定すると 16px × 0.75 × 0.85 = 10.2px 16px × 0.75 × 1.20 = 14.4px となります。 ブラウザ

こんにちは 馬場です。 さまざまなサイトを観ていると、 背景（背景画像）が 横いっぱいに伸びているページを 良く目にすると思います。 背景を 横いっぱいに伸ばす場合は、 background-colorや background-imageなどの 背景の設定をするセレクタの widthを設定しない （もしくはwidht:autoを設定） ことで、問題なく 対応することが できると思います。 しかしながら、 少し問題があります。 今回は、 ページの横いっぱいに 伸びる背景（背景画像）を 設定した際の問題点と、 その対応策をお話しします。 ・問題点（背景が切れる？） ・widthを設定してみると？ ・対応策（min-widthを設定） ▼問題点（背景が切れる？） （htmlコーディング） <div id="header01">

今回は、サイドメニューがあるページで、メニュー部分背景の高さとコンテンツ部分背景の高さ、ボックスの背景をそろえるためのコーディングをご紹介します。 サイドメニュー部分、メインコンテンツ部分が枠で囲まれているようなデザイン（右図参照）でその枠の高さを揃えたい場合、みなさんはどのようにコーディングされますか？ テーブルで実現するのは簡単ですが、cssコーディングで実現するのは意外に難しいものです。 mainとsidemenuに背景を設定し、高さの指定なしに表示 すると、表示内容によってボックスの高さが決まってしまいま す。図2では、sidemenuの表示内容が少なく、contentsよりも ボックスの高さが小さくなり、ボックスの下がそろいません。 （htmlコーディング） <div id="contents00"> <div id="main00"> テキストテキストテキスト・・・・ </di

今回は、テーブルの表示についてお話します。 cssコーディングと言えど、表を表現する際は、tableを使用します。 （使わない場合もありますが・・・） ただ、私は、tableを使うと幅の指定など微調整がうまくいかず、 レイアウトが思うようにいかないため、(私だけ？) tableを使用するのが苦手です。 そんな私を見かねてか、先輩社員がtableについて 教えてくれたことが今回のお題です。 tableの枠線の表示方法には「separate」と「collapse」の2種類あります。 separate - defaultの表示で、tableの枠線とtdの枠線が分かれて表示され、 その間にスペース(tableタグのcellspacing属性)が開きます。 （htmlコーディング） <div class="section"> <table class="sample01"> <tr><td>aaaa

こんにちは。 溝上です。 主にCSSの基本や、初歩的なことを担当しますが、 今回はある案件でCSSコーディングをしていた時、 どうしても気になった部分があったため、borderのプロパティ(線種)について分析しました。 ※プロパティ分析とは、CSSの各プロパティを調べ、 使用する上での注意点や、対策などを紹介しようというものです。 それではプロパティ分析の第一回目、「ブラウザ別ボーダーの表示差 一覧表」です。 今回使用するプロパティは「border」です。 borderはその名前のとおり、指定した要素の周りを線(border)で囲む、 というものです。 画像の周りを囲んだり、各要素のまとまりを分かりやすくするためによく使います。 また線の種類も8種類もあり、なかなか使いやすいプロパティです。 (inherit、hidden、noneも含めれば11種類ですがここでは割愛します。) しかしこの

こんにちは。 馬場です。 今回はIE6.0のバグについてお話します。 1つのタグにidとclassを両方設定した際に 起きるバグです。 (わかりづらくて、すいません。。。) このバグが発生する条件は 少し限られていて、 idで設定したスタイルを classを付け替えることによって、 見た目を変更しようとすると 発生します。 ページのレイアウトは一緒だけど、 色違いのページが数パターンある という場合などで 使用するかもしれませんね。 ▼バグの発生条件▼ ・IE6.0で確認している。 ・1つのタグにidとclassを設定している。 ・classを切り替えることにより、スタイルを切り替えている。 ・セレクタの最後がそのidとclassの指定で終わっている。

第1回目は「フッタ部分リンクメニューのリストタグによる実現方法」について、お話します。 まずは弊社のホームページ、フッタ部分をごらんください。 | 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ | というような、リンクがあるかと思います。 このようなリンクメニューは さまざまなサイトのヘッダ部分、フッタ部分に使用されています。 みなさんがこのようなリンクメニューを表現する場合、 どのようにコーディングされますか？ 「どのようにコーディングする？　そのままコーディングするに決まってるじゃん。」 と、ほとんどの方が考えると思います。 具体的には下記のようになるわけですね。 htmlコーディング例 <div> ｜会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ ｜ </div> ※アンカータグは省略 これでも問題はありませんが、

今回は「ロールオーバー画像の実現方法」についてお話します。 ロールオーバー画像は、 グローバルナビ、サイドメニューなどの ボタンリンクによく使用されています。 ホームページをコーディングする際には 決して避けては通れない、 不可欠な技術と言えます。 JavaScriptなどで実現する方法もありますが、 cssプログですので、 もちろんcssによる実現方法を ご紹介します。 私からは ・直接画像を置く方法 ・テキストの置き換えを使った方法 の2パターンご紹介します。 直接画像を置く方法 ボタン画像をdivなどで囲み そのボタン画像を囲んだdivの背景に ロールオーバー時の画像を設定します。 わかりにくいですが、ボタンを囲んだものの背景に ロールオーバー時の画像を設定することで ボタンの下に、ロールオーバー時の画像が 隠れている状態です。 そして、ボタンをマウスオーバーした際に、 ボタンの表示

今回は、「角が丸い背景（角丸）の実現方法」をご紹介していきます。 サイドメニューや、コンテンツをグループ毎に表示する際など、 角が丸くなっている枠で囲まれているページを見たことがあるかと思います。 この角が丸くなっているボックスのことを通称「角丸」といいますが、 みなさんはこの角丸をどのようにコーディングされていますか？ css3では、角を丸くするスタイルや １つの要素に複数背景画像を設定することができますが、 まだ策定段階（対応していないブラウザがほとんど） のため、今回は触れません。 角丸の実現方法はいくつかあると思いますが、 私からは下記の3パターンご紹介します。 ・分割なし ・2分割 ・3分割 （通常はこちらを使用） 「分割なしのパターン」 これは、普通に背景に設定するだけのパターンです。 （htmlコーディング例） <div class="entry1"> テキスト<br />