プロフィール
プログラミング PR

【初心者向け！】HTML/CSS超入門！

  /
記事内に商品プロモーションを含む場合があります

ソフトウェアエンジニア歴10年以上になる私が（Web開発は3年ほど）、
HTML/CSSの基本を説明した後、実践もレクチャします！
本当に初心者向けですが、皆さんの参考になれば幸いです〜。

Contents
  1. ファイルについて
  2. HTMLとは？
  3. CSSとは？
  4. 参考：その他の基礎的な項目
  5. HTML・CSSを書いてみよう！
  7. まとめ

ファイルについて

さて、皆さん、ファイルについてご存知でしょうか？
おそらくですが、今の世の中、
パソコンを使われている方が多いので
意識せずに触れている方は多いかと思います。

こんな↓ モノたちをファイルと言います。
※私のローカルのやつを適当に笑

extension-samples



パソコンで言うところの「ファイル」とは、
情報を保存するための「入れ物」のようなものです。
たとえば、文書、写真、音楽、動画など、
さまざまなデータがファイルという形で保存されます。

ファイルには名前がつけられており、
（例：sample.txt）。

拡張子という形式を示す部分があります。
（例l：.txt, .zip, .png, .html）

拡張子により、
どのソフトウェアで開くかが分かるようになっています。

さて、本記事で使うHTML/CSSも結局はファイルです。
上でいうところのsample.htmlがHTMLです！
拡張子みると分かりやすいですね〜。

拡張子は最初パソコン上で表示されていないこともあるので
以下にやり方を載せておきます。

Windowsで拡張子を表示する方法

  1. エクスプローラーを開く:
    任意のフォルダーを開いて、エクスプローラーを表示します。
  2. 「表示」タブをクリック:
    エクスプローラーの上部にある「表示」タブをクリックします。
  3. 「ファイル名拡張子」のチェックボックスをオンにする:
    「表示」タブの右側にある「ファイル名拡張子」という
    チェックボックスを見つけ、それをオンにします。
    これで、すべてのファイルの拡張子
    （例：example.txtの.txt部分）が表示されます。

Macで拡張子を表示する方法

  1. Finderを開く:
    デスクトップの左下にある
    「Finder」アイコンをクリックして、
    Finderを開きます。
  2. メニューバーから「Finder」→「環境設定」を選択:
    画面上部のメニューバーにある「Finder」をクリックし、
    ドロップダウンメニューから「環境設定」を選択します。
  3. 「詳細」タブをクリック:
    「環境設定」ウィンドウで「詳細」タブをクリックします。
  4. 「すべてのファイル名拡張子を表示」にチェックを入れる:
    「すべてのファイル名拡張子を表示」というオプションがあるので、
    それにチェックを入れます。
    これで、Finderで表示されるすべてのファイルに
    拡張子が表示されるようになります。

さて、それでは
まずは、HTMLとCSSについて
簡単に説明していきます〜。

HTMLとは？

HTMLは、ウェブページを作成するための
マークアップ言語と呼ばれる言語です。
HyperText Markup Languageの頭文字を取って、HTMLです！

HTMLは、タグというものを使ってウェブページの構造を定義します。
※厳密に言えば、プログラミング言語ではありません。
　しかし、Webサイト開発において重要な位置付けではあります。

皆さんがよく使うブラウザ（Chromeなど）はHTMLを解釈して、
皆さんの目にみえる形で表示する機能を持っています！

皆さんが毎日？見ている
Webサイトを見れるのはHTMLのおかげだったりします！

基本的なタグ

■sample.htmlの中身

<html> 
<body> 
<div> 
<h1>Sample</h1> 
<p>This is Sample</p> 
<ul> 
  <li>Sample1</li> 
  <li>Sample2</li> 
  <li>Sample3</li> 
</ul> 
</div> 
</body> 
</html>


■sample.htmlをダブルクリックし、ブラウザで開いた画像
※HTMLファイルを認識して、表示するのがブラウザの機能の1つです

  • <div>：ブロックレベルのコンテナ要素。
    複数の要素をグループ化するために使用されます。
    <div>ここに内容を入れます</div>
  • <h1>：最も重要な見出しを定義します。
    <h1>から<h6>までのタグがあり、
    数字が大きくなるほど見出しの重要度が低くなります。
    <h1>見出し1</h1>
  • <p>：段落を定義します。
    <p>これは段落です。</p>
  • <li>：リストを定義します。
    <ul>（順序なしリスト）や
    <ol>（順序付きリスト）の中で使用されます。

    <ul>
    <li>りんご</li>
    <li>みかん</li>
    </ul>

CSSとは？

CSS（Cascading Style Sheets）は、
HTMLの要素を装飾するための言語（技術）です。
CSSを使うことで、ウェブページのデザインやレイアウトを設定できます。
HTMLは文書を定義するだけなのですが、
CSSはその文書の見栄えを整えます。

