CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
いよいよ2月13日から始まるIE7の自動更新をブロックする方法 - GIGAZINE
事前に予告されていたとおり、2月13日からはWindowsUpdateに「Internet Explorer 7」が含まれるようになり、自動的に更新されることになっています。正確には「優先度の高い更新プログラム」として配布されることになっており、勝手に知らない間にインストールされることはないものの、それなりの変化を日本のインターネットにもたらすのはほぼ確実な情勢です。 しかし、中にはもろもろの事情でインストールしたくない場合もあるはず。その際の対策方法として「Internet Explorer 7 Blocker Toolkit」というものが配布されています。もう少し様子見してから……という慎重派な人には最適。 実際の使い方と詳細は以下から。 Internet Explorer 7 の自動更新による配布 ダウンロードは以下から。 ダウンロードの詳細 : 自動配布の無効化ツールキット 上記サ
Eric's Archived Thoughts: Resetting Again
I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking. Here’s the result of that thinking. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul
1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
デザインってオモシロイ -MdN Design Interactive- TOP
MdNでお馴染みの著者やトップクリエイターなどが登壇！最新のノウハウ＆実践的なテクニックを学ぶ「MdN ✕ Bau-yaの教室」 2021.8.23 MON
WordPressテーマ（テンプレート）カスタマイズのまとめ（日本語訳） - Trans
著者: Nick La件名: WordPress Theme Hacks日付: 2007年10月15日URL: http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/訳者: Arata Kojima WordPress Theme Hacks WordPressは最初ウェブログやブログプラットフォームとして開発された。しかし、今、WordPressはとても力強く成長し、僕たちはWordPressであらゆるタイプのWebサイトを作り、CMSとしても利用することができる。 この記事では、みんながよりよいWordPressのテーマを作るために、僕の技をみんなと共有しようと思う。僕はプログラマでもデベロッパーでもない。だから、フロントエンドの開発にフォーカスしようと思う。 そういえば、言い忘れていた。私のようなプログラマーでは
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
遠近法ノート 蚊取り線香
Illustratorを使って蚊取り線香のような渦巻きを作る技。 先日、会社で披露したら、やたらとウケました。 これは案外思いつかないものなのかな？ ●大きな円と小さな円を描き、中心で揃えます。 ●ブレンドツールで線を増やし、「分割・拡張」でパスに変えます。 ●半分にカットします。 ●コピー＆ペーストして回転。 ●1ラインずらしてくっつけます！ ●あとはパスをつなげてと……二重になってますから、片方取り去れば（文字どおり蚊取り線香のように）完成です。いやぁ簡単ですな。 ……もっとも、この描き方は本当を言うとかなりインチキなのですね。 それが証拠に、少し形が崩れて見えませんか？ 人間の眼はこういうことに厳しいものであります。中心部が美しくないし、左上・右下方向に変形してるのがわかってしまうと思います*1。 蚊取り線香のような渦巻きは「アルキメデスの螺旋」といい、 r=aθ という式で表すのだ
HTMLとXHTMLの違いはなんだろう？
HTMLとXHTMLについて HTML4.01 Hyper Text Markup Languageの頭文字を取ったもので、文書を意味付け（マークアップ）しWWW上に発信する共通言語です。HTML4.01はその最新版です。 XHTML1.0 上記のHTMLをXMLの文法に基づいて再定義したものでHTMLに比べ文法が厳密になっていています。現在では、HTMLに変わりほぼ主流となっています。 HTMLとXHTMLは同じハイパーテキストマークアップ言語であり、文法もよく似ています。そのためHTMLを知っている人なら今直ぐにでもXHTMLでWebページを作ることができます。しかし、似ているせいで「どこが違うのか・何が違うのか」があまり分かり易くありません。そこで、HTML4.01とXHTML1.0の相違点を比較します。 ソース例 ■ HTML4.01(Strict) 01: 02:<!DOCTYP
何かと役立つCSSの技 || Cool Web Window
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
CSSだけでフレームを作るテクニック:phpspot開発日誌
CSS Frames v2, full-height | 456 Berea Street Way back in August of 2003 I wrote a short article called CSS Frames, in which I described a technique to emulate the visual appearance of HTML frames with CSS. CSSだけでフレームを作るテクニック。 通常、フレームというとframeタグを使って実現しますが、検索クローラーに対して不利などの理由から最近ではあまり見かけなくなってしまいました。 フレーム風のインタフェースをＣＳＳだけで実現するテクニック。 常にヘッダー、フッターのナビゲーションが固定されているのでフレームの使いやすさはそのままで、かつクリーンなHTMLによってフレームを実現でき
Illustrator_FAQandTips
掲示板に寄せられた投稿の中で、比較的多い疑問・質問をまとめ、それに対する回答例と共に掲載しました。 過去ログ番号は、より具体的に周辺情報を得たい時、参照して下さい。 サイト内のチップス的情報へのリンクも、項目として掲載しました。 [用語検索]・[Google検索]も併せてご利用下さい。 Illustratorのバージョンアップに伴い、既に用済みとなった項目も有りますし、この「回答」は問題の解決を保障するものでは有りません。 又このページを起因とする、如何なる損害に対し責任は負えません。 Mac,Win、或いはアプリ、バージョン互換 設定及びパフォーマンス関連 Illustratorデータ作製 フォント、テキスト関連 PC、OS 、その他一般 Mac,Win、或いはアプリ、バージョン互換 設定及びパフォーマンス関連 Illustratorデータ作製 フォント、テキスト関連 PC、OS 、その
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
CSSの小技集、20個:phpspot開発日誌
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
hereticanthem co.,ltd. » CSSやJavaScriptを使ったオシャレな技やサンプルが解説＆配布しているサイトのまとめ
パチンコの遊び方と攻略 – 成功のための戦略を発見しよう！パチンコの遊び方をマスターしよう！プロのテクニックを習得して勝者に！パチンコの楽しさを体験しよう！成功のための戦略を発見しよう！戦略を鍛えてより高い勝率へ！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ADP: floatレイアウトでつまづかないためのTips
CSS Tips：メモランダム