Kakera.link

【CSS基礎ノック 準備】HTMLを準備しよう

これからCSS基礎をやっていくためのHTMLファイルとCSSファイルを作成しておきます。

いつも同じHTML・CSSファイルの土台づくり

まずは適当な場所に「CSS基礎ノック」フォルダを作成します。(どこでもいい人は書類フォルダやデスクトップなどに作ってください)

次に、作成した「CSS基礎ノック」フォルダに index.html ファイルと、style.css ファイルを作成します。

最後に index.html ファイルに

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    </body>
</html>

をコピペしてください。

本文を準備

最後にCSS基礎ノックでCSSを書いていくためのHTMLを追加しておきます。
文章自体は何でもいいですが、
h1、h2、p(2つ)、a、ol(li)、imgタグは使ってください。
画像を使うので、CSS基礎ノックフォルダ内に、photo.png などの画像を追加しておいてください。

こんな内容をbodyタグ内に書いてください(自分で書かずコピペでも大丈夫です)

<h1>HTMLとCSS</h1>
<h2>CSS基礎ノック</h2>
<img src="photo.png">
<p>今回はCSS基礎ノックです</p>
<p>今回は</p>
<ol>
  <li>文字色を変える</li>
  <li>文字サイズを変える</li>
  <li>文字を太くする</li>
</ol>
<p>などをやっていきます。<a href="https://www.kakera.link/collections/0d81e0a5102384280f36">詳しくはこちら</a></p>

HTML全体はこんな感じです

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <h1>HTMLとCSS</h1>
      <h2>CSS基礎ノック</h2>
      <img src="photo.png">
      <p>今回はCSS基礎ノックです</p>
      <p>今回は</p>
      <ol>
        <li>文字色を変える</li>
        <li>文字サイズを変える</li>
        <li>文字を太くする</li>
      </ol>
      <p>などをやっていきます。<a href="https://www.kakera.link/collections/0d81e0a5102384280f36">詳しくはこちら</a></p>
    </body>
</html>
最終更新: 2020/10/05 17:45

おすすめのカード