CSS ヒント集_html/css_WEB-ITnose

最終更新日: 2016-01-13 16:16

以下は私が蓄積したよく使われる CSS コードです。これらは継続的に更新され、最新のコードが追加されます。簡単に参照できるように、最新の更新日も表示されます。

中央揃え

多くの場合、要素を親コンテナの中央に水平方向および垂直方向に配置する必要があります。以下に、一般的に使用されるメソッドをいくつか示します。

1. 幅と高さがわかっている場合は子要素を中央に配置し、位置指定を使用します: 絶対 + マージン

.parent {    position: relative;}.child {    position: absolute;    width: 100px;    height: 60px;    top: 50%;    left: 50%;    margin: -30px 0 0 -50px;}

2.子要素の幅と幅は不明です。位置配置が使用されます: 絶対 + 変換

.parent {    position: relative;}.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

3. フレックスボックスを使用して中央揃えにします

.parent {    display: flex;    justify-content: center;    align-items: center;}

特定の範囲内で子を選択します要素

5 ～ 10 個のサブ要素を選択します

ul li:nth-child(n+5):nth-child(-n+10) {    background-color: red;}

デモ アドレス: http://codepen.io/moyu/pen/KVvzbX

最適な画像

このコードは、記事リストにサムネイルを追加するのに非常に適しており、画像の比率が調整されていない問題を回避し、レイアウトを統一することができます。幅と高さを自由に変更して効果を確認できます。

.thumbnail {    width: 200px;    height: 150px;    background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");    background-position: center;    background-repeat: no-repeat;    background-size: cover;}

デモ アドレス: http://codepen.io/moyu/pen/JGyKGQ

全画面

.fullScreen {    width: 100vw;    height: 100vh;}

デモ アドレス: http:// lab .liuxinyu.me/fullbg/index.html

自動的に章に分割します

記事の本文では、

、

、

をよく使用します。 ,

このようなタグは、章とセクションを分割するために使用されます。これは非常に良い習慣ですが、多くの場合、唯一の違いはフォントの太さとサイズです。ここでは、各章に 1、2、3 などのラベルを追加します。次のコードは .document コンテナ内で有効です。 (カウントが必要な他のモジュールもこの方法を使用できます)

デモ アドレス: http://codepen.io/moyu/pen/NxvrjX

アダプティブ ビデオ プレーヤー

Youku などのビデオ プレーヤーを自分の Web サイトに挿入すると、高さと幅が固定され、携帯電話で閲覧するとビデオ プレーヤーが変形することがわかります。次のコードは、プレーヤーのクリックを自動的に 16:9 比率で表示します。各デバイスに適応します。

CSS コード:

.media-wrap {    position: relative;    width: 100%;    height: 0;    padding-bottom: 56.25%;}.media-wrap iframe,.media-wrap embed,.media-wrap object {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

HTML コード:

<div class="media-wrap"><iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe></div>