【HTML/CSS講座】 第5回 @charset "UTF-8";

普通にHTMLとCSSを順序よく講座しろよ、 という苦情が来てもおかしくないですが、 基本方針としては、 【HTMLとCSSがわからない人にとって どれから始めても大して問題じゃない】 という先入観からです。 筆者自身、 グリッドシステムとかから始めたので 順…

【HTML/CSS講座】 第4回 グリッドシステムの適用

/* グリッドシステム */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .row { display: flex; flex-wrap: wrap; margin: 0 -15px; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col…

【HTML/CSS講座】第3回 CSSの適用方法

CSSの適用方法では、CSSの適用方法についてお伝えします 内部CSS <head> <meta charset="UTF-8"> <title>サンプル</title> <style> h1{ color:; } </style> </head> 外部CSS <link rel="stylesheet" href="style.css"> style.cssが一般ですが、 <link rel="stylesheet" href="home.css"> でも反応します。 WP等はstyle.cssと言うファイル名が標準なので気をつけてください。 </link></link>

【HTML/CSS講座】第2回 MP3プレイヤーをサイトに導入する

/* CSSファイル */ /* 音楽再生プレイヤーコンテナのスタイル */ .audio-player { width: 300px; background-color: #333; color: #fff; padding: 20px; border-radius: 10px; } /* 曲名スタイル */ .audio-player .song-title { font-size: 20px; margin-bo…

【HTML/CSS講座】第1回/ font-family

* { font-size: 16px; font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } 第1回は、フォントファミリー講座です。なぜこれから教…