[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間
CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです。 Margin or padding? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スペースの使い分け CSSを使用して例を実装 セレクタの解説 全称セレクタの活用 マージンとパディングの使い分け スペースの使い分け カード型のUIコンポーネントを用意しました。 カード型のUIコンポーネント この例では、2種類の異なるスペースが存
![[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間](https://cdn-ak-scissors.b.st-hatena.com/image/square/e64c6fb610e050bdc9e6aad63654b01a3879a7b6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030610.png)
ドロップキャップをCSSで実現する方法 | q-Az
段落の文字の1つ目を大きくして目立たせる手法です。正式名称を「ドロップキャップ」というそうです。英字新聞などではよく見る文章の書き出しですね。 日本ではあまり使われる書き方ではありませんが、CSS だけで実現可能なののでやってみたいと思います。 Drop Cap .dropcap:first-letter { font-size: 60px;/*文字の大きさ*/ margin-right: 6px; margin-top: 6px; float: left; line-height: 1;/*必要*/ }HTML<p class="dropcap">ドロップキャップは英字新聞などで・・・</p> 例ドロップキャップは英字新聞などでは、よく見る手法ですが日本語で使われることはほとんどありません。CSS だけで1文字目だけ選択することが出来、それを使うことでブログの文章などでもドロップキャップ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
