リンクがついた画像の下線を消す方法｜web bibo
<a>タグの中に<img>タグを入れたら画像の下に下線が付いてしまいます。アフォーダンスを応用したボタンや明らかにクリックできるバナーなどに下線がつくのは好ましくないので、この下線を消す方法を紹介します。 HTMLを記述 <p><a href="http://www.webbibo.com/">CSSのTipsサイト「webbibo」<img src="./images/img_underline_01.png" /></a>でCSSのテクニックを公開しています。個人の備忘録として初めましたが、自分と同じCSSに悩まされた人にも解決していただきたく、このようなページを設けて公開しています。</p> CSSを記述 a img { margin: 0px 0px -6px 0px; border: 3px solid #FFFFFF; } →画像に付いた下線を消したサンプル 画像の周りに背景色
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid
FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。 グリッドは、2分割、3分割、4分割、5分割が用意されています。 /* * Grid * A simple, flexible, fluid grid system that can flow nicely inside a fluid or a fixed container or play good with another Grid system. * Brajeshwar, http://
Grid
1 1 1 1 1 1 1 1 1 1 1 1 1 11 2 10 6 6 Nested Grid 8 8 Nested 8 Nested Again 4 4 4 Offsets 1 11 1 10, offset 1 1 9, offset 2 1 8, offset 3 Centered 3 centered 6 centered 9 centered 11 centered Source Ordering 2 10, last 3 9, last 4 8, last 5 5, last 6 6, last
スタイルシート［CSS］/ページ全般/印刷時の改ページ部分を指定する - TAG index
avoid の指定は、Opera以外では対応していないようです。 指定例 見出し（h2要素）の直前で改ページさせる例 h2 { page-break-before: always; } 水平線（hr要素）で区切って改ページさせる例 hr { page-break-after: always; } 使用例 h2要素の直前で改ページさせる例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> h2 { page-break-before: always; } </style> </head> <body> <h1>印刷時の
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
軽量なフレームワークだよ！とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな？ サンプル適当ですみませんけどサンプルです .button { font: 14px/36px "Droid Sans", sans-serif; height: 36px; border: 2px solid #333; padding: 5px 14px; margin: 0 6px; text-shadow: 1px 1px 1px #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px 1px 6px rgba(255, 2
[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション
ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 Sexy CSS3 menu デモページ [ad#ad-2] 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリクエストを減らします。 カスタマイズ 簡単にドロップダウン型などに変更できます。 このスタイルシートのアイデアの元となったのは、LESSで使用されているダウンロードボタンです。 LESS 実装方法 HTML HTMLはspan要素を使っている以外は、クリーンです。 このspanはスタイルをつけるのに必要で、疑似要素非対応ブラウザへの配慮
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]わずか1KBのスタイルシートでもここまで美しいレイアウトができる -CSS1K
CSSの制作・検証に役立つChromeの機能拡張のまとめ
IDEA * IDEA
IDEA * IDEA
2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About![2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] 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)
