はじめ | ひとくちプログラミング「1-bite」
@1bite_prog
【コンパクトなプログラミング学習を発信】 初心者視点でわかりやすく▶︎1回1分、サクッと学べる▶︎簡単アウトプットでらくらくスキルアップ▶︎プログラミング学習がめんどくさい、家に帰って時間が取れない人必見▶︎HTML,CSS,JavaScriptなどなど
【1-bite】CSSを読み込むタグ <link>→HTML文書にデザイン(CSSファイル)を読み込む。 href属性にファイルの参照先を入力。 例：<link rel="stylesheet" href="style.css">
【1-bite】強調するタグ <strong> / <em> →文章内で強調したい部分に使う。 <strong>ではさむと太字、 <em>ではさむと斜体（ななめ表示）にできる。
【1-bite】メニューを作るタグ <nav> →リンクの集まりを作る。 例： <nav> <ul> <li><a href="#">ホーム</a></li> </ul> </nav>
【1-bite】意味のあるまとまり <section> →内容をテーマごとに区切る。 例： <section> <h2>お知らせ</h2> <p>本文</p> </section>
【1-bite】ページの主役を囲む <main> →ページで最も見せたい内容を囲むタグ。 例： <main> <h2>記事</h2> <p>本文</p> </main>
【1-bite】ページ下部のタグ <footer> →名前である程度わかるかもだが、ページの「足元」を作るタグ。 著作権や連絡先など、常に固定表示したいものを入れる。 例： <footer>© 2025</footer>
【1-bite】ページ上部のタグ <header> →ページの「顔」を作る。 タイトルやメニューを入れる。 例： <header> <h1>サイトタイトル</h1> </header>
【1-bite】文章の一部に使うタグ<span>→文章の一部をかたまりにするタグ。 <div>タグと同じように、そのままでは見た目に変化はないが、 CSSと組み合わせて、文章の一部の見た目を変更したいときに使う。
【1-bite】かたまりをつくるタグ<div> →今まで紹介した複数のタグや文章をまとめて、 かたまりをつくるタグ。 そのまま使っても何も変わらないが、 後ほど紹介するCSSと組み合わせて使うことで、 文書をデザインできる。
【1-bite】箇条書き(リスト)を作るタグ その2 →箇条書きリストの例はこんな感じ。 (<ul>をつかうときは<ol>と置き換えてください！） <ol> <li>1-bite</li> <li>2-bites</li> <li>3-bites</li> </ol>
【1-bite】画像を表示するタグ<img>→その名のとおり、画像を表示するタグ。 書き方： <img src="画像の保存場所" alt="代替テキスト"> ※単独で使用するタグ。 画像「image」の略img。
【1-bite】リンクを作るタグ<a>→クリックして別ページへ移動できる「リンク」をつくるタグ。 書き方： <a href="移動先URL">リンクに変えたいテキスト</a> 「anchor」＝つなぐ、つまり別ページをつなぐ架け橋となるタグ。 hrefは「参照先」という意味。
【1-bite】改行するタグ<br>→このタグを入れることで改行できる。 ※単独で使うタグ。 書き方： 文章を改行したいとき<br> こうする。 改行「break」の略br。 ※HTML文書をエディター（編集ツール）内で改行しても反映されない。
【1-bite】段落を作るタグ<p> →段落を作って文章を分けることができるタグ。 例： <p>段落１</p> <p>段落２</p> 段落「paragraph」の頭文字p。
【1-bite】見出しを設定するヘッダータグ<h1>〜<h6> →文章の見出しを作るタグ。 <h1>が最も大きく、 <h1>,<h2>...<h6>の順に小さくなっていく。 基本的に<h1>は一つの文章に１つまで。 検索エンジンもこの階層を重視している。 ヘッダー「header」の頭文字h。
【1-bite】HTMLのタグになんかついてる⁉ タグの「属性」について →タグに“追加情報”を付ける仕組みのこと。 属性名="値" の形で書いて、動作や意味付けを細かく指定する。 例：aタグならhrefでリンク先、imgタグならsrcで画像URL、altで代替文。 （タグについては今後の投稿をお待ちください！）
【1-bite】HTMLの基本の形は？その２ →共通で以下の形をしている。 <!DOCTYPE html> <html> <head> (表示するコンピューターにHTML文書に関する情報をここに書き込む) </head> <body> (実際に表示される内容をここに書き込む) </body> </html>
【1-bite】HTMLの基本の形は？ HTML文書は、宣言（<!DOCTYPE html>）から始まり、 <html>タグで文書全体が囲まれている。 HTMLタグ内には内容に関する情報が書き込まれた部屋<head>と、 実際に表示される内容が書き込まれた部屋<body>の２つがある。
United States Trends
- 1. Flacco 82K posts
- 2. Bengals 78.8K posts
- 3. Bengals 78.8K posts
- 4. Tomlin 21.3K posts
- 5. Ramsey 18.6K posts
- 6. Chase 107K posts
- 7. Chase 107K posts
- 8. #WhoDey 6,701 posts
- 9. #TNFonPrime 5,475 posts
- 10. #WhoDidTheBody 1,365 posts
- 11. Teryl Austin 2,684 posts
- 12. Cuomo 79.4K posts
- 13. #PITvsCIN 6,966 posts
- 14. #criticalrolespoilers 6,302 posts
- 15. Max Scherzer 14K posts
- 16. Andrew Berry 3,139 posts
- 17. Burrow 9,582 posts
- 18. DK Metcalf 3,926 posts
- 19. Zac Taylor 2,511 posts
- 20. Ace Frehley 93.8K posts
Something went wrong.
Something went wrong.