[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
[CSS]3カラムレイアウトのサンプルサイト集 | コリス
noupeにエントリーされている３カラムレイアウトのサンプルサイトの紹介です。 9 Timeless 3 Column Layout Techniques 紹介されているのは、３つのカラムが「固定：２、可変：１」「固定：３」「可変：３」「レイアウト サンプル集」となっています。 固定：２、可変：１
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
縞模様で目立つ枠線(囲み)を作る - ［ホームページ作成］All About
縞模様の枠線を作る スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。 今回は、以下のような枠を作る方法をご紹介いたします。
全部まるごとスタイルシート テキスト ―単語内での改行処理を指定する―
■ テキスト ▼ color »» 文字色を指定する ▼ text-decoration »» 文字を装飾する ▼ text-transform »» 大文字・小文字に置換する ▼ line-height »» 行の高さを設定する ▼ text-align »» 行揃えを指定する ▼ vertical-align »» 文字の垂直位置を指定する ▼ text-justify »» 文字の均等割付を指定する ▼ letter-spacing »» 文字間隔を指定する ▼ word-spacing »» 単語間隔を指定する ▼ text-indent »» １行目にインデントを設定する ▼ white-space »» 空白や改行をそのまま表示する ▼ white-space »» 改行しないで表示する ▼ line-break »» 禁則処理を適用する ▼ word-break »» 単語
CSS振り分け その3
ご使用の UA 名と違うものが表示されることはないはず。 ソース 強調部分は前頁の記述と違う部分 head 内の記述 <link rel="stylesheet" media="screen,tv" href="common.css" type="text/css" title="基本"> <link rel="stylesheet" media="screen,tv" href="mac_ie5-opera.css" type="text/css" title="Mac_IE5-Opera"> <!--[if IE 5 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]--> <!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href
すぐに忘れるCSSメモ
ホーム ＞ HTMLに役立つヒント＞CSS Tips ＞ すぐに忘れるCSSメモ ■すぐに忘れるCSSメモ 僕がすぐに忘れてしまうCSSのプロパティ。他の人には参考にならないだろうなぁ(^^; まだまだ書きかけで増える予定。 position float justify font-family list-style-image リンクをボタン風に form要素の見栄えを変える CSSハック 印刷用CSS ●ポジション/position ▲ページトップ position:static/relative/absolute/fixed ; top : 0px; left : 0px; static デフォルト。上位のブックの終わりが起点。top/leftの指定は無効になる。 relative 相対的な位置指定。staticで表示される位置が起点となる。上位のブロック要素 absolu
スタイルシートでドロップキャップを作る - ［ホームページ作成］All About
雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 この疑似要素を使うと、雑誌などでよく見かける装飾「ドロップキャップ」を作ることができます。 スタイルシートだけで簡単にできますので、ぜひ試してみて下さい。 ドロップキャップを活用する上で必要になるのは、次の3点です。 first-letter疑似要素
どのリンクが選択中なのかを際立たせる装飾 - ［ホームページ作成］All About
メニューやリンクリストに活用するとおもしろいかも？ リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。 以下のリンクにマウスポインタを重ねてみてください。 リンクにポインタを重ねると、リンク文字の右側に赤色の矢印（）が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。 ここで表示しているリンクは、通常のテキストリンク（文字で書いたリンク）です。 どんな文字を何文字表示させているリンクの横でも実現可能です。 矢印でなくても表示可能 もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能で
ブログ・テンプレート作成入門
MovableTypeのオリジナル・テンプレート作成を０から図解式で解説します。 ブログ・テンプレート作成入門トップ ブログテンプレートを０から作ります。 はてなブックマーク Yahoo!ブックマーク Movable Type3.2をインストールして、そのブログをブラウザで見ると、はじめにシンプルなデザインのブログが表示されます。 表示はシンプルなのですが、それに反して最初から用意されているスタイルシートの中身は非常に複雑な記述となっており、デザインを変更することが初心者には高いハードルとなっているのも事実です。最初は私も、タイトルや見出しの文字サイズを変更するだけでも30分以上もかかってしまいました。 そのため、当サイトでは、最初に設定されているスタイルシートやテンプレート用いずに、０からデザインテンプレートを作成する方法を紹介しています。インデックステンプレート、カテゴリテンプレート
CSS Hackを使わずにIEのバグに対処する方法 - ［ホームページ作成］All About
Internet Explorerでのみ表示がおかしい場合の対策 スタイルシートを使ってデザインしていると、他のモダンブラウザではうまく表示されるのに、 IEでのみ崩れて表示されてしまうことがあります。 IE7ではうまく表示されるのに、IE6以下ではおかしくなってしまう…という場合もあるでしょう。 そういったときには、IEにのみ別のスタイルを適用させる、「CSS Hack（ハック）」がよく使われます。 当ガイドサイトの記事でも「スタイルシートでドロップキャップを作る」の5ページ目で、Mac版IEのみを除外するCSS Hackを使っています。 CSS Hackは、様々なものが考案されています。 IEに限らず、OperaやSafariなど、特定のブラウザにのみ適用する方法や、特定のブラウザのみ除外する方法などがあります。 それらは、うまく活用すると、どんなブラウザで見てもうまく
スタイルシート(CSS)で段組を構成する4(前編) 段の背景色が切れないようにする - ［ホームページ作成］All About
この記事は「スタイルシートで段組をデザインする方法」を解説するシリーズの第4回です。 以前の記事で解説した内容については触れませんので、以前の記事をまだ読まれていない場合は、先にそちらをご参照下さい。 第1回：スタイルシートだけで段組を作る 第2回：スタイルシートだけで作る段組の例 第3回：隣の段が下に回り込むのを防ぐ （番外編：スタイルシート段組のメリット） スタイルシートで作る段組に起こる問題点(2) 前回は、段組を構成する段の長さ（高さ）が異なる場合に、「長い段」の中身が隣の「短い段」の下側に回り込んでしまう問題の解決策をご紹介致しました。 実際に活用された方は既にお気づきかも知れませんが、実はそれだけではまだ問題が残る可能性があります。 段の背景色が途中で切れる 段組を構成する段に背景色を指定している場合、短い段の背景色が途中で切れてしまうという問題が
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
箱形のページ移動リンクを作る - ［ホームページ作成］All About
見やすくクリックしやすい箱形ページ番号 一部のニュース系サイトなどで見かける、箱形のページ移動リンクを作ってみましょう。 ただ数字を並べるだけよりも大きく見えるので、分かりやすくてクリックしやすいリンクになります。 例えば以下のようなものです。 上記では、画像は使っていません。ページ番号はすべてテキスト（文字）です。ですから、大きさの変更が可能です。 ブラウザの設定で文字サイズを変更すると、ページ番号の大きさも変化します。 上記は、ページが10まであって3ページ目が表示されている場合の例です。 「3」の部分だけ色が変わっていてクリックできないのはそのためです。 テキストですから、数字以外も使用可能です。例えば、A・B・C…なども使えます。使ってみた例は下記の通りです。
スタイルシートを切り替えられる機能を作る - ［ホームページ作成］All About
スタイルシートをファイルごと切り替える 現在のページで読み込んでいる外部スタイルシートを、プルダウンメニューを使ってファイルごと切り替えてみましょう。 スタイルシートファイルそのものを動的に変更できるので、ページの装飾やレイアウトを大きく変更させることができます。 複数のページデザインを用意しておき、閲覧者の好みに応じて切り替えさせることなどに活用できるでしょう。 スタイルシートファイル動的変更サンプル 下記のプルダウンメニューを変更すると、読み込まれているスタイルシートファイルが変更され、下記ボックス内の装飾が変化します。 試しに変更させてみて下さい。 ※JavaScriptが有効な場合のみ動作します。 スタイルの変更： 閲覧者の好みに応じてスタイルを変化させられます。 スタイルシートファイルそのものを変更しているので、何でも自由に装飾を変更できます。 上記
ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About
ドロップダウンメニューとは ドロップダウンメニューとは、主にメインメニューが横方向に広がっており、メニュー項目の上にマウスを載せると、隠れていたサブメニューが下側に展開するようなメニューのことです。多数のウェブサイトで主要なナビゲーション機能として使われており、HTML＋CSSだけで簡単に作成できます。 たいていのウェブサイトには何らかのメニューUI(ユーザ・インターフェイス)があるでしょう。横いっぱいに広がった領域内でメニュー項目を横方向に並べたUIをメニューバーと呼びます。そのメニュー項目から下方向にサブメニューが展開するUIのことを特にドロップダウンメニューと呼び、プルダウンメニューと呼ばれていることもあります。 ウェブサイト上で提供するナビゲーション機能として、メニューはとても基本的なUIです。ぜひ何らかのメニューを用意しておきましょう。その方法の1つとして、本記事ではメニューバー
![ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/391cf8b3a0a84ef4a8ab329f8ab56ad3ad519102/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F1%2F1%2F201704181214%2Ftopimg_original.png)
6/7 マウスが載ると画像が変化するリンクを作る [ホームページ作成] All About
ソースのまとめ （複数のリンクを並べる場合） 画像リンクを複数個並べて表示したい場合のために、 共通する部分の記述が1回で済む書き方をご紹介しておきます。 ■HTMLソース： <p class="imagelinks"> <a href="sample.htm" class="mouse">ねずみリンク</a> <a href="sample.htm" class="rabbit">うさぎリンク</a> <a href="sample.htm" class="dog">いぬリンク</a> <a href="sample.htm" class="kangaroo">カンガルーリンク</a> <br clear="left"> </p> <style type="text/css"> /* ▼初期状態のリンクの装飾 */ p.imagelinks a { display: block; wid
![6/7 マウスが載ると画像が変化するリンクを作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
段落の先頭1文字を別デザインに - ［ホームページ作成］All About
CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About![CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/31482c59a0532bdfd65d75838f05b81f8275ed0e/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F3%2F6%2F201711261232%2Ftopimg_original.png)
