【ボックスモデルの理解】 →ボックスモデルは要素の配置を示す基本概念で、margin→border→padding→contentの順に構成される。 この構造を理解することでCSS設定がスムーズになる。
【表の作成】 →表は特定の書式を用いて作成する。 例： <table> <thead> <tr></tr> </thead> <tbody> <tr></tr> </tbody> </table> この作成法でデータを見やすく整理できる。
【説明付きリストの書式】 →description listは特定の書式で作成する。 例： <dl> <dt>要素</dt> <dd>説明</dd> </dl> この形式で要素を効果的に説明できる。
【ページ内リンクの作成】 →sectionタグで文書を分割しIDを指定する。 例：<section id="section1"> navを活用し文書構造を伝える。 <li><a href="#section1">セクション1</a></li> これで簡単にページ内リンクを作成できる。
【一括指定プロパティの活用】 →CSSでは一括指定プロパティを使うことで修正が容易になる。 例： margin: 10px 15px; このようにまとめて記述することでコードがシンプルになる。
【background-imageの指定】 →background-imageは特定の書式で指定する。 例：background-image:url(ファイルパス); 同一階層にある場合はファイル名のみで指定できる。 この方法で効率よく背景画像を設定できる。
【paddingのコツ】 →paddingは8の倍数（単位：ピクセル）で指定するとまとまる。 これはデフォルトの文字サイズが16であることが多いから。 例：padding: 8px 16px; この設定により整然としたレイアウトにできる。
【1-bite】hoverで動きをつける ボタンにマウスを乗せたときに見た目を変える設定。 button:hover { background-color: gold; } 作るサイトに動きを与えられる。
【1-bite】flexboxで整列させる レイアウト革命。 css<br>.container {<br> display: flex;<br> justify-content: center;<br>} <br>要素を中央に整列できる。
【1-bite】displayプロパティの使い方 →各要素の並び方を決める。 値： block＝縦並び、inline＝横並び。
【1-bite】borderで囲い線をつける 要素を囲む線を設定できる。 div { border: 2px solid black; } 太さ(border-width)・線の種類(border-style)・色(border-color)などを指定できる。
【1-bite】marginとpaddingの違い margin＝外側の余白、padding＝内側の余白。 商品の梱包で考えると、商品の箱と段ボールのスペースがmargin、 商品の箱の中のクッションがpadding。
【1-bite】よく使うプロパティ color: 文字色 font-size: 文字サイズ background-color: 背景色 まずはこの3つを抑えよう。
【1-bite】classとidの違い class＝複数の要素に共通スタイルを適用。 id＝1ページに1つだけの特定要素。 例：<p class="note" id="main">...</p>
【1-bite】CSSの書き方3つ CSSの書き方は3種類： ①インライン（HTML内に直接） ②内部（<style>タグ内） ③外部（.cssファイルを<link>で読み込み） 保守性が高いのは外部CSS。
【1-bite】CSSの基本構造は？ CSSは「セレクタ・プロパティ・値」でできている。 例：p { color: blue; } この場合、pが見た目を設定する対象、 colorがプロパティ（≒設定項目）、 blueが値。
【1-bite】CSSってなに？CSSはWebページの「見た目」をデザインするためのルール。 文字の色や背景、余白などを設定できる。 建物でいえば「内装・家具・照明」。
【1-bite】画像＋説明文をまとめる <figure> / <figcaption>→画像に説明文を添えるタグ。 <figure> <img src="dog.jpg"> <figcaption>うちの犬・ポチ</figcaption> </figure>
【1-bite】入力フォームを作るタグ <form>→入力をまとめて送信する枠。 <form action="thanks.html"> <input> <button>送信</button> </form> 実はHTMLだけでも送信可能。
【1-bite】入力欄を作るタグ <input> →文字入力やチェックボックスなどを作る。 <input type="text" name="username"> JSと組み合わせると入力チェックなども可能。
United States 趨勢
- 1. Jets 115K posts
- 2. Sauce 81.2K posts
- 3. Courtois 39.5K posts
- 4. Colts 55.2K posts
- 5. Breece Hall 10.5K posts
- 6. Garrett Wilson 5,161 posts
- 7. $JFB N/A
- 8. Cheney 232K posts
- 9. Liverpool 214K posts
- 10. Luis Diaz 28.9K posts
- 11. Beane 4,898 posts
- 12. AD Mitchell 6,562 posts
- 13. Hakimi 27.8K posts
- 14. Bayern 112K posts
- 15. Veach 5,489 posts
- 16. Shaheed 17K posts
- 17. Brad Holmes 1,174 posts
- 18. Penning 2,441 posts
- 19. Mazi Smith 5,871 posts
- 20. Jermaine Johnson 3,279 posts
Something went wrong.
Something went wrong.