これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
ミニマリズムから学ぶウェブデザインのセオリー
伝えるべきメッセージを明確に伝え、余分なものを取り除くミニマリズムから学ぶウェブデザインのセオリーを紹介します。 Minimalism in Web Design: A Guide [ad#ad-2] ミニマルなウェブデザインってどういうの？ という方には、下記の記事もおすすめです。 ミニマルなウェブデザインで使用される特徴的な12のエレメント 下記は各ポイントを意訳したものです。 はじめに 1. ミニマリズムの概念 2. 取り除く美学 3. よりスマートなカラー 4. タイポグラフィ 5. レイアウト構造 6. ネガティブスペース 7. バランス 何を学ぶべきか はじめに ミニマリズムは多くの異なるコンテクストで話し合われるワードです。それがライフスタイル、あるいは芸術スタイルにかかわらず、なにかがミニマリズムであるということはいろいろな意味をとることができます。 ウェブデザインにおいて
シンプルでフリーな使えるCSSのレイアウト集７１５:phpspot開発日誌
715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop Vip » ホームページやブログで効果的なサイドバーをデザインする12のポイント
