★CSS
ナビゲーションの種類（PC版） ボタン形式（面） ロゴとナビゲーションを横に並ぶ ボタン形式（面） <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1 class="logo"><a href="#"></a></h1></header></div></body></html>
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 「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…
要素の絶対位置を指定するposition: absolute; position: absolute; は、要素の配置を自由に設定することができます position: absolute; は単体で使用せず、position: relative; とセットで使います positionプロパティはabsoluteの他にも下記の4つがありま…
相対位置を指定する position: relative; 現在位置を基準に、相対位置を指定することができます position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです positionプロパティはrelativeの他にも下記の4つがあります fixed …
positionプロパティ positionプロパティは、要素の配置を指定するプロパティです 通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します static：位置も重なりも指定できない、positionプロパテ…
positionプロパティで要素を配置 positionプロパティとは positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです 要素を自由に配置したい 要素の重なり順を変えたい ヘッダーを固定して表示したい positionプロパティの使い方 posit…
floatを使ったレイアウト - 実践 【例】floatを使った定義型リスト <html lang="ja"> <head> <meta charset="UTF-8"> <title>floatを使った定義型リスト</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .d-list { overflow: hidden; width: 440px; margin: 50px auto; } dt { float: left; font-weight</meta></head></html>…
floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…
floatの使い方 floatとは？ floatを指定した要素が「浮いた状態」になる特性です floatの使い方 横並びにしたい要素に対して、float: 値;を指定して使用します 値に記述するのは、以下のような「方向」を示すワードです 値 指定内容 left 横並びにした要素を…
要素の横並び displayプロパティの初期値 block inline inline-block none display: block <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>display: block</title> <style> /*--…</meta></meta></meta></head></html>
リセットCSS ブラウザのデフォルトスタイル（初期値）を解除するためのCSSは「リセットCSS」と呼ばれ、世界中でいろいろな手法が試されています。 目的は、各ブラウザが持つ「ボックスモデルの値」を初期化すること 以下の例は、最小記述の resetCSS の例に…
「ユニバーサルセレクタ」のデメリット ブラウザのレンダリングが遅くなる。 良いデフォルトのCSSをリセットしてしまう。 フォームの表示がおかしくなるブラウザがある。 とされてきました。 検証しているサイトがあるので紹介します。https://levelup.gitco…
要素を中央寄せ CSSで中央に寄せができるプロパティ4選 text-align flexbox margin position 【text-align】プロパティで左右中央寄せする方法 text-alignでブロック要素などの水平方向に対して配置を決めることができます <div class="parent"> <span>インライン要素を中央に寄せます</span> </div> <div class="parent"></div>…
CSSで要素を右寄せ CSSで右に寄せることができるプロパティ5選 text-align margin float flex position text-alignプロパティで文章を右寄せ text-alignは、ブロック要素などの水平方向に対して配置を決めることができます text-align: right;を指定する inl…
ブロックレベル要素とインラインレベル要素 ブロックレベル要素の特徴 テキストP.076〜P.077 要素が縦に並ぶ（その前後で改行表示されます） 幅と高さを指定できる（デフォルト状態で親要素と同じ幅を持っています） 余白を自由に調整できる 要素の配置を指…
文字の囲み borderを使用して、要素に枠線をつける borderプロパティの値を指定する セレクタ { boder: 線の太さ, 線の種類, 線の色 ; } 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになり…
文字設定 - font 文字の修飾 ページ全体に反映したい場合は「body」に指定します（継承） 文字のプロパティ color : 文字の色 font-size : 文字の大きさ font-family : フォントの種類 font-weight : 文字の太さ font-style : 文字のスタイル line-height : …
ボックスモデル テキストP.076〜 HTMLタグでマークアップされた要素は１つの箱とみなされます HTMLの要素は4つの領域を持っています 表示領域 要素の内側の余白（padding） 要素の外側の余白(margin) paddingとmarginの境界線(border) 記述するプロパティの…
CSSとは テキストP.066〜 CSSは、Cascading Style Sheetsの略 HTML同様にwebサイトを作成するために使用される言語 CSSを使うことで、HTMLの要素に対し、 要素の大きさ 要素の並び 余白 色 などの見た目を追加することができる CSSの書き方 テキストP.067 CS…
