floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
新人デザイナーならブクマして損なしのWebデザインギャラリーサイト
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5時代のWebデザイン
2. 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』『Webデ ザイナーのためのHTML5移行ガイド（共著・インプレスジャパン刊）』、 など HTML5 Conference 2012 特別価格980円 Twitter: @cipher / @proteanbm http://direct.ips.co.jp/html5/ Instagram: @cipher 3. これからお話しすること • Webをデザインするって何だろう？ • どん
様々なサイトナビゲーションとそれらの役割 ｜https://wp.yat-net.com/name
Webサイトの中身は情報量が多く広大になりがちです。その為「ユーザーが目的の情報へいかに迷うこと無くたどり着けるか」を考えることが非常に重要なことになってきます。それを解決するのがナビゲーションであり、 我々はWebサイトを構築する段階で様々なナビゲーションパターンから、場面場面に応じて必要な物を選定して配置する必要があります。 今回の記事ではその様々なナビゲーションにはどういうものがあり、それぞれどういう役割を担っているかを解説したいと思います。 1.ナビゲーションパターンについて 2.様々なナビゲーションタイプ 3.まとめ ナビゲーションパターンについて まず初めに、長谷川敦士氏がパターン分類した「7つの主に企業サイトで使われるナビゲーション」を見て行きましょう。 階層型ナビゲーション 機能ナビゲーション 関連ナビゲーション ダイレクトナビゲーション パンくずナビゲーション ステップナ
これはすごい！スクロールすると世界が変わるカッコ良すぎるウェブサイト4選+α
こんにちは、にっしーです。 今回は衝撃を受けたスクロールデザインのウェブサイトを紹介します。 一見普通なウェブサイト。スクロールしたら世界変わります。Let's scroll!:) ※ブログ読者のみなさんに教えていただいたサイトも随時追加しています:) http://balloon.am/ http://2011.beercamp.com/ http://bloom.io/ http://www.nikebetterworld.jp/ ここから+α http://www.nintendo.com.au/gamesites/mariokartwii/ via @attripさん http://sai-zen-sen.jp/special/reddragon/ via @satorumurmurさん いかがでしたか？ 「衝撃受けた！」って人はTwitterやFacebookで拡散していただける
はてなブログのデザインの裏側 - Uedayworks::HatenaBlog
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
インスパイアされるWebアプリ&サイトデザイン50 – creamu
speckyboyで、インスパイアされるWebアプリ&サイトデザインがまとまっています。 ざっといくつかご紹介。 ↑はPhotoSnack。 Image Spark YOKABOO Gambolio.com Autodesk Project Dragonfly 以下のカテゴリーに分かれてたくさん紹介されているので、ぜひ見てみてください。 ・Clean, Simple and Nice Designs ・Minimal and Effective ・Vector and Large Background ・Corporate and Professional ・Modern and Typical (Web 2.0ish) ・Stylish and Classic Layouts ・Graphically Improved Designs ・Flash, Flex and AIR Desig
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
[連載]Webデザイン入門（1日目） | Stocker.jp / diary
本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。 そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。 ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。 既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと
![[連載]Webデザイン入門（1日目） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aeba51f4329633993f3f50c3007e124fe9a30ab/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fb433d63ba5e7a465dbac23082f36bb7f-500x375-1.png%3Ffit%3D500%252C375%26ssl%3D1)
サイトの「色」選びに役立つ20のツール
色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できるサイトもあり、取っ付きやすいと思います。 Color Trends + Palettes :: COLOURlovers kuler ColoRotate: Colors come to life in 3D. Color Theory @ ColorJack カラーピッカータイプ 好きな色を選ぶと、その色と相性のよい色や関係性の高い色などが表示されます。 ウェブ配色ツール Ver2.0 Color Scheme Designer 3 [ws] Color Scheme Generator 2 Col
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー - かちびと.net
Warning: Undefined array key "width" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1681 Warning: Undefined array key "height" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1682 自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目
WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
manbetx官网电脑下载_万博manbetx官网app_万博manbext体育
天津鸿铂建筑装饰工程有限公司 天津鸿铂建筑装饰工程有限公司是最具有生产能力的综合性企业，拥有强大的生产技术队伍。产品设计新颖、质优、价廉、精益求精、以不断的创新给新老客户提供最理想产品，赢得新老客户的信任和支持。公司经营范围：玻璃幕墙、万博manbext体育、断桥铝门窗、钢制防火门、车库雨棚、肯德基门、玻璃隔断、彩钢房、楼梯栏杆、铁艺围墙、园林设施、manbetx官网电脑下载等各种室内外装饰工程。 了解更多信息 >>
伝えるための情報デザイン、文章デザイン
私たちは人に何かを伝えたいときに、言葉・絵・音・映像などを駆使して表現します。標識のようにひとつの形式でユニバーサルに伝わることもありますが、そうはいかないことがしばしばあります。このサイトでよく取り上げている「デザイン」「マーケティング」といった言葉は、広く使われている言葉ですが、人によって解釈や使い方が違うことがあります。そこで、切り口や伝え方を変えることで少しでも多くの方に興味をもっていただくよう工夫しています。 文章のペースや表現を変える技法を「修辞 (Rhetoric)」 と呼びます。この言葉にピンと来ない方はいらっしゃると思いますが。Wikipediaに書かれている技法の例をみると、耳にしたことがある言葉がたくさん出てきます。擬人法、反語、省略法、直喩法・・・これらをまとめて「修辞」といいます。 情報は大事ですが、その情報をどのように伝えたら効果があるのかを意識しなければ伝わる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーポレートサイトのWebデザイン｜ズロック
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
WEBデザインの評価・リンク集 || WEBデザイン・データベース【WEBdeDB】
見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
