Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That’s great if you know the width and height of the element you’r
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
グリッドレイアウトがベースになっている ページデザインに気持ちよいリズム感を もたせるため、白銀比を取り入れる。 白銀比は黄金比と同じくらい知られており、古くから使用されている比率である。よく日本建築などが事例として紹介されるが、身近なものでは「用紙」がある。A判（A3、A4など）やB判（B3、B4など）の紙が白銀比になっているのだ。白銀比の描き方を解説しておこう。 まず正方形を描き、左下角の点を中心にして円弧を描く。正方形の底辺を右方向に延長させていくと円弧の線とぶつかる。このとき、正方形の底辺と延長した線の長さが白銀比の関係になる。この長方形を「三分割法」で9つに分割すると、それぞれが白銀比の長方形になっている。 かわいらしいキャラクターの多くは白銀比に収まっていると言われている。実際に見てもわかるとおり、白銀比のバランスは構図に気持ちよいリズム感を与えてくれる。Webにおいては固定幅
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。 この設定だけでＯＫ。 例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン
Apple Store 店員の朝は早い。まず店内に展示されているノートブックのディスプレイを、一定の傾きに揃えることから始まる……。こんな冗談のようなことが本当に行われているそうです。しかも iPhone アプリ「Simply Angle」を使ってキッチリ角度を計測して展示を行っているとのこと (Forbes の記事、CNET Japan の記事より) 。 Apple が繰り出すこうした裏技を分析している Carmine Gallo 氏によると、設置面とディスプレイの角度をきっちり 70°(完全に開いた状態を 0 度とした場合) にすると、顧客がラップトップのところに真っ直ぐに歩み寄り、触ってみたくなる角度だという。 ガンプラをカトキ立ちさせるときに開脚幅を 37°にすると美しいとかあったなあ。
CSS Sticky Footer Layout It Sticks to the Bottom of the Page! See that footer, way down there? It's stuck to the bottom of the page even when thin on content. Otherwise it would be floating halfway up the page. Use the code and assets on this website like new UK gambling sites do and your site will be looking perfect in next to no time! Cross Browser Support for Sticky Footer Code This sticky foot
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
小説家の京極夏彦氏は8日、東京の青山TEPIAホールで開催されているレイアウトソフト「Adobe InDesign」のユーザーのためのイベント「InDesignコンファレンス2008 東京」において、「パソコンをワープロ以上にしたInDesign」と題した講演を行った。司会は、凸版印刷のディレクター紺野慎一氏が務めた。 小説家であり、アートディレクターである京極夏彦氏。第一作以外すべて最終的な版組みに合わせた形で小説を書いているという 京極氏は、文章を書くことだけが小説家の仕事ではなく、文章の改行や改ページ、字種、書体の選定まで含めて、読者に「観せる」ことが小説家の仕事だと考えている。そのため、エンドユーザーが読む本と同じレイアウトでそのまま作品を執筆できる「InDesign」を早くから取り入れ、執筆活動を行っている。 京極氏が執筆活動を始めた当初、ワープロはデータを処理することだけに特化
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