以下は先ほど説明したHTMLのタグをブラウザで表示したモノです。
どうでしょう？なんか味気なくないですか？
これを華やかに変えてくれるのが、CSSなんです！
なので、Webデザイン・開発では必須の技術の1つです。

sample-html

基本的なCSS

それではCSSとはどういったものか見ていきましょう〜。
CSSが実際のWebデザインではHTMLとは
別のファイルにすることが多いです。
.cssってファイルがあったら、それがCSSになります。
ただ、書き方は色々あって、HTMLに直接書くこともできます。
リベシティのプロフィール装飾は直接書くことで行います。
※;は区切り文字です。CSSは1つの要素に複数指定できます

  • bold：テキストを太字にします。
    font-weight: bold;
  • border：要素に枠線を追加します。
    1pxの太さの黒線を示しています
    border: 1px solid black;
  • color：テキストの色を変更します。
    color: blue;

CSSの適用方法

インラインスタイル

HTML要素に直接スタイルを指定します。
HTMLタグに1個1個書くので、
変更があった場合に修正が面倒です。

<p style=”color: red;”>このテキストは赤色です。PART１</p>
<p style=”color: red;”>このテキストは赤色です。PART２</p>

内部スタイルシート

HTMLファイル内の<head>セクションにスタイルを記述します。
以下ではpタグの文字を一括で赤色にしています。1個1個やるより楽ですね！

<head>
<style>
p {
color: red;
}
</style>
</head>

外部スタイルシート

外部のCSSファイルをHTMLファイルにリンクします。
Webデザイン・開発は大体これかなと思います。
ファイルを分離できて、管理がしやすいからです。
HTMLは構造を、CSSはスタイルを、で役割分担です。

<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>

■sample.htmlをCSSで装飾すると？

<html> 
<body> 
  <div> 
    <h1 style="color: red;">Sample</h1> 
    <p style="font-weight: bold; color: green;">This is Sample</p> 
    <ul style="border: 3px solid blue;"> 
      <li style="color: red;">Sample1</li> 
      <li style="color: green;">Sample2</li> 
      <li style="color: blue;">Sample3</li> 
    </ul> 
  </div> 
</body> 
</html>


こんな感じに見えます！

css-sample

何もしないHTMLより華やかになりましたね！！

参考：その他の基礎的な項目

HTMLの基本構造

HTMLファイルの基本構造は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>初心者のHTML/CSS</title>
</head>
<body>
  <h1>ようこそ！</h1>
  <p>基本的なHTMLページの例です！</p>
</body>
</html>

<!DOCTYPE html>は、ドキュメントタイプ宣言と呼ばれ、
そのHTMLファイルで使用している HTMLのバージョン指します。
ブラウザにこのファイルはHTML5だよ〜って教えてるわけです。
書かなくてもブラウザに表示されますが、ブラウザが違う風に解釈してしまうかもです！

<html lang=”ja”>は、
このHTMLは日本語で書かれてますよ〜って宣言するものです。
日本語なのにenとか英語だ〜って言うとブラウザさんも困りますね笑

HTML・CSSを書いてみよう！

さて、折角なので、上で書いたうち
「外部スタイルシート」も使って、練習してみましょう〜。

では、まずはHTML/CSSファイルを作っていきましょう！
お使いのテキストファイルを作成、
編集できるエディタをご用意ください〜。
メモ帳でOKです！

※Windowsでは「メモ帳」、
　Macでは「テキストエディット」が
　標準でインストールされています

HTML/CSSファイルの作成

「メモ帳」、「テキストエディット」で新規ファイル作りましょう。
ファイル名を
・practice.html
・practice.css
のようにするのがポイントです。
先に説明した拡張子をしっかり指定していきましょう〜。
これでHTMLファイルだよ〜って示しているわけです。
※特にパソコンの設定変えてなければ
　作ったファイルをダブルクリックするとブラウザで開くはずです
CSSも同じでこれがCSSファイルだよ〜、ですね！

HTMLタグを書いてみよう！

practice.htmlにHTMLを書いてみよう！

まずはpractice.htmlに文章を貼ります。
皆さんも適当に文章を用意してください。
※ご自身のプロフィールなどをコピーしてきてもOK！

僕の場合は、愛猫の凜ちゃんを紹介する以下の文にします♪
凜ちゃんの画像も一枚用意しました。可愛いでしょう！？

こんにちは！今日はうちの可愛い三毛猫♀の凜ちゃんを紹介します！ 名前：凜（りん）ちゃん 種類：三毛猫 性別：♀ 年齢：1歳 趣味：寝ること

my-cat-rin

上の文章だけをpractice.htmlに貼り付けて
ダブルクリックしてブラウザで開き、表示を見ます。

こんな感じになります。なにやら1行になってますね。。
これはまだHTML＝マークアップ言語が活きていません。
マークアップとは、文章の構造を定義して、意味付けする言語です。

