40代高卒者が製造業からIT転職する【WEB制作編3】

programming
DMM WEBCAMP

こんにちは、フローです。

今回もHTMLの事を書いて行きたいと思います。

前回の記事はこちら。

40代高卒者が製造業からIT転職する【WEB制作編2】

Visual Studio Codeにコードを書いてそれをChromeに表示させる方法はもう覚えましたか？

ググれば、沢山の記事が出てくるので、がんばってやってみましょう。

【簡単】vscodeの内容をブラウザ表示させる4つの方法

こちらの記事が分かりやすそうだったので載せておきます。

私も簡単に説明して行こうと思います。

ChromeでHTMLを表示させる方法

Visual Studio Codeで次の様な簡単なHTMLを書いてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>ようこそ！私のWEBサイトへ</h1>
    <p>ここにテキストを入れます</p>
    <p>ここに二つ目のテキストを入れます</p>
  </body>
</html>

Visual Studio CodeでHTMLファイルを作成する方法と、Google ChromeでそのHTMLファイルを表示する方法を以下に説明します。

HTMLファイルを作成する方法

1 Visual Studio Codeを開きます。

2 新しいファイルを作成し、それを”index.html”という名前で保存します。

Google ChromeでHTMLファイルを表示する方法

1 Google Chromeを開きます。

2 ファイルメニューから、「ファイルを開く」を選択します。

3 ファイルブラウザが開きますので、先ほど保存した”index.html”を選択します。

以上で表示されるはず？です。

レッツチャレンジ！

CSSで装飾してみよう

背景色とフォントカラーを変更するCSSを使用しています。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <style>
      body {
        background-color: lightblue;
        color: white;
        font-family: Arial, sans-serif;
      }
      
      h1 {
        color: navy;
        font-size: 2em;
        text-align: center;
        text-shadow: 2px 2px lightgray;
      }
      
      p {
        font-size: 1.2em;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>ようこそ！私のWEBサイトへ</h1>
    <p>ここにテキストを入れます</p>
    <p>ここに二つ目のテキストを入れます</p>
  </body>
</html>

この例では、<style>タグを使用して、body、h1、およびp要素にスタイルを適用しています。

body要素には、背景色、フォントカラー、およびフォントファミリーが指定されています。

h1要素には、フォントカラー、フォントサイズ、テキストの中央揃え、

およびテキストの影を付けるスタイルが指定されています。

p要素には、フォントサイズと行の高さが指定されています。

この例を使用して、自分でCSSスタイルを適用して、より魅力的なWebページを作成することができます。

簡単なHTMLの記述の場合は、

このように直接HTML内に<style>タグを書いて色やフォントなどを指定しますが、

普通は、style.cssファイルを使い色やフォントを整えていきます。

style.css

以下はHTMLファイル内の<link>タグを使用して、外部のCSSファイルでスタイルを定義する方法の例です。

HTMLファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ようこそ！私のWEBサイトへ</h1>
    <p>ここにテキストを入れます</p>
    <p>ここに二つ目のテキストを入れます</p>
  </body>
</html>

CSSファイルを作成します。

Visual Studio Codeなどのテキストエディタを使用して、新しいファイルを作成し、

それを”style.css”という名前で保存します。

以下のコードを記述します。

body {
  background-color: lightblue;
  color: white;
  font-family: Arial, sans-serif;
}
      
h1 {
  color: navy;
  font-size: 2em;
  text-align: center;
  text-shadow: 2px 2px lightgray;
}
      
p {
  font-size: 1.2em;
  line-height: 1.5;
}

HTMLファイルで<link>タグを使用して、CSSファイルを読み込みます。

<link>タグは<head>セクション内にあります。

href属性は、読み込むCSSファイルのファイルパスを指定します。

<link rel="stylesheet" href="style.css">

こうゆうやつです。

これで、HTMLファイルとCSSファイルを作成し、

HTMLファイルでCSSファイルを読み込むことができます。

HTMLファイルをWebブラウザで開くと、CSSファイルで定義されたスタイルが適用されます。

まとめ

今回は

1.Visual Studio CodeをChromeで表示させる方法

2.簡単なHTMLの styleを整える方法

3.style.cssファイルを使用して、styleを整える方法

この３つを紹介しました。

WEBで非常に重要なデザインの要素なので是非色々と試してみて、覚えてって下さい。

次回はもう少し詳しく、説明していきます♪