はじめ | ひとくちプログラミング「1-bite」
@1bite_prog
【コンパクトなプログラミング学習を発信】 ▶︎1回1分、サクッと学べる▶︎簡単アウトプットでらくらくスキルアップ▶︎プログラミング学習がめんどくさい、家に帰って時間が取れない人必見▶︎HTML,CSS,JavaScriptなどなど
【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と組み合わせると入力チェックなども可能。
【1-bite】ボタンを作るタグ <button> →クリックできるボタンを作る。 <button>送信</button> ちなみにHTML単体でも使える（別ページに移動など）が、 JavaScriptと組み合わせて動作を追加することが多い。
【1-bite】CSSを読み込むタグ <link>→HTML文書にデザイン(CSSファイル)を読み込む。 href属性にファイルの参照先を入力。 例：<link rel="stylesheet" href="style.css">
【1-bite】強調するタグ <strong> / <em> →文章内で強調したい部分に使う。 <strong>ではさむと太字、 <em>ではさむと斜体（ななめ表示）にできる。
United States Trends
- 1. #Hemedti 1,082 posts
- 2. $GHOST 3,712 posts
- 3. 5sos 11K posts
- 4. #Scream7 10K posts
- 5. Animal Crossing 13.1K posts
- 6. Happy Halloween Eve 3,377 posts
- 7. #PitDark 3,822 posts
- 8. NextNRG Inc. N/A
- 9. ACNH 4,696 posts
- 10. Sidney 12.8K posts
- 11. Blake Butera 1,369 posts
- 12. #GirlsWhoInspire N/A
- 13. #thursdayvibes 3,899 posts
- 14. Melissa Barrera 4,984 posts
- 15. Usha 17.5K posts
- 16. Super Sentai 3,733 posts
- 17. Good Thursday 35.1K posts
- 18. Rickey 1,507 posts
- 19. Vance 274K posts
- 20. $META 41K posts
Something went wrong.
Something went wrong.