2022-02-01から1ヶ月間の記事一覧
Flexbox Froggy - Lv. 19/24 flex-directionとflex-wrapを使って、このカエルの大群がきちんと三列に並ぶようにしてあげてください。 #pond { display: flex; flex-direction: column; flex-wrap: wrap; } Flexbox Froggy - Lv. 20/24 flex-directionとflex-…
Flexbox Froggy - Lv. 13/24 flex-directionとjustify-content、align-itemsを使って、カエルたちがそれぞれの蓮の葉を見つけるのを助けてあげてください。 #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: fle…
Flexbox Froggy - Lv. 7/24 再びカエルが池を渡ろうとしています。今度の蓮の葉はずいぶん間隔が空いているようですね。 justify-contentとalign-itemsの組み合わせを使いましょう。 #pond { display: flex; justify-content: space-around; align-items: fl…
Flexbox Froggy CSSコードを書くことで、フロギーや友人を助けてください! このゲームでは、レイアウトを簡単にする強力な新しいモジュールであるCSSフレックスボックスをマスターすることで、カエルをリリーパッドに持ち帰る必要があります。 これにより、1…
ホバー時にアンダーラインが表示されるメニュー <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ナビゲーションの各項目を中央揃え - flexbox</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="gnav"> <ul> <li><a href="#" class="current">HOME…</a></li></ul></nav></body></html>
flexプロパティ flexプロパティは以下の3つのプロパティのショートハンドです（flex-shrinkとflex-basisは省略可） flex-grow flex-shrink flex-basis 初期値（initial）は、flex: 0 1 auto flex-grow flex-growは数値を1にすれば全て均等に、また指定した数…
Flexboxでナビゲーション 便宜上、複数のナビゲーションをnav要素で繰返し設定します class名は「共通名」と「個別名」を付けて、設定を分けて指定します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Global Menu</title> <style> /* ------------------------------------ reset -----------------------…</meta></meta></head></html>
Flexboxで横並び- リキッドレイアウト flex: 1; flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形） flex-growプロパティ flex-growの値は整数値のみで、flexアイテムが伸びる比率を指定します flex-growは…
Flexboxで横並び <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="box"> <img src="img/01.jpg" alt=""> <p>左の画像の説明</p> <…</div></div></body></html>
flexboxで横並び シンプルな横並び 幅の計算は、box-sizing: border-box; を前提にする 親要素にpaddingがついている場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flexboxで横並び</title> </meta></meta></meta></head></html>
Flexboxアイテムで指定できるプロパティ order：並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow：伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値（整…
justify-content：水平方向の位置 justify-content: flex-start（デフォルト） .container { display: flex; justify-content: flex-start; } justify-content: flex-end .container { display: flex; justify-content: flex-end; } justify-content: center…
Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にするもの flex：融通のきく、柔軟なとい…
Flexbox 「display: flex;」で、要素を横並びにできます 「リストや画像を横並びにしたい」 「要素間の余白を均等にして、はみ出たら折り返したい」 「表示する順番を逆からにしたい」 「画像とテキストを左右交互に配置したい」 Flexboxの性質 以下の性質が…
擬似クラス 特定の状態に対してのみスタイル（CSS）が反映されるセレクタを作る :hover 主にマウスカーソルの動作に対して使われる擬似クラスです マウスカーソルがホバーした時（要素の上に乗った時）にスタイルを反映させる <p><a href="#">テキストリンク</a></p> a { color: inh…
スクロール後要素を固定するposition: sticky; スクロールで動き、要素を固定するposition: sticky; stickyを適用した要素はスクロールに応じて追従するように動き、指定した位置に固定することができます positionプロパティはstickyの他にも下記の4つがあ…
要素を固定する position: fixed; /p> positionプロパティを使って要素位置を固定するfixed コンテンツを画面に固定させて表示させたい場合に利用します positionプロパティはfixedの他にも下記の4つがあります relative absolute static sticky position: f…
