タグ

レイアウトに関するricopinxのブックマーク (2)

  • CSSでコンテンツの中央配置を実装する方法 - NxWorld

    左右・上下左右などCSSで要素やコンテンツの中央配置(中央寄せ)を実装する方法を備忘録も兼ねていくつか紹介します。 どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。 はじめに ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。 また、領域がわかりやすいように.childにはグレーの背景色を指定しています。 <div class="parent"> <div class="child">Lorem ipsum dolor sit amet.</div> </div>

    CSSでコンテンツの中央配置を実装する方法 - NxWorld
  • 紙面に近づけたい!HTML+CSSで作る文字レイアウト12個 | PRESSMAN*Tech

    印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理?」といったご相談を受けることがよくあります。 今年に入って、HTML5&CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLCSSをご紹介したいと思います。 目次:段組み縦組み(縦書き)行末揃え(両端揃え)先頭文字スタイル(ドロップキャップ)段落先頭1字下げ2行目から1字下げ(ぶら下げインデント)行頭禁則文字ふりがな(ルビ)圏点(傍点、脇点)大文字と小文字の変更スモールキャップス(スモールキャピタル)長体、平体(水平比率、垂直比率)※IE以外のブラウザは、2014年7月4日現在の最新版にて

    紙面に近づけたい!HTML+CSSで作る文字レイアウト12個 | PRESSMAN*Tech
  • 1