これじゃ凜ちゃんの可愛さをアピールできない！
ってことで、構造を整えましょう！！

simple-text

文章をタグで囲むだけで、構造をブラウザに伝えることができ、
ブラウザが意味を解釈して、いい感じに表示してくれます！

<html> 
<body> 
  <h1>凜ちゃんプロフィール</h1> 
  <p>こんにちは！</p> 
  <p>今日はうちの可愛い三毛猫♀の凜ちゃんを紹介します！</p> 
  <h2>概要</h2> 
  <ol> 
    <li>名前:凜（りん）ちゃん</li> 
    <li>種類:三毛猫</li> 
    <li>性別:♀</li> 
    <li>年齢:1歳</li> 
    <li>趣味:寝ること</li> 
  </ol> 
  <h2>写真</h2> 
  <img src="./rin.jpg" alt="凜ちゃん" width="500" height="500"> 
</body>
 </html>

そうすると、↓な感じ。見やすくなりましたね！
これで凜ちゃんの可愛さがちゃんと伝わりそうです♪笑

rin-html

CSSを書いてみよう！

HTMLで構造を定義しましたが、
CSSでもう少し華やかにしてみましょう！
practice.cssにCSSを書いていきますが、
「外部スタイルシート」を使うので、
HTMLにどのCSSを使うかを指定します。
<link rel=”stylesheet” href=”./practice.css”>ですね。

↓こんな感じ！

<html>
  <head>
    <title>Kevin Practice</title>
    <link rel="stylesheet" href="./practice.css">
  </head>
  <body>
    <h1>凜ちゃんプロフィール</h1>
    <p>こんにちは！</p>
    <p>今日はうちの可愛い三毛猫♀の凜ちゃんを紹介します！</p>

    <h2>概要</h2>
    <ol>
      <li>名前:凜（りん）ちゃん</li>
      <li>種類:三毛猫</li>
      <li>性別:♀</li>
      <li>年齢:1歳</li>
      <li>趣味:寝ること</li>
    </ol>
    <h2>写真</h2>
    <img src="./rin.jpg" alt="凜ちゃん" width="500" height="500">
  </body>
</html>

これでHTMLとCSSが紐づいたので、
あとはpractice.cssを書いていきます！

CSSにも色々な書き方があるのですが、
今回はタグを指定する方法をやってみます！

こんな感じ！↓ ぜひ試して、表示を見てみてくださいね〜。

body {
    background-color: green; /* 背景色 */
    color: pink; /* 文字色 */
}

h2 {
    text-decoration: underline; /* 下線 */
}

ol {
    border: 3px solid pink; /* ボーダー */
}

li {
    padding: 10px; /* リストの余白*/
}

img {
    border-radius: 50%; /* 画像の角丸 */
    border: 5px solid pink; /* ボーダー */
}

どうなるかというと、
文字をピンクで可愛くしたり、
画像を丸くしてみたり、
背景の緑はやりすぎかな・・・？
ピンクは緑で映えるらしいので！

でも凜ちゃんは可愛いですね〜笑

rin-html-css

参考：装飾用CSS

吹き出し

1つ目のdivタグ内の
「ストレングスファインダー（Top10）」を変えてください。

background-colorが吹き出しの背景色で、
colorが文字色です。
「#B3D0EC」は青っぽい色です。
「#ffffff」は16進数表記で全部fは白色です！
色については、このページ（Web色見本）とか
他にも色々参考ページがあるので探してみてください。
上のページの＃から始まるコードをコピペしてきて
「#B3D0EC」を置き換えると色を変更できます！

2つ目のdivは下向きの三角形を表しているのであまり気にせず！

<div style="background-color:#B3D0EC;color:#ffffff;display:inline-block;padding:6px 15px;border-radius:5px;font-weight:bold;margin-top:5px">
プロフィール
</div>
<div style="width:0px;height:0px;border-style:solid;border-width:10px 10px 0 10px;border-color:#B3D0EC transparent transparent transparent;margin-left:16px;margin-bottom:1px">
</div>

枠線

「border-style:solid;」は線のスタイルです。
solid（普通の線）をdashed にすると点線にできます！

colorは16進数以外にも色々な指定方法があり、
下の例ですとtealというもともと定義されている色名で指定しています。
※参考ページ

<div style="border-style:solid;border-width:2px;border-color:teal;padding-left: 2em;padding-bottom: 2em">　
・猫と遊ぶ　
・美味しいものを食べる　
・個人アプリ開発　
・読書　
・動画鑑賞　
・ソフトウェアやお金いろいろなことの勉強
</div>

css-color-sample

まとめ

以上が、初心者向けのHTML/CSS超入門になります。
細かい点は色々と省略していますが、
面白そうだなぁと思った方は、ぜひ勉強してみてください！

どなたかのキッカケになれば幸いです！

RELATED POST