border-radius と overflow : hidden

border-radius で角丸スタイルにする場合, 内包の要素も角丸にするためには,
外側の要素に, overflow : hidden を指定する必要があります.

No overflow : hidden;
overflow : hidden;

 

ソース

/* overflow : hidden; なし */

.radius-2 {
    border-radius        : 1000px;
    color                       : #fff;
    font-size                : 24px;
    background-color : #00f;
    margin-bottom     : 24px;
}

.inner {
    border: 3px solid #FF0;
}
/* overflow : hidden; あり */

.radius-1 {
    border-radius       : 1000px;
    overflow                :  hidden;
    color                       : #fff;
    font-size                : 24px;
    background-color : #00f;
    margin-bottom     : 24px;
}

.inner {
    border: 3px solid #FF0;
}

iOS でスクロールを完全に無効にする

デスクトップや Android の場合, CSS を以下のように設定するだけでスクロールを無効にできます.

html, body {
    height: 100%;
    overflow: hidden
}

しかし, iOSでは, 上記の CSS の設定だけでは, わずかながらにスクロールできてしまいます.
iOS でスクロールを完全に無効にするには, JavaScript による制御も必要です.

    window.addEventListener('touchmove', event => {
        event.preventDefault();
    }, true);

CSS position: fixed で センタリングする 2

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

センタリングしたい要素のサイズがわからない場合は, さらにやっかいです.

しかし, 方法はあります.

<div style="position: fixed; z-index: 1; width: 100%; text-align: center;">
    <div style="display: inline-block; padding: 0.75em 1em; font-size: 12px; color: #fff; background-color: #999;">Fixed</div>
</div>

ポイントはセンタリングしたい要素を囲むブロックに対して, 以下の3つのスタイルを定義することです.

position: fixed;
width: 100%;
text-align: center;

あとは, センタリングしたい要素を inline-block にするだけです.

Fixed

CSS position: fixed で センタリングする 1

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

しかし, 要素のサイズ (width と height) がわかっている場合, left と margin-left を利用することでそれを解決できます.

ポイントは2つです

left: 50&;
margin-left: -(ブロックの width の 1/2)  /* ネガティブ margin */
Fixed

CSS3 Flexbox を学ぶ 9

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである flex-shrink について紹介します.

flex-shrink は, これまでのプロパティと異なり, コンテナ内の要素に指定します.

まずは, ざっとコードを見てみましょう.

結果はこうなります

flex-shrink
flex-shrink

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 大きさを変えたいコンテナ内の要素に, で flex-shrink: 2 (Safari対策に,-webkit-flex-shrink: 2) のように指定する

CSS3 Flexbox を学ぶ 8

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである flex-grow について紹介します.

flex-grow は, これまでのプロパティと異なり, コンテナ内の要素に指定します.

まずは, ざっとコードを見てみましょう.

結果はこうなります

flex-grow
flex-grow

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 大きさを変えたいコンテナ内の要素に, で flex-grow: 2 (Safari対策に,-webkit-flex-grow: 2) のように指定する

Just another WordPress site