HTML&CSS

「width:100%」と「max-width:100%」の違い

今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。 「width:100%」について 次のサンプルを見てください。 全体を囲むdiv要素に「width: 100%」を指定しています。この場合の結果は「width」と「padding」の合計幅がブラウザの幅より大きくなり、右側が切れてしまい横スクロールを使う必要が出てきます。 「width:100%」のサンプル HTMLコード CSSコード このような問題を解決するには一般的にbox-sizing:border-boxを使います。 これは、boxモデルの考え方を変えるプロパティです。値を「border-box」にすることでpaddingやborderの値を含めたものがwidthとなります。 そのため、先ほどのように横スクロールすることもなく綺麗にブラウザ内に「.wrap」が収まります。 「box-sizing:border-box」を使ったサンプル CSSコード max-width:100%の指定 max-widthの定義は「 max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。」とされています。 簡単に言うと最大幅を決めるためのものです。最大幅が固定サイズ、例えば600pxだと600px以上にはならないことを示します。 では、「max-width  >>続きを読む

ブレイクポイントは「em」で指定〜スマホサイト作成

メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。 これは2016年頃に広がったネタですが、いまだにSafariでは同様の結果になります。 結論から言うと、ベストプラクティスは「em」単位で指定することです。 「em」単位の求め方はこの場合、指定したいpx数を16で割るだけです。 ブレイクポイントの値は em で指定 この場合の計算は16で割るだけ 600pxにしたい場合は、600/16emとする safariでの問題点 参考サンプル このサンプルではブレイクポイントを600pxに指定しています。 これを600px/16pxで 37.5em と 37.5rem にした場合の検証用です。 赤がpx指定したもの、緑がem指定したもの、青がrem指定したものになります。 600px以上でopacityがかかって色が薄くなります。 HTMLコード CSSコード 通常はchromeもfirefoxもsafariも問題ないです。どれも同じサイズの時に色が変わります。 html要素でfont-sizeを指定した場合 サンプル2 CSSに次の内容を追加します。 各要素に個別の指定がない限り、全てのフォントサイズが2倍になります。 そのため、「em」や「rem」指定した場合には、htmlに指定した200  >>続きを読む

CSS〜インライン要素に使えるbox-decoration-breakプロパティについて

インライン要素に対してCSSで装飾することは珍しいかもしれません。 box-decoration-breakプロパティとは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。 具体的にはインライン要素が折り返し状態になった時の背景の設定などに活用できます。 値には、「slice」と「clone」が用意されています。 slice:要素は最初、ボックスが断片化していないかのように描画されます。 clone:それぞれの断片が、個別に描画されます。 特に背景にグラデーションを設定した場合などその効果を確認することができます。 sample

CSS shape-outsideプロパティを使ってみよう

画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。 下図参照 このようにするには「shape-outsideプロパティ」を使います。 まず、画像を円形にするにはCSSのプロパティで「border-radius: 50%」とすれば簡単に出来上がります。 画像が円形になってもテキストは矩形の形に並びます。 そこで画像に対して「shape-outside: circle(50%)」を設定します。 これで、テキストは上の図のように並んでくれます。 なお、テキストと画像の間隔はマージンで設定できます。 circle()などのシェープ関数の使い方はCSSでクリッピングマスクを使う方法を参考にしてください。 サンプル

CSSで立体的に回転するカードの作り方

div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成 簡単な赤の300 x 500pxのカードを作成します。 CSSは次のようにします。 このカードを回転させるには、transform:rotateY(180deg)を使用します。 360度回転すると元の状態になりますので、半分の回転180度とします。 角度はdegという単位を使います。 このままでは一瞬で回転しますので、「.card」にtrnsitionアニメーションをつけると回転の状態を確認することができます。 カードの裏表作成 カードの裏側を作成します。 裏表面のCSSは次のようになります。裏面に「transform:rotateY(180deg)」をあらかじめ入れておくことがポイントです。 マウスホバーで回転させる記述は以下です。 これでマウスホバーすると回転して赤のカードも青のカードも反転することが解ると思います。 欠点として回転が回転に見えずに伸縮して内容が反転したように見えることです。 perspectiveプロパティ追加 上記の欠点を解決するには遠近感をつけることです。 そのために「perspective」プロパティを使います。これは「.card」に設  >>続きを読む

CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小

HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。 フルードイメージはアスペクト比を固定して拡大縮小しますが、当然幅を縮小したら高さも変化しますし、高さを縮小すると合わせて幅も縮小するようになります。 ところが幅は拡大縮小したいけれども、高さは変更したくない場合があります。 このような場合に「object-fit」プロパティが使えます。 「object-fit」プロパティとは 「object-fit」プロパティは、置換要素、つまりimgタグで挿入された画像やvideoタグで挿入された動画などを、表示領域にどのようにはめ込むか決めるものです。 サンプル1 例 この例では高さを固定していますので、通常では幅を伸縮させるとアスペクト比が崩れてしまいます。 けれども「object-fit: cover」を設置するだけで、高さを固定してもアスペクト比を維持しつつ拡大縮小して表示してくれます。 「object-fit」プロパティの値 「object-fit」プロパティの値には次のようなものが用意されています。 fill | contain | cover | none | scale-down contain:画像はアスペクト比  >>続きを読む

CSSでクリッピングマスクを使う方法

CSSでマスキングするにはクリピングマスクを使うことができます。 指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。 E { clip-path: shape } shapeはcircle(r at cx cy),ellipse(rx ry at cx cy), inset(o1,o2,o3,o4),polygon(各座標指定)のどれかで指定 マスキングするための形状は、clip-pathの値に円形の「circle()」,楕円の「ellipse()」,長方形の「inset()」,多角形の「polygon()」を描く関数で指定します。 円形の「circle()」 サンプル 100pxの半径で、要素の中央となる座標がx軸50%y軸50%の場合 楕円の「ellipse()」 サンプル x軸方向の半径100pxy、軸方向の半径50pxで、要素の中央となる座標がx軸50%y軸50%の場合 長方形の「inset()」 サンプル それぞれの引数は順に上、右、下、左の各辺の座標となります。最後に「round 角丸半径」をつけると角丸になります。 多角形の「polygon()」 サンプル 多角形を作成する関数には、2つの値の組を複数個指定します。 それぞれの組が座標となり、これらを結ぶ線がクリップパスになります。 clip-path作成支援ページ ポリゴンは直感的  >>続きを読む

headerのコーディング例〜CSS

シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。 古典的な方法 要素を水平方向に中央揃えする方法は簡単に行えます。 例えばdisplay:blockの要素なら、幅を決めてから左右のマージンをautoにします。 ところが垂直方向の中央に整列させる適当なプロパティが存在しないために、色々なテクニックが使用されていました。 もっとも古典的な方法として、親要素の上下のプロパティで調整する方法です。 古典的な方法でヘッダー領域をコーディングした例 HTMLコード CSSコード FlexBoxを活用した方法 FlexBoxでレイアウトすると垂直方向の整列が簡単にできるようになりました。 次の例ではヘッダーにナビゲーションが追加されていますので、単純に整列させるだけではなくflexプロパティが必要です。 「.site-info」領域とナビゲーションの「.main-menu」領域を分離して、「.main-menu」領域をヘッダー下部に押しやる必要があります。 flex-flowプロパティは、 flex-direction 及び flex-wrapのショートハンドです。 今回flex-directionはcolumnとして垂直方向としています。「flex-direction」が「column」場合は高さの拡大が行われます。 そして「.site-inf  >>続きを読む

CSSグリッドの基本〜display:gridの使い方

Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できるようになりました。けれども、Flexboxによる方法も所詮は1次元の流れを調整するものです。 そして、今回紹介するGridレイアウトは2次元の配置が行えることがポイントで、より柔軟なレイアウトが可能になりました。それはあたかも紙面のレイアウトのようなものもシンプルなタグで実現できます。 仕様書:CSS Grid Layout Module Level 1 下の図は典型的なflex-layout 次の図はgrid-layout 使用可能なブラウザ 開発ブラウザはFirefoxがお薦めです。グリッドラインの表示と番号の表示が嬉しいです。 グリッドレイアウトコーディングの基本 サンプルコードはGitHubページへ 完成見本 グリッドレイアウトを行うにはまず次の名前を覚えましょう。 グリッドコンテナ:個々のグリッドを囲むコンテナ グリッドアイテム:コンテナ内の各子要素 グリッドトラック:2つのグリッドラインの間の領域のことです。明示的グリッド (explicit grid )と暗黙的グリッド (implicit grid) でもトラックは作成されます。 グ  >>続きを読む

CSS flex〜チートシート(動画あり)

flexBoxの主軸と交差軸についての動画 FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。 しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。 仕様書をしっかりと読み込むことを忘れないことが大事です。 flex レイアウト詳説〜Flex Box Layout Container 値の太字は初期値です。 flex-direction row | row-reverse | column | column-reverse flex-wrap nowrap | wrap | wrap-reverse justify-content flex-start | flex-end | center | space-between | space-around | space-evenly align-items stretch | flex-start | flex-end | center | baseline align-content stretch | flex-start | flex-en  >>続きを読む