ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です! フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
DQ9ではじめてマルチプレイやりました! 新しい楽しみ方だと思うなー。 ちなみにやったのは、この人たち。 collamoの中の人。 CSS Sprites作成ツール「Tonttu」を作ったみたいで、試しに使ってみましたがPSとかでチマチマ作るより全然使いやすかったっす。 興味ある方どうぞ。 これからゆっくり考Lの中の人。 ブログの内容はよく分かりませんが、「JavaScript超初心者によるJavaScript入門講座」ってサイトではてブ50目指して頑張ってるみたいです。 音声解説やってるのでお姉さまが優しく語りかけてくれます。 確認せず晒したんで本人に怒られたら困っちゃう。 さてさて、本題の組み方の違いです。 比較的簡単なサンプル二つを例に、同じデザインを再現するにでもCSSの書き方が違うと全然違うんですよねって辺りを書くっす。 以下のサンプルページを別タブとかで開きながら読んで頂けると
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
コンテンツ箇所をHTMLの上部(ヘッダ・ナビゲーションより上)に配置するスタイルシートのトリックをSoh Tanakaから紹介します。 Markup Hierarchy - Advantages in SEO demo 上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="main" class="container"> <div id="content">Content</div> <div id="header">Header</div> <div id="sidecol">Side</div> </div>
2007 / 3 / 14 更新 レイアウトの小技 Ver2.0の分割比率に「半分」を追加 レイアウトの小技の説明に「半分」を追加 ブログをはじめました。更新情報などはこちらでご確認を。 2007 / 02 / 16 更新 レイアウトの小技 Ver2.0を公開 私が電脳狂想曲をデザイン・運営する時のノウハウを紹介しています。 サイトを製作される方のお役に立てれば幸いです。
サイトのインターフェースを設計したい。 そんなときに参考になるのが、『Designing Web Interfaces: 12 Standard Screen Patterns』。スタンダードな画面パターン13選だ。 以下にご紹介。 Master/Detail 垂直か水平レイアウト。ナビゲーション固定で操作画面をユーザに認識しやすいようにしている Column Browse 垂直か水平レイアウトで、始めのカラムからユーザをナビゲーションしていく仕組みを提供している Search/ Results キーワードでダイレクトにユーザをナビゲートするときに使われる Filter Dataset 検索条件を絞り込んで精度を上げるときなどに使われる Forms フォーム画面はユーザビリティとデザインについて考え抜かれていなければならない Palette/ Canvas ファイルを作成するときなどに使わ
Column Layout Generator 使用方法は簡単で、左側のスライドバーを操作して、各カラムの幅を好みのサイズに設定するだけです。 設定したカラムは、リアルタイムにプレビューでき、右側のパネルにスタイルシートが生成されます。 Column Layout Generatorでは、1、2、3カラムのレイアウトを作成することができます。 1カラム用 2カラム用 3カラム用
emastic - Google Code 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」。 以下はemasticを使ったサンプルレイアウトです。 例えば、次のように書くと、20 : 20 : 30 の比率で3つのブロックが生成されます。 <div class="dr20"> 20 em </div> <div class="dr20"> 20 em </div> <div class="dr30"> 30 em </div> <div class="clear"> </div> 次のようなレイアウトも簡単に作れます。もちろん、クロスブラウザ。 複雑なレイアウトを素早く作りたい場合に使えそうですね。 関連エントリ Yahoo!が提供するレイアウト用CSSライブラリ
トピックスTopics 2024年08月28日 ニュースリリース マイクロメイツ、生成 AI 活用クイックガイド「ここから始めよう!Microsoft Copilot 入門」の無料提供を開始 ~生成 AI 人材の育成支援で企業の生産性向上と業務効率化を後押し~ 2024年08月14日 セミナー・イベント 【9/18(水)開催】業界最大級のオンライン展示会「ITトレンドEXPO 2024 Summer」出展のお知らせ 2024年07月10日 ニュースリリース マイクロメイツ、業務フロー作成の基礎知識を学習する「業務フロー作成基礎研修」の提供を開始~業務フロー整備により組織の業務効率化と生産性向上を支援~ もっと見る マイクロメイツとはABOUT MICROMATES 私たちマイクロメイツは、お客さまのIT投資効果を最大にするための各種サービスをワンストップで提供しています。 基幹システムの導
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く