Web coding practice
コードを書き換えると、右のプレビューにすぐ反映されます。
※ ダウンロードしたHTMLを開くと、プレビューのsandbox制限は適用されません。
見出しや文章、ボタンなどを書いてみましょう。
HTMLの見た目を自由に変えてみましょう。
Preview
HTML quick reference
よく使うHTMLタグをまとめています。
書き方を忘れたときに確認してみましょう。
ページや内容の見出しを作ります。
<h1>見出し</h1>
<h2>見出し</h2>見出しはh1〜h6まであり、数字が大きくなるほど小さな階層になります。
文章のまとまりを作ります。
<p>文章</p>別のページや場所へ移動するリンクを作ります。
<a href="#">リンク</a>ページに画像を表示します。
<img src="images/sample.jpg" alt="画像の説明">文章の途中で改行します。
<br>順番のない項目を並べます。
<ul>
<li>項目</li>
<li>項目</li>
</ul>順番のある項目を並べます。
<ol>
<li>項目</li>
<li>項目</li>
</ol>複数の要素をひとまとまりにします。
<div>内容</div>ページや区画の上部を表します。
<header>
内容
</header>ページ内や別ページへの案内をまとめます。
<nav>
内容
</nav>ページの中心となる内容を表します。
<main>
内容
</main>内容を意味のある区画に分けます。
<section>
内容
</section>ページや区画の下部を表します。
<footer>
内容
</footer>CSS quick reference
よく使うCSSをまとめています。
color: #c5004c;
font-size: 20px;
font-weight: bold;
line-height: 1.8;
text-align: left;
text-align: center;
text-align: right;
background-color: #c5004c;
background-image: url("images/bg.jpg");
画像ファイルの場所を指定します。
width: 500px;
max-width: 1000px;
height: 300px;
margin: 20px 30px;
margin: 0 auto;
padding: 20px 30px;
border: 1px solid #333;
border-radius: 10px;
max-width: 100%;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
display: block;
display: inline-block;
display: none;
@media (max-width: 767px) {
/* スマートフォン用CSS */
}画面幅が767px以下のときだけ、中に書いたCSSが適用されます。