スチーム速報 VIP あの夏の日、僕たちは輝いていた。
![パスワード認証](https://cdn-ak-scissors.b.st-hatena.com/image/square/446aaa87fc9c270376cebb19f84190971d215185/height=288;version=1;width=512/https%3A%2F%2Flivedoor.blogimg.jp%2Fnewsteams%2Fimgs%2Fb%2F0%2Fb025514d-s.jpg)
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス(視差)効果を与えるスクリプト「mParallax」を紹介します。
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論[絵文録ことのは]2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比)
Modern, well-designed web pages deserve special focus in internet. They receive that thanks to so-called CSS galleries, into them are such pages arranging. On this page you can find a list of quite 44 CSS galeries of whom webdesigners from all the world gathers inspiration. 個人的には下記のサイトなんかよく利用させてもらってます。 CSS Beauty CSS Bloom CSS Blast CSS Drive CSS Mania CSS Remix CSS Vault Darkeye Design Shack Unma
はてなブログには、同じ話題でつながる「グループ」があります。まずはこちらの「2024年開設ブログ」に入りましょう。同時期に始めたブログとつながることができます。 「2024年開設ブログ」のグループ
Diary Webデザインで最も愛されているフォント16選『16 Best-Loved Font Bits In Web Design』 Webデザインでよく使われるフォントはなんだろう。 そんなときにおすすめなのが、『16 Best-Loved Font Bits In Web Design』。Webデザインで最も愛されているフォント16選だ。 以下にご紹介する。 1.Helvetica, Helvetica Neue, Arial 2.Verdana 3.Georgia 4.Trebuchet MS 5.Century Gothic 6.Lucida Sans Unicode, Lucida Grande 7.Palatino 8.Garamond, Baskerville, Caslon 9.Univers Condensed, Linotype Univers 10.Myriad
CSSで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「CSSで横三角をやる方法」。2バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね! » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ! よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね! でも » をつかえば、画像がなくてもこんな感じ! » Diary » Bookmark » Fotolife »
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名(generic-family)である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
数で合理的にデザインする - サイズ編 2007-03-08 0 0 Design size サイズ編とカラー編の2回にわたって書くつもりです。今回はサイズについて。 「やってみたらちょっと大きすぎた / 小さすぎた」といった試行錯誤もデザインの醍醐味ではあるのですが,あらかじめ数を知っていると合理的にデザインすることが出来ます。 468px アフィリエイトプログラムを組み込む場合,コンテンツ部分の幅は最小で468px。AdSenseやAmazon,その他アフィリのバナーがこのサイズだからです。写真やキャプチャなどの画像も468px以内にしておけばよいでしょう。リキッドレイアウト(可変幅)にしたときも,468pxより縮められないようにすれば,画像がはみ出さずにすみます。 3 : 4 デジカメなどで撮影した写真の縦横比は3 : 4です。トリミングする際も3 : 4を維持すれば,形の統一がは
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges. Neatly packed in a gorgeous hardcover, the book featur
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く