floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode
原点回帰ということで、たまにはビジュアルデザインのことでも書いてみます。 僕が思うに、プロとアマのデザイン力の決定的な違いは細部の詰めだと感じるわけです。 もちろん、ごく基本的なレイアウトだったり、配色だったりといったデザイン力の向上が何より大事だし、そこさえクリアすれば、ユーザーに対して最低限のおもてなしはできると言っていいです。 ただし、他のモノとは何かが違うより優れたデザインを作り上げるためには、普通のユーザーは気にも止めないようなほんの些細なところに対する気遣いが必要になってきます。 まさに「神は細部に宿る」というやつです。細部を突き詰め出すとキリがなかったりしますが、ここに気づけるかどうかが一流のデザイナーとそうでない人の別れ目のひとつなんじゃないでしょうか。 見た目で揃える
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
「Webサイトの右上って、誰のための一等地？」
文：糸永洋三 現在開発中のWebサイト内に、どこにどういった形で広告枠を設計するか、で、非常に悩んでいる。ここ２週間、開発パートナー、同僚のパウロと一緒に。何回もやりなおしている。コンテンツとの配置バランスを考えながら。そして、いよいよ、今夏のサービスインに向けて、余裕もなくなってきた（苦笑）。 広告会社の本業の一つの柱である「メディアビジネス」の媒体社担当をしていた昨年までの自分には、新しいチャレンジだ。Media JUMPを始める前、さまざまなメディア枠のセールス、企画、商品開発などを行っていた。得意先に対する新規メディア企画、新商品提案のために、媒体社と一緒に協業し企画書を書き、時にハードネゴをして、広告会社としての意思、志を持ちながら仕事をしてきた。そして、そこに広告会社としての存在意義があると思って動いていた。 そして今、Media JUMP。媒体社と協働して、広告をどう売るか？
WEBレイアウト作成用のモック作成ツールキット:phpspot開発日誌
Free Sketching & Wireframing Kit WEBレイアウト作成用のモック作成ツールキット。 次のようなデザインで、UIパーツがつまったツールキットが各種ベクターフォーマット（.ai, .pdf, .svg, .eps) の形式でダウンロードすることが出来ます。 モック作成のテンプレ等は色々ありますが、デザインが本当にモックっぽいところが特徴 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる「Dynamic Dummy Image Generator」
David DeSandro: jQuery Masonry
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
ユニークなレイアウトのウェブサイト20選
Vandelay Website Designのエントリー「ユニークなレイアウトの20のウェブサイト」から、ユニークなレイアウトのウェブサイトの紹介です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
