しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
美大で紙媒体専攻してた人がWebデザインやることについて - MEMOGRAPHIX
ぼくは美術大学で4年間デザインを勉強してて、なかでも紙媒体のグラフィックデザインを専攻してた。所属研究室もプリントメディアを専門にやるところだったし、卒業制作も、なんか本みたいなの作ってた。だから、ぼくがWebデザインをやっていることについて、意外に思われたり、不思議がられたりすることがある。その研究室でわざわざWebデザインを志す人は殆どいないからだ。 しかし、紙で学んだことが無駄だと思ったことは一度もなくて、むしろWebデザインで非常に役立っている。ぼくが紙媒体を専攻してた理由は、紙は歴史のあるメディアだし、グラフィックデザインの基礎をちゃんと学ぶのに最適と思ったからだ。基礎というのは、タイポグラフィの扱い方とか、ジャンプ率とか、配色とか、そういうデザインの諸ルールのことで、そのルールはそのままWebデザインに通用する。今のWebデザインの流れを見ていると、フラットデザインとか、Web
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
インターン募集とCSSアニメーション - tikeda::Diary
http://www.hatena.ne.jp/company/intern2010/ 本日より、2010年度のインターンの募集が始まりました。この募集ページ一見普通のページですが、大きく分けて5カ所に分かりやすい遊びを仕込みました。Safariなどでアクセスして、気になる所をクリックするとお楽しみ頂けます。動きはhtmlのclass名を変化させる事によるCSSで実現させてます。場所毎に少し具体的に解説しておきます。 右上のバッジ 単純回転です。最初1周5秒にしてたら、酔うとの意見を頂いたwので倍の10秒になっております。Chromeでも回ります。 h1 img.sun{ -webkit-animation: sunRoll 10s infinite linear; } @-webkit-keyframes sunRoll { from { -webkit-transform: rotat
2010年に備えて、知っておきたいウェブデザインのトレンド
2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
灰色ハイジ.com
埼玉便利帳（当サイト）の管理人ハイジです！ この埼玉便利帳は、埼玉県で生活する方々便利で、かつ地元にある良いもの良い場所などを再認識してもらえるよう作りました。埼玉県内にある評判の良い医者や弁護士事務所、不動産屋さん、レストランの情報から、観光名所などなど盛りだくさんでお届けします。 埼玉便利帳の更新作業は一人で行っていますので、ちょっと時間が取れず更新が遅くなることもあるかもしれませんが、そこは皆様、ご容赦いただければ幸いです。 一応念のためですが、埼玉便利帳の情報の利用はご自身の判断の元ご活用ください。情報の正確さや新しさなどについて当サイトは一切の責任を負いません。
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
a要素が2行になった場合に背景下にテキストが来ないように。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad
| ＾＾ |秒刊SUNDAY | WEB開発者がSleipnirを絶対に使ってはいけない７つの理由
2009年04月29日 WEB開発者がSleipnirを絶対に使ってはいけない７つの理由 カテゴリ：WEBデザイン Sleipnirは使いやすい、すばらしい･･･などと絶賛するユーザがいますが、果たして本当にそうなのでしょうか、私はそれは有り得ないと断言します。 ◆読む前に WEB標準だの、コーディングだのAcidだの･･･訳がわからない方は、そのままSleipnirを使っていてOKです。 判りやすく言うと、SleipnirはアナログSafari、Firefoxなどは地デジぐらいの違いがあります。 という説明をしますので、開発者以外の方には『ふーん』程度に思っていてください。 では。 １：表示結果がWeb標準でない。 上の写真は、左から『Firefox、Safari、IE6、Sleipnir』をAcidという確認ツールで見比べた結果です。 Firefox、Safariについてはほぼ同じ
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
色覚異常によるカラースターの色の見え方 - no.10
はてなスターの色つきバージョン、「カラースター」が開始されて一週間。 ホッテントリに入っている良エントリーにカラースターが付けられているのも、ちらほら見かけるようになりました。 このカラースターに言及しているエントリーを見まわっていたら、一つ、気になる記事を発見！ 面白いと思うけど，これ，赤と緑が見分けづらいのだが。 どこまで赤でどこから緑か，画面に顔を近づけないと分からない。 記事元：カラースターの赤と緑が見分けづらい - 安眠アダージェット これは不便だろうなーと思って、どんなふうに見えるのか調べてみることにした。 検証方法 ソフト：富士通が提供している「Color Doctor」を利用。 画像：カラースターショップのトップ画像。（本当はカラースター全部が付けられている記事で検証したかったけれど、見つけきれなかった。） 色覚異常の知識： Wikipedia の色覚異常を参照。他には、色
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
Googleから消されました - 服部 哲也 : Webサイト制作 [All About プロファイル]
今日は、笑えない話です。 あるサイトがGoogleから消されてしまいました。 Googleのウェブマスターツールを使っていると、添付画像のような警告が来ます。 経験された方は少ないと思いますが、参考にして下さい。 実はこのサイト、ガイドラインに違反してるとは思えないサイトなのです。 隠しテキストやリダイレクト、不正なプログラム… 何もない。 でも、「え、もしかしてコレ？」というのを発見しました。 メニューにテキストではなく、画像を使い、マウスの動きでbackgroundを変化させていました。リストタグで画像を並べているので、メニューのテキストが、そのままでは上に乗ってしまいます。それを回避するために、 text-indent: -9999px としてテキストが見えないようにしていました。 コレは、SEOがどうこうと言うことではなく、CSSでコーディングするのに仕方なく
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
インターネットは何色？ ブログは赤で、ゲームサイトは緑
IDEA * IDEA
