CSS | ビズドットオンライン https://it-biz.online Sun, 26 Apr 2026 09:34:17 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://it-biz.online/wp-content/uploads/2019/10/cropped-4a332f05ade4ac7bb3c46c472cb5eac8-32x32.png CSS | ビズドットオンライン https://it-biz.online 32 32 【CSS】5分でマスターする！displayプロパティの使い方 https://it-biz.online/web-design/display/ Mon, 20 Jan 2020 03:10:23 +0000 https://it-biz.online/?p=3267 要素の表示形式を決める「display」プロパティの意味と使い方を解説します。

displayプロパティは初心者にとって理解しづらい部分ではありますが、CSSでのレイアウト整理において最も基本的で重要な役割を担っています。このページでは、displayプロパティの意味と使い方をサンプルコード付きで１から解説していきます。

このページで学べる内容
  • 【前提】CSSの基本―プロパティとは？
  • ブロックレベル要素とインライン要素―詳細解説記事へのリンクあり
  • displayプロパティの意味と使い方
  • blockの意味と表示形式
  • inlineの意味と表示形式
  • inline-blockの意味と表示形式
  • noneの使い方

Web担当者やWebデザイナーを目指す方であれば、絶対に知っておきたい重要知識ばかりですので是非最後までご覧ください。

【前提】CSSの基本―プロパティとは？

HTMLの各要素の色や形を変える（デザインを変更する）役割を担うのが、CSS（Cascading Style Sheet）の役割でした。CSSの基本構造は「①どの要素の」「②どの部分を」「③どのように変えるか？」という３つの情報から成り立ちます。

「②どの部分を」の情報をCSSでは「プロパティ」と呼びます。本ページで紹介するdisplayも、CSSで指定する「プロパティ」の一種です。

CSSの基本を丁寧に復習したい方はまずはこちらの記事をご覧ください。

【初心者向け】CSSとは？３分でわかりやすく簡単に解説
【初心者向け】CSSとは？３分でわかりやすく簡単に解説 - CSS（Cascading Style Sheets）の基本概念、セレクタとプロパティについて、初心者にも理解しやすい言葉で解説します。Webページのデザインやレイアウトをコントロールする方法を短時間で学べます。
it-biz.online
2023.04.18

ブロックレベル要素とインライン要素

displayプロパティを理解するためには、インライン要素とブロック要素の違いを押さえましょう。

インライン要素とブロックレベル要素の違い

ブロックレベル要素

  • 行全体で１単位のまとまりをつくる
  • ブロックレベル要素は縦方向に並ぶ

インライン要素要素

  • 行の中の一部のまとまりをつくる
  • インライン要素は横方向にならぶ

ブロックレベル要素とインライン要素を用いて実際のWebページを作成した例がこちらです。

サンプルコード

HTML

<h2>ブロック要素</h2>
<p>pタグはブロック要素です。</p>
<p>そのため、pタグで囲まれた範囲は行全体に広がります。</p>
<div>背景色が行全体に広がります。</div>
<p>新しく定義したブロック要素は必ず改行されて表示されます。</p>

CSS

div{
  background-color:#f5ef42;
}

インライン要素とブロックレベル要素の違いについては、以下のページでも詳しく解説しております。

【HTML】インライン要素とブロック要素の違いを３分でわかりやすく解説
HTMLのインライン要素とブロック要素の違いをわかりやすく解説！3分で理解できるコンパクトなガイド。要素の配置、幅と高さ、余白と境界線、要素の含有についての違いを簡潔に説明します。
it-biz.online
2023.04.20

displayプロパティの意味と使い方

displayプロパティは、要素の表示形式を変更することができるプロパティです。このプロパティを用いることで、要素レベル（ブロックレベル要素 / インライン要素）を変更することが可能になります。

例えば、divタグはデフォルトではブロックレベル要素ですが、displayプロパティを用いて「インライン要素」に変更することができます。

ここでは、プロパティが取る代表的な４つの値を解説していきます。それぞれどのように利用されるのか？をイメージできるようにしましょう。

display: block

「display: block」とすると、対象の要素を「ブロックレベル要素」に変更することができます。

以下のタグはデフォルトで「display: block」となっています。

ブロックレベル要素のタグ例
  • divタグ
  • 見出し（h1~h6）タグ
  • pタグ
【HTML】divタグの使い方とコツを３分でわかりやすく解説
HTMLにおけるdivタグの基本的な使い方と、実際のWebページでの活用例、そしてdivタグを使う際のコツや注意点について、3分でわかりやすく解説します。初心者でも理解しやすいように、図解付きで丁寧に説明します。
it-biz.online
2024.03.21
【HTML】hタグ（見出し）タグ：h1~h6を３分でわかりやすく解説
【Webエンジニア向け】hタグ（見出し）タグ：h1~h6 の意味と使い方、注意点をわかりやすく３分で解説します。
it-biz.online
2023.03.14

display: inline

「display: inline」とすると、対象の要素を「インライン要素」に変更することができます。

以下のタグはデフォルトで「display: inline」となっています。

ブロックレベル要素のタグ例
  • aタグ
  • spanタグ
  • imgタグ
【HTML】aタグ（リンク）の基本を３分でわかりやすく
【Webエンジニアを目指すなら】初心者向けにHTMLのaタグ（リンクタグ）の基本・使い方をサンプルコード付きで解説。target属性・title属性の使い方まで網羅的にご説明します。
it-biz.online
2023.03.14
【HTML】spanタグ：使い方と実践的な例を３分でわかりやすく解説
スタイリングの秘密兵器：spanタグの活用法とHTMLでの使い方をIT初心者向けに１からわかりやすくサンプルコード付きで解説します。初心者から上級者になるために、spanタグのHTMLにおける活用法とポイントをご説明します。
it-biz.online
2023.03.18
【HTML】img（画像タグ）を３分でわかりやすく解説
【初心者向け】HTML imgタグの基本を理解し、画像を効果的に表示する方法を学びましょう。src、alt、width、height属性の使い方や注意点、アクセシビリティやSEO対策など、初心者にも分かりやすい解説が盛りだくさんです。
it-biz.online
2023.04.04

display: inline-block

「display: inline-block」を指定すると、ブロックレベル要素とインライン要素の両方の特徴を兼ね備えた要素として表示されます。

といっても、難しく考える必要はありません。結論「inline-blockは、ブロックレベル要素だけど横に並ぶ」と理解しておけばOKです。

display: none

「display: none」を指定すると、対象が非表示となります。

あくまでも非表示にするだけなので、ブラウザでは対象の要素を読み込みに行くことになります。したがって、ページを軽くしようとする目的で「display: none」を利用しても全く意味がありません。

HTML/CSSを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学習するのが近道です。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】
プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。
it-biz.online
2023.05.30
]]> Bootstrap（ブートストラップ）とは？初心者向けにわかりやすく３分で解説 https://it-biz.online/web-design/bootstrap/ Thu, 13 Jul 2023 11:06:48 +0000 https://it-biz.online/?p=8191 Bootstrap（ブートストラップ）とは、Twitterの開発者により作成された無料のオープンソースのフレームワークです。Bootstrapは人気のあるフロントエンドフレームワークの１つで、HTML、CSS、そしてJavaScriptから成り立つお便利ツールのようなもの。

参考　HTML CSS JavaScript とは？

Bootstrapを利用することで、１からCSSやJavaScriptをコーディングする必要がなくなるため、効率的にモダンなWebシステムを開発することが可能になります。

このページでは、Bootstrapの基本的な概念から、その使用方法、そして実際のプロジェクトでどのように活用できるかまで、ステップバイステップで詳しく解説します。

このページで学べる内容
  • Bootstrapとは何か
    • 主な特徴
    • 基本構造
  • Bootstrapのグリッドシステム
  • Bootostrapクラス

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

関連　ゼロから学ぶHTML/CSS/JavaScript入門

Bootstrapとは何か

Bootstrapは、Twitterの開発者によって生み出された無料のオープンソースフロントエンドフレームワークです。

フレームワークとは

フレームワークとは、特定の問題を解決するための既存のコードのセットです。（プログラムの部品・枠・型みたいなもの。）

フレームワークを使うと、開発者は複雑な問題を解決するために必要なコードをゼロから書く必要がなくなります。また、コードの再利用性とメンテナンス性が向上します。

その意味で、Bootstrapは HTML / CSS / JavaScript から構成されているお便利ツール（デザインのセット）のようなものと言えます。Bootstrapを利用することでレスポンシブかつモバイルファーストのWebサイトを効率的に構築することが可能になります。

Bootstrapは2011年に公開。柔軟性が高いのと、簡単に利用することが可能だったため、公開からすぐに人気爆発。

それ以来、Bootstrapは進化を続け、現在ではさまざまなデバイスとブラウザでの視覚的一貫性を確保しながら、洗練されたデザインを実装するための最先端のツールとして広く認識されています。

バージョン公開年特徴
1.x2011初のリリース。基本的なスタイリングとコンポーネントを提供。
2.x2012レスポンシブデザインのサポートを追加。
3.x2013モバイルファーストの設計思想を導入。フラットデザインとなり、外観が大幅に改善。
4.x2018Flexboxによるグリッドシステムを導入。Sassがプリプロセッサとして選択され、大規模な更新が行われた。
5.x2021jQueryの依存性を排除。JavaScriptでのパフォーマンス向上、CSSカスタムプロパティの追加、RTL（Right-To-Left）言語のサポートを追加。
表1：Bootstrapの歴史と特徴

以下にBootstrapを利用したサンプルコードを載せておきます。ここでは、詳細をすべて理解する必要はありません。あくまでも、なんとなくのイメージを掴めればOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Bootstrapサンプルページ</title>
</head>
<body>
    <!-- ナビゲーションバー -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">My Bootstrap Page</a>
    </nav>

    <!-- メインコンテンツエリア -->
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Welcome to My Bootstrap Page!</h1>
                <p>This is a simple example of a web page created with Bootstrap.</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrapを利用したサンプル
図1:Bootstrapを利用したサンプル

Bootstrapの基本構造

  1. HTMLドキュメント: まず最初に、HTMLの基本的な骨格を作ります。HTMLタグを使ってWebページのセクションを定義します。この段階では、そのセクションが何をするのか、どのように表示されるのかは定義しません。
  2. Bootstrap CSS: 次に、Bootstrapのスタイルシート（CSS）をHTMLドキュメントにリンクします。これにより、Bootstrapのスタイル（色やレイアウトなど）をWebページに適用することができます。
  3. Bootstrapクラス: HTMLタグにBootstrapのクラスを追加します。これにより、各セクションの見た目や振る舞いを決めます。例えば、「btn」クラスを追加すれば、そのタグはボタンとして機能します。
  4. Bootstrap JavaScript: 最後に、動きのある要素を追加したい場合は、BootstrapのJavaScriptをHTMLドキュメントにリンクします。

関連　Bootstrapを導入する（読み込み・リンクする）方法

Bootstrapの主な特徴

Bootstrapの主な特徴は以下の通り。

  1. さまざまなデバイスに対応: Bootstrapを使うことで、スマホやタブレット、パソコンなど、さまざまな画面サイズに対応したWebページを作ることができます。
  2. 再利用可能な部品: Bootstrapには、ボタンやメニューバーなどの、Webページによく使う部品（コンポーネント）がたくさん用意されています。これらをうまく使えば、簡単に綺麗なWebページを構築することが可能に。
  3. 動きのある要素: メニューをクリックしたときに表示される内容や、画像が自動的に切り替わるスライドショーなど、動きのある要素を追加することができます。
  4. 自分好みにカスタマイズ可能: Bootstrapで作るWebページは、自分の好みに合わせてデザインを変更することができます。

ざっくりいうと、上記４つの特徴は最近のWeb開発で必要とされているものをある意味すべて網羅しているとも言えます。

特に、スマホやタブレットなど、PC以外でインターネットを利用することが多くなった現代においてはもはやBootstrapのようなフレームワークは必須のツールだと言えます。

次の章ではより具体的にBootstrapを理解するため必要となる基本知識「グリッドシステム」と「クラス」についてご説明します。

グリッドシステムとクラスの仕組みを知ることで、グッとBootstrapに対するイメージや親近感がわくはずです。

Bootstrap：グリッドシステム

Bootstrapのグリッドシステムとは、画面を12等分の柔軟なグリッドに分割し、Webページのレイアウトを調整する仕組みのこと。

これにより、さまざまなデバイスサイズに対応したレスポンシブなレイアウトを容易に作成できます。ここでは、具体的にグリッドシステムを利用したWebページの作成方法をシミュレーションしてみたいと思います。

まず、以下のようにHTMLファイル全体を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Grid Example</title>
</head>
<body>
  <!-- ここにコンテンツを書きます -->
</body>
</html>

参考　HTMLの書き方・基本

このHTMLドキュメントでは、BootstrapのCSSをリンクタグを使ってインクルードしています。これにより、BootstrapのスタイルをWebページに適用することが可能になります。

そして、以下のようにHTMLドキュメントのbody部分にグリッドシステムを用いたコンテンツを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Grid Example</title>
</head>
<body>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        1列目
      </div>
      <div class="col-sm">
        2列目
      </div>
      <div class="col-sm">
        3列目
      </div>
    </div>
  </div>
</body>
</body>
</html>

参考　divタグ

この例では、「container」クラスを用いてページ全体を囲み、「row」クラスを用いて行を作成。そして、「col-sm」クラスを用いて行内に列を作成しています。'col-sm'というクラスは、小さいデバイスサイズ（スマートフォンなど）でもこの列が保持されることを意味します。

Bootostrap サンプル
図2：Bootostrap サンプル

各列に異なる数のグリッドを割り当てることも可能です。例えば、以下のようにすれば、左側の列が画面の半分（6つのグリッド）を占め、右側の列が残りの半分を占めるレイアウトを作成できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Grid Example</title>
</head>
<body>
<body>
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        左列
      </div>
      <div class="col-6">
        右列
      </div>
    </div>
  </div>
</body>
</body>
</body>
</html>
Bootostrap サンプル

図2：Bootostrap サンプル

グリッドシステムがない場合は、各要素の幅、高さ、位置などを１から手作業で調整しなければなりません。これは、非常に時間がかかるだけでなく、微調整が難しく、一貫性を保つことが難しいです。

また、グリッドシステムがなければ、各デバイスサイズに対応するためには手動で各要素の配置やサイズを調整する必要があります。各デバイスタイプに応じて「ここは〇〇pxにする」「ここは■■pxにする」という作業を地道に行う・・・だいぶ手間な作業を省けるのがグリッドシステムのメリットです。

Bootstrap「クラス」

Bootstrapは、あらかじめ定義されたCSSクラスの集合を提供しています。これらのクラスはHTML要素のクラス属性に追加することで、簡単にウェブページのスタイリングやレイアウトを制御できます。

参考　HTMLのクラス属性

CSSのクラスとは？

CSS（Cascading Style Sheets）のクラスは、スタイルを適用する対象のHTML要素を特定するための識別子。

クラスはHTMLの属性で、任意の名前を付けることができます。そのクラス名は、CSSファイル内でスタイルルールを作成する際のセレクタ（選択子）として使われます。

HTML

<p class="highlight">これはハイライトされたテキストです。</p>

CSS

.highlight {
    background-color: yellow;
    font-weight: bold;
}

この例では、HTMLでhighlightというクラスが指定された<p>（段落）要素があります。そのクラスは、CSSで背景色とフォントの太さを指定するために使用されています。この結果、highlightクラスが適用されたテキストは背景色が黄色で、太字になるということ。

たとえば、Bootstrapのbtnとbtn-primaryクラスを適用すると、ボタンの基本的なスタイリングと青色の背景が適用されます。

Bootstrap クラス
図4:Bootstrap クラス
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Grid Example</title>
</head>
<body>
  <button class="btn btn-primary">Click me</button>
</body>
</html>

このように、Bootstrapのクラスを使用することで、コーディングの手間を省きつつプロフェッショナルな見た目のWebページを作成することが可能になります。

以上が、Bootstrapの基本です。

Bootostrapとは？【まとめ】

  • Bootstrapは、Webサイトのデザインを効率的に行うための無料のフロントエンドフレームワーク。
  • HTML、CSS、JavaScriptを使って、レスポンシブかつモバイルファーストのWebページを簡単に作成することが可能。
  • グリッドシステム、プリセットされたCSSクラス、JavaScriptプラグイン等、豊富な機能を提供している。
  • 既存のデザインテンプレートとコンポーネントを活用することで、開発者はモダンなWebサイトを効率的に作成できる。

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか？今すぐ行動したい方は以下の記事をチェック！

【無料】プログラミングスクールの探し方 >

読者料典　【無料】ゼロから学ぶHTML/CSS/JavaScript入門　←こちらから！

]]> 【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説 https://it-biz.online/web-design/html/ Tue, 04 Feb 2020 12:00:00 +0000 https://it-biz.online/?p=3553

随時アップデート中 / ブックマーク推奨

Webページを開発するための必須スキル「HTML」「CSS」「JavaScript」を初心者向けに０から分かりやすく解説します。

現代では様々なWebページ・Webアプリケーションを作るためのツールやフレームワークが存在していますが、結局はHTML / CSS / JavaScriptの基本理解が必要不可欠。逆に言えばこの３つの言語を理解することで様々なWebページやWebアプリケーションを自由に作成することが可能になります。

つまるところ、この3つさえ理解してしまえば、ある程度の現場で通用するスキルが身につけられた！と言えるようになるでしょう。

このページでは、右も左も分からないIT初心者が「自分一人でWebページ・Webアプリケーションを作成できるようになる！」ことを目標に、HTML / CSS / JavaScriptの基本を0から解説。それぞれのトピックごとにページを分割しており、このページからトピックページで飛んでいくことで学習が完結します。

１トピックあたり数分で学習できるように設定しているので、自分のペースで電車の中や自宅・カフェ・勉強スペースなどでのトレーニングに役立ててください。

千里の道の一歩から・・・！ということで１個１個整理しながら学習していきましょう。それでは早速「そもそも、HTMLとCSSとJavaScriptって何？」という点から解説を始めます。

HTML / CSS / JavaScript とは？

Webページを「家を建てる」ようなイメージでざっくり表したのが以下の図です。

HTMLとCSSとJavaScriptの違い
図1：HTMLとCSSとJavaScriptの違い

HTML（HyperText Markup Language）は、Webページの構造を定義する言語であり、文章や画像、リンクなど、ページ内の要素を配置し、意味を持たせます。

CSS（Cascading Style Sheets）は、HTMLで構築されたWebページの見た目を整えるためのスタイリング言語です。色、フォント、レイアウトなど、デザインに関するあらゆる要素を制御し、見栄えを整える力を持っています。

JavaScriptは、Webページに動的な機能やインタラクティブな要素を追加するプログラミング言語であり、HTMLとCSSだけでは実現できないアプリケーションのような機能を持たせることができます。

参考　HTML/CSS/JavaScriptの違いをわかりやすく解説

ザックリいえば、HTMLが「骨組み」CSSが「見た目」JavaScriptが「動き」です。この３つを有機的に組み合わせることで１つのWebページ・Webアプリケーションが完成します。基本となるのはずばり「HTML（＝骨組み）」です。

このページでは初心者向けに基本の「き」となるHTMLの概念や動作原理から解説していきます。

WebDesign入門：カリキュラム
  • HTML入門
    • HTMLの概要と役割
    • HTMLの基本構造/基本ルール
    • タグと要素の概念
    • 主要なHTMLタグ
    • HTML文書の構造化とセマンティックマークアップ
    • リンクと画像の埋め込み
    • テーブル、リスト、フォームの作成
  • CSS入門
    • CSSの概要と役割
    • CSSの基本構文
    • セレクタとスタイルの適用範囲
    • ボックスモデルとレイアウト
    • テキスト、背景、ボーダーのスタイリング
    • レスポンシブデザインの基本
    • アニメーションとトランジション
  • JavaScript入門
    • JavaScriptの概要と役割
    • JavaScriptの基本構文
    • 変数、データ型、演算子
    • 条件分岐とループ
    • 関数とスコープ
    • DOM操作とイベントハンドリング
    • 非同期処理とAjax
    • JavaScriptのライブラリとフレームワーク

HTML入門

まずは、Web開発の最も基本となるHTMLから学習を始めていきます。

この章では、HTMLの基本的な概念や役割を学び、Webページの骨組みを構築する方法を身につけます。文章や画像、リンク、リスト、テーブルなど、Webページに必要な要素を整理し、読み手に伝わるように表現します。

また同時にHTMLの基本構造を理解し、タグや要素の概念を把握することから始めていきます。主要なHTMLタグを紹介し、実際にページ構造を作成する方法を学んでいきます。さらに、HTML文書の構造化やセマンティックマークアップの重要性を解説し、より効果的なWebページを構築する方法を学びます。

HTMLをマスターすることで、あなたはWebページの基本的な構造を自由に築くことができるようになります。このセクションを通して、Web開発の根幹をなすHTMLの魅力と力を存分に体感しましょう！

ステップ1-1：HTMLの概要と役割

【初心者向け】マークアップ言語とは？３分でわかりやすく解説
マークアップ言語って何？短時間でわかりやすく学びたい方へ、3分でマスターできる解説記事です。HTML、XML、Markdownなど、基本概念から実例までシンプルにご紹介。これであなたもマークアップ言語のプロに！
it-biz.online
2023.04.05
HTMLとは？初心者向け/簡単にわかりやすく３分で解説
初心者向けにHTMLを簡単に解説！HTMLとは何か、その役割や基本的な構成をわかりやすく説明します。たった3分でHTMLの基本を理解し、ウェブ開発への第一歩を踏み出しましょう！
it-biz.online
2023.06.30

ステップ1-2：HTMLの基本構造/基本ルール

この章では、HTMLの基本構造と構文ルール、その他「属性」などの基礎知識について整理していきます。

実際にコーディングしていくに際して必要となる知識を網羅的に学習することが可能です。

【初心者向け】HTMLの書き方の基本/基礎を３分で解説
【HTML入門編】HTMLの書き方を初心者向けにわかりやすくまとめました。HTMLって何？イメージがわきづらい方もこのページをご覧になれば「何となく」のイメージをつかめるはずです。
it-biz.online
2023.07.10
【HTML】タグの "属性" についてわかりやすく３分で解説
HTMLタグの属性について、初心者にもわかりやすく解説。3分で基本的な属性の概念と使い方を把握し、ウェブページ作成のスキルアップに役立てましょう。
it-biz.online
2023.03.20
【HTML】インライン要素とブロック要素の違いを３分でわかりやすく解説
HTMLのインライン要素とブロック要素の違いをわかりやすく解説！3分で理解できるコンパクトなガイド。要素の配置、幅と高さ、余白と境界線、要素の含有についての違いを簡潔に説明します。
it-biz.online
2023.04.20

ステップ1-3：HTMLの基本タグ

この章ではHTMLの基本的なタグについて学習していきます。

実は、覚えるべきタグの数は多くありません。複雑なWebページも、実は複数の基本タグの組み合わせで構成されています。この章では、HTMLのタグの中で覚えておきたい基本タグを学びます。

この章で学べる内容
  • headタグ/bodyタグ
  • pタグ―段落タグ
  • 見出し（h1~h6）タグ
  • liタグ（リストの作り方）
  • dlタグ（説明リストの作り方）
  • aタグ / リンクタグ
  • spanタグ / divタグ
  • imgタグー画像の埋め込み方法
  • テーブルの作り方
  • Formタグー入力フォームの作り方
  • linkタグ
【HTML】headタグ：意味と使い方・重要性を１分で解説
HTMLのheadタグの意味と使い方、重要性を1分で簡潔に解説。ウェブページのメタデータ、タイトル、キャラクターセット、SEO対策などを理解し、効果的なウェブページを構築しましょう。
it-biz.online
2024.01.18
【HTML】pタグ（段落タグ）とは？３分でわかりやすく解説
<p>タグ（段落タグ）の基本的な概念、使い方、および使用例をわかりやすく解説します。この3分で読める記事で、HTML文書における段落の作成方法を理解し、コンテンツの構造と可読性を向上させましょう。
it-biz.online
2023.04.04
【HTML】hタグ（見出し）タグ：h1~h6を３分でわかりやすく解説
【Webエンジニア向け】hタグ（見出し）タグ：h1~h6 の意味と使い方、注意点をわかりやすく３分で解説します。
it-biz.online
2023.03.14
【HTML】aタグ（リンク）の基本を３分でわかりやすく
【Webエンジニアを目指すなら】初心者向けにHTMLのaタグ（リンクタグ）の基本・使い方をサンプルコード付きで解説。target属性・title属性の使い方まで網羅的にご説明します。
it-biz.online
2023.03.14
【HTML】リスト（ulタグ・olタグ・liタグ）の使い方を３分で解説
HTMLのリスト（ulタグ・olタグ・liタグ）を効果的に使用する方法を３分でわかりやすく解説します。無順序リストや順序付きリストの作成、入れ子構造の理解、スタイリングについても簡潔にサンプルコード付きでご説明します。
it-biz.online
2023.04.12
【HTML】説明リスト（dlタグ・dtタグ・ddタグ）を３分でわかりやすく解説
HTMLの説明リスト（dlタグ・dtタグ・ddタグ）の基本的な使い方と構造を短時間で解説。用語と説明をペアで表示する説明リストの作成方法、適切な使用例、アクセシビリティへの配慮など網羅的にご説明します。
it-biz.online
2023.04.12
【HTML】spanタグ：使い方と実践的な例を３分でわかりやすく解説
スタイリングの秘密兵器：spanタグの活用法とHTMLでの使い方をIT初心者向けに１からわかりやすくサンプルコード付きで解説します。初心者から上級者になるために、spanタグのHTMLにおける活用法とポイントをご説明します。
it-biz.online
2023.03.18
【HTML】divタグの使い方とコツを３分でわかりやすく解説
HTMLにおけるdivタグの基本的な使い方と、実際のWebページでの活用例、そしてdivタグを使う際のコツや注意点について、3分でわかりやすく解説します。初心者でも理解しやすいように、図解付きで丁寧に説明します。
it-biz.online
2024.03.21
【HTML】img（画像タグ）を３分でわかりやすく解説
【初心者向け】HTML imgタグの基本を理解し、画像を効果的に表示する方法を学びましょう。src、alt、width、height属性の使い方や注意点、アクセシビリティやSEO対策など、初心者にも分かりやすい解説が盛りだくさんです。
it-biz.online
2023.04.04
【HTML】tableタグ：テーブル（表）の作成方法を３分でわかりやすく
HTMLでテーブル（表）を作りたい初心者必見！タグを使った基本的な作成方法を、3分わかりやすく解説します。サンプルコード付きの説明であなたのWebサイトに簡単に表を実装できます。HTMLの表組みをすぐに理解したい方はぜひご覧ください。
it-biz.online
2026.05.26
【HTML】form：入力フォームの作成方法を３分で解説
【IT初心者向け】HTMLで入力フォームを作成する方法を解説します。formタグ・labelタグ・textareタグ（各type属性）・selectタグ・inputタグを０から解説していきます。
it-biz.online
2024.03.19
【HTML】linkタグとは？外部リソースの参照を１分で解説
HTMLの<link>タグの役割と使い方をわかりやすく解説。<link>タグはスタイルシートなどの外部リソースをWebページに組み込むための重要な要素。読み込み順序、パフォーマンスへの影響、相対パスと絶対パスの選択、セキュリティ対策など、<link>タグを利用する際の重要な注意点も網羅的にご説明。
it-biz.online
2024.03.05

ステップ1-4：応用的なHTMLの知識

お疲れ様でした。ここからはHTMLに関する最後の章です。

この章ではセマンティックHTMLなど、HTML5から利用できるようになった新機能、また実践の現場で必要となる応用的な知識について学習していきます。

この章で学べる内容
  • セマンティックHTML
  • header, footer, nav, main, article, section, aside等のタグ
  • HTML5の新機能
  • 新しい入力タイプ (email, date, range, number)
セマンティックHTMLとは？初心者向け３分でわかりやすく解説
初心者向けにセマンティックHTMLをわかりやすく3分で解説！HTMLの基本概念や、セマンティックタグの使い方、メリットを簡単に学び、効果的なウェブページ作成に役立てましょう。
it-biz.online
2023.08.02

CSS入門

CSS（Cascading Style Sheet）は、Webページのデザインやレイアウトをコントロールするための言語です。HTML（HyperText Markup Language）でWebページの構造を作成した後、CSSを使ってデザインやスタイルを適用することができます。

Webページを家に例えると、HTMLが家の骨組みや間取りを決めるのに対して、CSSは家具の配置や壁の色などを決める役割を担います。

ステップ2-1：CSSの基本概念と導入

この章ではCSSとは何か？という基本解説から始め、CSSの基本構文を学習していきます。

この章で学べる内容
  • CSSとは何か
    • セレクター
    • プロパティと値
    • セミコロンと波括弧の使い方
    • 疑似要素と疑似クラス
  • CSSとHTMLの関係
  • CSSの歴史とバージョン
  • インライン、内部、外部のスタイルシートの違い
【初心者向け】CSSとは？３分でわかりやすく簡単に解説
【初心者向け】CSSとは？３分でわかりやすく簡単に解説 - CSS（Cascading Style Sheets）の基本概念、セレクタとプロパティについて、初心者にも理解しやすい言葉で解説します。Webページのデザインやレイアウトをコントロールする方法を短時間で学べます。
it-biz.online
2023.04.18
【CSS】セレクタとは？主要な書き方10個を３分で解説
【初心者向け】CSSセレクタを簡単に理解するためのガイド。要素セレクタ、クラスセレクタ、IDセレクタ、属性セレクタなど、主要な10個のセレクタの使い方を3分で習得できる解説記事です。スタイリングの基本をマスターしましょう。
it-biz.online
2023.04.19
【CSS】疑似クラスとは？初心者向けにわかりやすく３分で解説
疑似クラスって何？CSSの疑似クラスを初心者向けにわかりやすく解説。3分で基本概念を把握し、要素の状態や特定条件でスタイルを適用する方法を学びましょう。
it-biz.online
2023.04.19
【CSS】疑似要素とは？初心者向けにわかりやすく３分で解説
疑似要素とは何か？初心者向けにわかりやすく解説するこの記事で、CSSの疑似要素がどのように機能し、効果的なデザインを作成するためにどのように活用できるのかを3分で学びましょう。
it-biz.online
2023.04.19
【HTML】id属性/class属性の違い・使い分けを３分でわかりやすく解説
【HTML】id属性とclass属性の違いを簡潔に解説。ページ内での一意性やCSS適用、JavaScriptでの利用を含む使い分け方法を3分で理解できるわかりやすいガイド。これを読めば、属性の選択に迷わなくなるでしょう！
it-biz.online
2023.04.20
【HTML】CSSの読み込み方法３点：わかりやすく１分で解説
【初心者向け】HTMLとCSSの読み込み方法を簡単に理解できるように、インラインスタイル、内部スタイルシート、外部スタイルシートの3つの方法をわかりやすく3分で解説。効率的なWebページ制作のためのポイントを押さえましょう。
it-biz.online
2024.03.05

ステップ2-2：ボックスモデルとレイアウト

この章で学べる内容
  • ボックスモデルの概念
  • マージン、パディング、ボーダー、コンテンツ
  • ボックスサイジング
  • ポジショニング（static、relative、absolute、fixed、sticky）
  • フロートとクリア
  • ディスプレイプロパティ（block、inline、inline-block、flex、grid）
【CSS】ボックスモデルを３分でわかりやすく解説
ボックスモデルを3分で理解しましょう！この解説では、コンテンツエリア、パディング、ボーダー、マージンの4つの領域について簡潔かつわかりやすく説明します。ウェブデザインの基本となるボックスモデルを効果的に学びましょう。
it-biz.online
2023.04.18
【CSS】box-sizing（border-box）を３分で解説
CSSのbox-sizingプロパティ（特にborder-box）をわずか3分で解説します。要素のサイズ計算を簡単にし、予測可能なレイアウトを実現する方法を学びましょう。レスポンシブデザインやグリッドシステムにも最適です。
it-biz.online
2023.04.18

ステップ2-3：テキスト/フォント/背景とカラーのスタイリング

この章で学べる内容
  • 背景カラー、背景画像
  • グラデーション
  • 背景サイズ、位置、繰り返し
  • カラーの表現方法（色名、RGB、RGBA、HEX、HSL、HSLA）

JavaScript入門

Webエンジニアと呼ばれるようになるには、やはりJavaScriptの基本理解は欠かせません。ここからは、JavaScriptの基本を０から１０まで網羅的に学習していきましょう。

ステップ3-1：基本構文とデータ型

この章で学ぶ内容
  1. 基本構文とデータ型
    • 変数の宣言（var, let, const）。
    • プリミティブデータ型（String, Number, Boolean等）。
    • 演算子と式。
  2. 制御構造
    • 条件分岐（if-else文）。
    • ループ（for文、while文）。
  3. 関数の基礎
    • 関数の宣言と呼び出し。
    • アロー関数。
【JavaScript入門】基本文法/基礎文法を5分で
JavaScriptの基本ルールとその応用を初心者にも分かりやすく解説。大文字と小文字の区別、空白と改行の扱い、セミコロンの重要性、コメントの書き方、予約語の使用禁止について、具体的なサンプルコードを用いて詳しく説明します。これを読めば、JavaScriptの基礎をしっかりと理解できるようになります。
it-biz.online
2024.01.30
【JavaScript】let・const・var の違いとは？初心者向けに使い分けを3分で整理
JavaScript初心者向けガイド：変数の宣言方法をvar, let, constの違いを中心に解説。関数スコープ、ブロックスコープ、巻き上げ、再代入の可否などの基本概念を明確に理解し、実用的なサンプルコード付きでわかりやすくご説明します。
it-biz.online
2026.04.26
【JavaScript】データ型の基本と動的型付けの仕組みを１分で
JavaScriptの動的型付けと基本的なデータ型（数値、文字列、論理型、未定義、空の値、シンボル）について初心者向けに解説。数値の特殊なケース、文字列操作方法、および論理演算の基本もカバーしています。プログラミングの基礎を固め、効率的なコーディングを目指しましょう。
it-biz.online
2024.03.21
JavaScript：テンプレートリテラルを１分で完全解説
【JavaScript入門】初心者向けにテンプレートリテラル（テンプレート文字列）の使い方をサンプルコード付きで解説します。テンプレートリテラルをマスターすれば、${変数}/${式}のような形で、文字列に変数の値や式の結果を埋め込むことができます。
it-biz.online
2024.02.20
JavaScript：配列（Array）とは？初心者向けに３分でわかりやすく解説
【初心者向け】JavaScriptで配列を利用する方法を画像・サンプルコード付きで解説します。「そもそも配列って？」「変数と何が違うの？」そんな疑問をお持ちの方でも、最後まで理解できるよう全ての用語を分かりやすく解説しています。
it-biz.online
2024.03.22
【JavaScript】if文で条件分岐の書き方の基本とコツを３分で解説
JavaScriptのif文の基本から応用までを簡潔に解説。初心者向けにelseやelse ifの使い方、論理演算子の活用方法をサンプルコード付きで紹介します。条件分岐をマスターして、効率的なプログラミングを始めましょう。
it-biz.online
2024.02.02
【JavaScript】3分で学べる！比較演算子（"==="の意味）
【JavaScript入門】JavaScriptで用いる比較演算子を整理して解説します。等価演算子（==）と厳密等価演算子（===）の違い、厳密不等価演算子（!==）など、初心者にとって理解しづらい概念もサンプルコードを用いて丁寧に解説します。
it-biz.online
2026.04.26
【JavaScript】1分で理解できる！switch文を用いた条件分岐（switch~case/dafault）
【初心者向け】JavaScriptのswitch文の使い方をなかなか理解できない！という方向けに、switch文の使い方を１から解説します。実際にswitch文を利用したサンプルコード付きで解説し、dafaultオプションの使い方などこれさえ覚えておけば間違いなし！という要点を絞って整理しています。
it-biz.online
2026.04.26
JavaScript：while文を用いたループ処理の基本とコツを１分で
JavaScriptでのwhileおよびdo...whileループの効果的な使用方法を解説。明確な終了条件の設定、カウンターの適切な更新方法、そして最低一回の実行を保証するdo...whileの特性に焦点を当てた実践的なサンプルコードを提供します。
it-biz.online
2024.03.11
JavaScript：for文を用いたループ処理を３分で解説
【初心者向け】JavaScriptの基本―。for文を利用したループ処理（繰り返し処理）の使い方・構文ルールを解説しています。JavaScript学習中の方でもサクッと理解できるようサンプルコードを用いて端的に分かりやすく要点を絞って説明しています。
it-biz.online
2024.02.19
JavaScript：forEachメソッド-配列のループ方法を１分で解説
【初心者向け】JavaScriptのforEachメソッドの使い方とその特徴を解説。基本的な使用法、非同期処理の扱い、配列の変更時の注意点など、forEachを効率的に使いこなすための重要なポイントを網羅的に紹介。プログラミングの知識を深め、より良いコードを書くためのガイドとして必見です。
it-biz.online
2024.02.14
【JavaScript】function（関数）とは？使い方と引数・戻り値を初心者向けに解説
【JavaScript入門】JavaScriptのfunction（関数）の意味と利用方法、コーディング方法を丸っと解説します。パラメータ（引数）の使い方やローカル変数/グローバル変数の差異など、function（関数）利用時に知っておきたい内容を３分でまとめます。
it-biz.online
2026.04.25
【JavaScript】アロー関数とは？functionとの違いと使いどころを初心者向けに解説
【JavaScript入門】アロー関数（=>）の使い方をまとめました。サンプルコード付きで初心者でも理解しやすいように解説しています。関数って何？関数式って何？という方でも、このページを読めば理解できるよう詳細解説記事へのリンク付きです。
it-biz.online
2026.04.26
【JavaScript】関数式（無名関数）とは？関数宣言との違いを3分で解説
【JavaScript入門】JavaScriptにおける「関数宣言(Function Declaration)」と「関数式(Function Expression)」の違いを端的に分かりやすく解説します。関数式で用いられる無名関数（匿名関数）や、「巻き上げ」の有無についてサンプルコードを用いながら説明します。
it-biz.online
2024.03.29
【JavaScript】コールバック関数とは？意味・使い方・Promiseとの違いをやさしく解説
JavaScriptでのコールバック関数の役割と基本的な使い方を徹底開設。この記事では、コールバック関数がどのようにして非同期処理を管理し、プログラムの流れを柔軟に制御するのかを簡潔にご説明。さらに、コールバック関数の利用例と、その適切な使用方法についても紹介します。
it-biz.online
2026.04.25
JavaScriptのオブジェクトとは？基本と使い方のコツを３分で解説
【超・初心者向け】JavaScriptの「オブジェクト」という概念が難しく挫折しかけている人のために、JavaScriptのエンジニアが要点を絞って分かりやすく解説します。プロパティって？メソッドって？オブジェクトってつまり何者？という疑問に３分でお答えします。
it-biz.online
2024.02.07
Javascript：クラスとは何か？を３分で【初心者向け】
JavaScriptのクラスに関する基本的な概念、継承、カプセル化、ポリモーフィズム、静的メソッドとプロパティについて解説します。初心者から中級者向けに、クラスの使い方とオブジェクト指向プログラミングの鍵となる概念を学ぶことができます。
it-biz.online
2025.01.17
JavaScript：documentオブジェクトの意味と使い方を３分で
【初心者向け】JavaScriptのdocumentオブジェクトの基本と使い方を初心者にも分かりやすく解説。DOM操作、要素の取得・変更、イベントハンドリングの方法を学び、サンプルコードを用いて実践的な知識を身につけましょう。
it-biz.online
2024.02.07
【JavaScript】alertメソッドの使い方―３分で学ぶアラート(ポップアップ)表示
本ページでは、JavaScriptの初心者向けにalertメソッドの使い方を０から解説します。alertメソッドは、JavaScript内であらかじめ用意されているwindowオブジェクトのメソッドです。alertメソッドを利用することで、以下の画像のように「ポップアップ画面」を表示することが可能に...
it-biz.online
2026.04.26

ステップ3-2：DOMとイベント処理

この章で学ぶ内容
  1. DOMとは
    • DOMの概念と構造。
    • DOM要素の選択と操作。
  2. イベント処理
    • イベントリスナーの追加。
    • イベントオブジェクトとイベント伝播。
【初心者向け】DOM入門：Webページ操作の基本を３分でわかりやすく
DOM（Document Object Model）とは何かを初心者向けに３分でわかりやすく解説します。Webページをツリー構造として表現し、JavaScriptと連携して動的な変更を可能にするDOMの基本概念とサンプルコードを紹介します。
it-biz.online
2023.12.15
【JavaScript】イベントリスナーとは？３分でわかりやすく解説
【超・初心者向け】この記事では、JavaScriptにおけるイベントリスナーの基本概念から、イベントリスナーの追加と削除方法に至るまで、初心者にも理解しやすい形で段階的に解説します。イベントリスナーを利用し、Webページ上でより豊かなユーザーインタラクションを実現する方法をご説明します。
it-biz.online
2025.05.07

ステップ3-3：JavaScriptによるWeb開発

この章で学ぶ内容
  1. フォーム操作
    • フォーム要素の取得と操作。
    • フォームの送信とバリデーション。
  2. Ajaxと非同期処理
    • Ajaxの基本。
    • Promiseとasync/await。
  3. フロントエンドフレームワークの紹介
    • React、Vue、Angularの比較。
Angularとは？初心者向けに１０分でわかりやすく
Angularの概要やプロジェクト構成、コンポーネント・データバインディング・モジュール（NgModule）・ルートコンポーネントなどを初心者向けにわかりやすく解説します。フォルダ構成の具体例や、TypeScript・HTML・CSSの連携、実際の画面例、Angularを基礎から理解するのに最適な内容です。
it-biz.online
2025.01.07

ステップ3-4：応用トピックスと最新トレンド

この章で学ぶ内容
  1. モダンJavaScriptの機能
    • ES6以降の新機能（スプレッド構文、デストラクチャリング等）。
  2. モジュールシステム
    • JavaScriptモジュールの概念。
    • importとexportの使い方。
  3. ツールとライブラリ
    • ビルドツール（Webpack等）。
    • 便利なライブラリの紹介。
  4. JavaScriptのセキュリティ
    • クロスサイトスクリプティング（XSS）。
    • クロスサイトリクエストフォージェリ（CSRF）。

Web開発の基本をマスターしたあなたへの次のステップ

おめでとうございます！あなたはHTMLやCSS,JavaScriptの基本を学習し、Web開発の世界への扉を開きました。

しかし、それだけでは十分ではありません。

Webページの骨格を作る言語の基本は理解できましたが、Web開発の真の魅力は、その先に広がる可能性を探求することです。プログラミングスクールでは、HTMLだけでなく、CSSやJavaScriptを学ぶことで、より魅力的でインタラクティブなウェブサイトを構築できるようになります。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】
プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。
it-biz.online
2023.05.30
プログラミングスクールをおすすめする理由
  • スキルセットの拡充
    HTMLに加え、CSS、JavaScript、PHP、Rubyなどの言語や、フレームワークを学び、あなたのスキルセットを強化することができます。
  • 実践的なプロジェクト
    学んだ知識を実践することで、理解が深まります。プログラミングスクールでは、リアルなプロジェクトに取り組むことで、スキルを磨くことができます。
  • ネットワーキング
    同じ目標を持った仲間と出会い、互いに刺激を受け合いながら、自分のキャリアを築いていくことができます。また、業界のプロフェッショナルからアドバイスを受けることも可能です。
  • 就職サポート
    プログラミングスクールは、卒業後の就職活動をサポートしてくれることが多いです。あなたの夢の仕事を見つけるための一助となります。
  • 自分のペースで学ぶ
    プログラミングスクールは、自分のペースで学ぶことができるオンラインコースや、短期集中型のブートキャンプなど、様々な形態があります。自分に合った方法で学ぶことができます。
]]> 【HTML】CSSの読み込み方法３点：わかりやすく１分で解説 https://it-biz.online/web-design/style/ Fri, 15 May 2020 12:00:00 +0000 https://it-biz.online/?p=3340 HTMLにCSSを適用する方法（CSSの読み込み方法）は３通り存在します。このページではそれぞれの方法をサンプルコード付きで解説しつつ、最も主流な方法はどれなのか？についてもご説明します。

前提として、HTMLとCSSの関係性を知っている必要がありますが、そちらについても本ページで１から解説しておりますので、ご安心ください。

このページで学べる内容
  • HTMLとCSSの関係性
  • HTMLにCSSを適用させる方法
    • インラインスタイル
    • 内部スタイルシート
    • 外部スタイルシート

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

【前提】HTMLとCSSの役割・関係性

ポイント

HTML

  • 文字や画像をマークアップ（意味付け）する
  • ページ全体の情報を構造化して整理する役割

CSS

  • HTMLで構成されたページのデザインの変更

Webページは、HTML（文章構造）とCSS（ページのデザイン）で成り立ちます。

Webページを家に例えると、HTMLが家の骨組みや間取りを決めるのに対して、CSSは家具の配置や壁の色などを決める役割を担います。

参考　HTMLとは？ / CSSとは？

これら2つの言語は相互補完的で、HTMLがページの基本構造を提供し、CSSがその構造に対してスタイルを適用することで、より魅力的で使いやすいWebページを作成することができます。

ただし、HTMLとCSSの書き方を知っていても、どのようにHTMLとCSSを関連付ければよいか？を知っていないと意味がありません。

このページでは作成したHTMLに対してCSSを適用させる方法を３通りに分けて解説します。

HTML / CSSの読み込み方法

HTMLにCSSを読み込ませる方法は全部で３つあります。

HTMLにCSSを読み込ませる方法３つ
  1. インラインスタイル
    HTMLのstyle属性にCSSを直接記述する
  2. 内部スタイルシート
    styleタグを利用してHTMLにCSSを直接記述する
  3. 外部スタイルシート
    linkタグを利用して外部のCSSファイルを読み込ませる

それぞれをサンプルコードつきで詳しく解説します。HTMLのタグやタグの属性など、聞きなれない言葉も適宜リンクを載せますのでご安心ください。

CSSの読み込み１：インラインスタイル（インラインCSS）

HTMLタグの中に直接CSSを記述する方法です。style属性を使用して、タグ内にCSSルールを記述します。ただし、この方法は保守性や再利用性が低いため、推奨されません。

参考　HTMLタグの属性とは？

この方法は「インラインCSS」とも呼ばれます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSSの読み込み①</title>
  </head>
  <body>
    <p style="color:blue;">ビズドットオンライン</p>
    <p>ビズドットオンライン</p>
  </body>
</html>

ブラウザの表示結果

図1：インラインCSS

この例では、<p>タグにstyle属性を使用して、テキストカラーを青にしています。インラインスタイルは、その要素にのみ適用されるため、他の<p>タグには影響しません。

インラインスタイルにはいくつかの欠点があります。以下のようなデメリットが存在するため、CSSの読み込み方法としては推奨ではありません。

インラインスタイルのデメリット
  • 再利用性が低い
    同じスタイルを複数の要素に適用したい場合、インラインスタイルを各要素に個別に記述する必要があります。これは手間がかかり、効率的ではありません。
  • 保守性が低い
    もしスタイルを変更したい場合、インラインスタイルが適用されている各要素を1つずつ修正する必要があります。これは、保守性が低く、エラーが発生しやすいです。
  • 可読性が低い
    インラインスタイルを使用すると、HTMLとCSSが混在するため、コードが読みにくくなります。これは、開発者がコードを理解しにくくなり、バグの原因となることがあります。
  • セレクターやメディアクエリが使えない
    インラインスタイルでは、CSSのセレクターやメディアクエリなどの機能が利用できません。これにより、柔軟なスタイリングが難しくなります。

これらの理由から、インラインスタイルは緊急の場合や、特定の要素に一度だけ適用するスタイルが必要な場合に限定して使用することが望ましいです。

このCSSを適用させたらどうなるかな？という感じで、テスト的に利用するために用いることが多い方法です。

CSSの読み込み２：内部スタイルシート（styleタグを利用）

２つ目の方法が、HTMLファイル内の<head>タグの中に<style>タグを記述し、その中にCSSルールを記述するやり方です。この方法は、CSSルールがページ固有であり、他のページと共有されない場合に適しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>これは内部スタイルシートの例です。</p>
</body>
</html>

この例では、<style>タグを使用して、<head>タグ内にCSSルールを記述しています。この場合、すべての<p>タグに青い色とフォントサイズ18pxのスタイルが適用されます。

参考　HTMLの基本構造

内部スタイルシートは、インラインスタイルに比べていくつかの利点があります。

  • 一元管理
    CSSルールをHTMLファイルの<head>タグ内で一元管理できるため、スタイルの変更や追加が容易になります。
  • 可読性
    インラインスタイルと比較して、HTMLとCSSが分離されているため、コードの可読性が向上します。
  • CSSの機能が利用可能
    セレクターやメディアクエリなど、CSSの全ての機能を利用することができます。

しかしながら、この方法でも以下のようなデメリットがあるため、特定のHTMLファイルにのみ適用されるCSSルールがある場合や、小規模なプロジェクトにおいてのみ利用されます。

  • 再利用性が低い
    内部スタイルシートは、そのHTMLファイルにのみ適用されるため、他のHTMLファイルで同じスタイルを使用する場合は、それぞれのファイルに同じCSSルールを記述する必要があります。
  • 保守性
    同じスタイルを複数のHTMLファイルに適用している場合、スタイルの変更を行う際に、それぞれのファイルを更新する必要があります。これは保守性に影響します。

CSSの読み込み３：外部スタイルシート

３つ目が最もポピュラーな方法です。別のファイルにCSSルールを記述し、HTMLファイルからそのファイルをリンクして読み込みます。

これが最も一般的で推奨される方法であり、CSSルールを複数のページで再利用し、保守性も高めることができます。<link>タグを使用して、CSSファイルをHTMLファイルにリンクします。

linkタグの詳しい使い方は以下のページでも解説しています。

【HTML】linkタグとは？外部リソースの参照を１分で解説
HTMLの<link>タグの役割と使い方をわかりやすく解説。<link>タグはスタイルシートなどの外部リソースをWebページに組み込むための重要な要素。読み込み順序、パフォーマンスへの影響、相対パスと絶対パスの選択、セキュリティ対策など、<link>タグを利用する際の重要な注意点も網羅的にご説明。
it-biz.online
2024.03.05

HTMLがブラウザに表示されるタイミングで、紐づけられたCSSファイルも同時に読み込まれるようになります。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <title>外部スタイルシートの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>これは外部スタイルシートの例です。</p>
  <p>これも緑色と20pxのフォントサイズが適用されます。</p>
</body>
</html>

CSSファイル（styles.css）

p {
  color: green;
  font-size: 20px;
}

外部スタイルシートを使用する際には、HTMLファイルの<head>タグ内に<link>タグを記述して、CSSファイルへのリンクを作成します。<link>タグにはrel属性とhref属性が必要です。rel属性には"stylesheet"を指定し、href属性にはCSSファイルへのパスを指定します。

外部スタイルシートの利点
  • 再利用性
    1つのCSSファイルを複数のHTMLファイルで利用できるため、効率的にスタイルを管理できます。
  • 保守性
    外部スタイルシートを利用すると、CSSの変更を一箇所で行うだけで、全てのリンクされたHTMLファイルに適用されます。これにより、スタイルの変更が簡単になり、保守性が向上します。
  • キャッシュの利用
    ブラウザは、外部スタイルシートをキャッシュして再利用することができます。これにより、ページの読み込み速度が向上し、通信量も節約できます。
  • 可読性
    HTMLとCSSが分離されているため、コードが綺麗に整理され、可読性が向上します。

外部スタイルシートを使用することで、効率的かつ保守性の高いウェブページを構築できます。さらに、CSSの再利用性を最大限に活用し、プロジェクト全体の開発効率と品質を向上させることができます。

３つの読み込み方法の優先順位

最後に上記３通りのCSSの読み込み方法の使い分け（優先順位）について補足しておきたいと思います。

CSSの優先順位

１位：インラインCSS
２位：styleタグの中に埋め込まれたCSS
３位：外部CSSに記述されたCSS

例えば、同じpタグに①インラインCSSでは「青」が、styleタグの中では「赤」が、そして外部CSSに「黄色」が指定されていたとします。

この場合、実際にブラウザに表示されるのは「青」になります。

CSSは、局所的であればあるほど優先される仕様です。

「CSSを適用したのに、なぜかデザインが変わらない・・・。」そんなときは、この優先順位が影響している可能性があります。もし、デザインが適用されない事象が起きたら、まずはそのCSSがどこに記述されているか？を確認してみるようにしましょう！

CSS読み込み方法の使い分け

①Webサイト全体のデザインを変更したい場合
　⇒外部CSSファイルの読み込み【方法３】

②１つのページのデザインだけを変更したい場合
　⇒headタグ内のstyleタグ内にCSSを記述する【方法２】

③特定の１か所だけを変更したい場合
　⇒style属性に直接記述する【方法３】

以上を意識した使い分けができるようになると、メンテナビリティが高いWebサイトの構築が可能になります。

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説
初心者向けのHTMLとCSSとJavaScriptの基本から応用までを分かりやすく解説。実践プロジェクトを通じて独力でホームページを作成できるようになります。今すぐ始めてウェブ開発の世界をマスターしましょう！
it-biz.online
2024.03.21
]]> 【HTML】headタグ：意味と使い方・重要性を１分で解説 https://it-biz.online/web-design/head/ Mon, 25 Feb 2019 12:00:00 +0000 https://it-biz.online/?p=2878 headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。

ページのタイトルなど、実際にページに表示されることはないものの、ページ全体で保持するデータを定義するためのタグなので重要なタグと言えます。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル名</title>
  </head>
  <body>
    <!-- ここに本文を記述 -->
  </body>
</html>

このページではheadタグが持つ意味と役割、重要性についてわかりやすく解説します。

このページで学べる内容
  • headタグの意味と役割
  • headタグの使い方・書き方
  • headタグの中に記述するべき内容は？

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

HTML：headタグとは？

HTMLの<head>タグは、ウェブページのメタデータを定義するための重要な要素です。

メタデータは、ウェブページの情報を表すデータで、ブラウザや検索エンジンに対してそのページの概要や設定を伝えます。

具体的には "ページのタイトル" や "言語" 、"ページを書いた人の情報" などが含まれます。

HTMLの全体構成は以下の通り、ブラウザに表示されない「文書のメタデータ」を示す部分と、実際のコンテンツを示すbody部分に分かれます。

html headタグ
<!DOCTYPE html>
<html>
  <head>
<!-- ページ全体の情報 -->
  </head>  
  <body>
    <!-- ページコンテンツ -->
  </body>
</html>

headタグは、このページ全体の情報のうち、読む人の目に入るコンテンツではなく、ページ全体の情報（前提となる情報）を定義していく役割を持ちます。

headタグの使い方・書き方

<!DOCTYPE html>
<html>
  <head>
<!-- ページ全体の情報 -->
  </head>  
  <body>
    <!-- ページコンテンツ -->
  </body>
</html>

headタグは通常、htmlタグの後 / bodyタグの前に記述します。

参考　HTMLの書き方：基本ルール

HTML：headタグの中に記述する内容

以下に一般的な＜head＞タグの使用例を記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

ここでは、一般的なWebページであれば基本的に埋め込まれている情報を大きく３つに分類して解説していきます。

覚えておきたい「headタグ内に記述する３つのタグ」
  • titleタグ ⇒必須タグ（超・重要）
  • metaタグ
  • linkタグ

titleタグ（タイトルタグ）

titleタグは、その名の通りタイトルを示すタグです。別の言葉言えば、ページの「題名」を定義するタグです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ウェブページのタイトル</title>
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

titleタグは、必須タグなので必ずページ内に一つ設置する必要があります。

使い方は一般的なタグと同様です。属性などは特に指定する必要はありません。このtitleタグで囲ったテキストはブラウザのタブに表示されるようになります。

また、ページ全体の内容を一言で表した内容として認識されるため、Googleの検索エンジンがページの内容を把握するためにも用いられるようです。これらを踏まえ、titleタグは「headタグ内に必ず１つだけ設置する」ようにしましょう。

metaタグ（メタタグ）

以下は、一般的なHTMLドキュメントの<head>タグ内で使用される一連のmetaタグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a sample meta description.">
    <meta name="keywords" content="sample,meta,tags,html">
    <meta name="author" content="Your Name">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>
  • <meta charset="UTF-8">
    このメタタグは、HTMLドキュメントのエンコーディング（文字コード）を指定するために使用されます。ここではUTF-8が指定されています。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    このメタタグは、デバイスのビューポートの設定を指定するために使用されます。ここでは、デバイスの幅をビューポートの幅と同じにし、初期スケールを1.0に設定しています。これにより、デバイスの画面に最適な表示が可能になります。
  • <meta name="description" content="This is a sample meta description.">
    このメタタグは、HTMLドキュメントの説明を提供するために使用されます。検索エンジンは、この説明を使用して、HTMLドキュメントの内容を要約するために使用します。
  • <meta name="keywords" content="sample,meta,tags,html">
    このメタタグは、HTMLドキュメントのキーワードを提供するために使用されます。これらのキーワードは、検索エンジンがHTMLドキュメントをインデックス化する際に使用されます。ここでは、サンプル、メタ、タグ、およびHTMLがキーワードとして指定されています。
  • <meta name="author" content="Your Name">
    このメタタグは、HTMLドキュメントの著者を提供するために使用されます。これは、ドキュメントが公開された場合に、著者の識別に役立ちます。

参考　HTMLタグの属性

linkタグ

HTMLの<link>タグは、HTMLドキュメント内で外部ファイル（CSSファイルやファビコンなど）を読み込むために使用されます。以下は一般的な<link>タグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>
  1. <link rel="stylesheet" href="style.css">
    この<link>タグは、HTMLドキュメントにスタイルシートを適用するために使用されます。href属性には、スタイルシートファイルへのパスが指定されます。rel属性には、このリンクがHTMLドキュメントとスタイルシートファイルの間の関係を定義するために使用されます。ここでは、rel="stylesheet"が指定されています。

関連　CSSを読み込む方法

  1. <link rel="icon" type="image/png" href="favicon.png">
    この<link>タグは、HTMLドキュメントにファビコンを追加するために使用されます。
    ファビコンは、Webサイトのタブやブックマークバーなど、ブラウザの各種場所に表示される小さなアイコンです。href属性には、ファビコンへのパスが指定されます。type属性には、ファビコンのMIMEタイプが指定されます。ここでは、PNG形式のファビコンであることを示すため、type="image/png"が指定されています。

参考　MIMEタイプとは？

headタグの意味と重要性
  • ウェブページのタイトル
    <head>タグの中には、<title>タグを使用してページのタイトルを指定します。タイトルはブラウザのタブやブックマーク、検索エンジンの結果ページで表示されるため、ユーザーがページの内容を理解しやすくする役割があります。
  • キャラクターセットの指定
    <head>タグ内で、<meta charset="UTF-8">のように指定することで、ページで使用される文字のエンコーディングを設定できます。これにより、ブラウザが正しい文字セットでコンテンツを表示できるようになります。
  • メタタグによるSEO対策
    検索エンジン最適化（SEO）に重要な役割を果たすメタタグも<head>タグ内に配置されます。これには、<meta name="description">タグでページの説明を指定したり、<meta name="keywords">タグで関連キーワードを設定したりできます。
  • リンクタグによる外部リソースの参照
    <head>タグ内で、<link>タグを使用してCSSファイルやファビコン（ブラウザのタブに表示される小さなアイコン）などの外部リソースを参照できます。これにより、ページのデザインや構造を制御することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

Webエンジニアになりたい方は→完全無料のHTMLロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTMLです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTMLを学習するためのロードマップ（全20記事）を整理しています。

以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説
初心者向けのHTMLとCSSとJavaScriptの基本から応用までを分かりやすく解説。実践プロジェクトを通じて独力でホームページを作成できるようになります。今すぐ始めてウェブ開発の世界をマスターしましょう！
it-biz.online
2024.03.21
]]> 【CSS】paddingとmarginの使い方・違いを３分でわかりやすく解説 https://it-biz.online/web-design/padding-margin/ Tue, 09 Jun 2020 12:00:00 +0000 https://it-biz.online/?p=3145 CSSにおけるpaddingとmarginは、要素のレイアウトを調整するための重要なプロパティです。

paddingとmarginはボックスモデルを構成するプロパティの１つ。このページでは、その中でも利用頻度が高く、初心者が混乱しがちなpaddingとmarginの使い方・違いに焦点を当ててご説明します。

css ボックスモデル
図1：ボックスモデル

参考　ボックスモデルとは？

このページで学べる内容
  • paddingの使い方
  • marginの使い方
  • paddingとmarginの違い・使い分け

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　CSSとは？書き方の基本を解説

CSS：paddingとmaginの基本

paddingとmarginは、どちらもCSSで指定することができるプロパティの1つ。具体的に言うと、ボックスモデルの余白部分の大きさを調整するためのプロパティです。

CSS/paddingとmagirn
図2：CSS/paddingとmagirn

前提知識として補足すると、HTMLのブロック要素には必ず表示領域とは別に余白部分が存在します。

ブロック要素の余白
図3：ブロック要素の余白

参考　ブロック要素とは？

この余白部分をさらに詳しく分解すると、「内側の余白」と「外側の余白」に分けることができます。

図4：paddingとmargin

この余白の部分を表しているのがpaddingとmarginプロパティです。

なぜ、１つのブロックに余白が２つも存在するか？これは、実際にCSSを使ってデザインをしていく中で何となくわかっていくようになりますので、今は一旦そういうものであると理解しましょう。

この、内側の余白を決めるのが「padding（パディング）」で、外側の余白を決めるのが「margin（マージン）」です。

paddingとmarginの違い
  • padding　　⇒　　内側の余白を示す
  • margin　　 ⇒　　外側の余白を示す
CSS/paddingとmagirn
図2：CSS/paddingとmagirn

ここからは具体的にpaddingとmaginの使い方とコツ、両者の使い分けについて詳しく見ていきましょう。

CSS：padding

paddingの構文ルールと使い方をサンプルコードと共に説明します。

構文ルール１　一括指定：すべての面（上下左右）に同じ値を設定

/* 全ての面に10pxのpaddingを設定 */
div {
    padding: 10px;
}

構文ルール２　個別指定：上下と左右に異なる値を設定

/* 上下に10px、左右に20pxのpaddingを設定 */
div {
    padding: 10px 20px;
}

構文ルール３　個別指定：上、右左、下に異なる値を設定

/* 上に10px、右左に15px、下に20pxのpaddingを設定 */
div {
    padding: 10px 15px 20px;
}

構文ルール４　個別指定：上、右、下、左に異なる値を設定

/* 上に10px、右に15px、下に20px、左に25pxのpaddingを設定 */
div {
    padding: 10px 15px 20px 25px;
}

構文ルール５　特定の面だけを指定：上、右、下、左の特定の面だけを指定する

/* 上面にのみ10pxのpaddingを設定 */
div {
    padding-top: 10px;
}
/* 右面にのみ20pxのpaddingを設定 */
div {
    padding-right: 20px;
}
/* 下面にのみ30pxのpaddingを設定 */
div {
    padding-bottom: 30px;
}
/* 左面にのみ40pxのpaddingを設定 */
div {
    padding-left: 40px;
}

以上が基本的なpaddingの使い方。paddingの値にはピクセル(px)以外にも、emや%などの単位も使用可能で、どの単位を使用するかは、デザインの要件やレイアウトの柔軟性を鑑みて決定します。

実際に、以下のコードをブラウザで表示し、paddingの違いによって見え方がどのように変わるのかをお見せいたします。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1 {
            padding: 10px;
            border: 1px solid black;
        }

        .box2 {
            padding: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">これはボックス1です</div>
    <div class="box2">これはボックス2です</div>
</body>
</html>

参考　HTMLの書き方 / styleタグ / divタグ

ブラウザで↑のHTMLファイルを開いた結果がこちら。

padding
図5：padding

.box1と.box2の両クラスでは、paddingの値が異なります。.box1では10ピクセル、.box2では50ピクセルが指定されています。

この結果、<div class="box1">の内部のスペース（コンテンツとボーダーとの間）は10ピクセルになり、<div class="box2">の内部のスペースは50ピクセルになります。つまり、コンテンツとボーダーとの距離が広がるほど、ボックス内のテキストはボーダーから離れることになります。

以上の例から、paddingは要素の内部スペースを制御し、要素内のコンテンツがどれだけボーダーから離れるかを定義することがわかります。適切なpaddingを設定することで、ウェブページの見た目や可読性を向上させることが可能です。

CSS：margin

marginは要素の外側のスペースを制御するプロパティです。以下にその基本的な使い方と構文を示します。

構文ルール１　一括指定：すべての面（上下左右）に同じ値を設定

/* 全ての面に10pxのmarginを設定 */
div {
    margin: 10px;
}

構文ルール２　個別指定：上下と左右に異なる値を設定

/* 上下に10px、左右に20pxのmarginを設定 */
div {
    margin: 10px 20px;
}

構文ルール３　個別指定：上、右左、下に異なる値を設定

/* 上に10px、右左に15px、下に20pxのmarginを設定 */
div {
    margin: 10px 15px 20px;
}

構文ルール４　個別指定：上、右、下、左に異なる値を設定

/* 上に10px、右に15px、下に20px、左に25pxのmarginを設定 */
div {
    margin: 10px 15px 20px 25px;
}

構文ルール５　特定の面だけを指定：上、右、下、左の特定の面だけを指定する

/* 上面にのみ10pxのmarginを設定 */
div {
    margin-top: 10px;
}
/* 右面にのみ20pxのmarginを設定 */
div {
    margin-right: 20px;
}
/* 下面にのみ30pxのmarginを設定 */
div {
    margin-bottom: 30px;
}
/* 左面にのみ40pxのmarginを設定 */
div {
    margin-left: 40px;
}

同様に、maginを利用したサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1 {
            margin: 10px;
            border: 1px solid black;
        }

        .box2 {
            margin: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">これはボックス1です</div>
    <div class="box2">これはボックス2です</div>
</body>
</html>

↓上記のHTMLファイルをブラウザで表示した結果がこちら。

margin
図5：margin

<div class="box1">の外側のスペース（要素とその周囲の要素との間）は10ピクセル。<div class="box2">の外側のスペースは50ピクセルになります。つまり、要素とその周囲の要素との距離が広がるほど、ボックスはその周囲の要素から離れることになります。

以上の例から、marginは要素の外側のスペースを制御し、要素とその周囲の要素との間の距離を定義することがわかります。

paddingとmarginの使い分け

paddingとmarginの使い分けをご説明します。

本文前半で説明した通り、両者の違いは↓の通り。

paddingとmarginの違い
  • padding　　⇒　　内側の余白を示す
  • margin　　 ⇒　　外側の余白を示す
CSS/paddingとmagirn
図2：CSS/paddingとmagirn

それぞれのプロパティがどのように影響するかを改めてサンプルコードを用いて確認してみます。

初心者にとっては少し複雑に見えるかもしれませんが、

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            margin: auto;
            border: 2px solid black;
            background-color: lightblue;  /* コンテナの背景色をlightblueに設定 */
        }

        .box {
            border: 2px solid black;
        }

        .box1 {
            margin: 20px;
            padding: 20px;
            background-color: yellow;  /* ボックス1の背景色を黄色に設定 */
        }

        .box2 {
            margin: 40px;
            padding: 40px;
            background-color: orange;  /* ボックス2の背景色をオレンジに設定 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">これはボックス1です。marginとpaddingが20pxです。</div>
        <div class="box box2">これはボックス2です。marginとpaddingが40pxです。</div>
    </div>
</body>
</html>
図7：paddingとmargin

↑では、2つのボックス（box1とbox2）を含むコンテナを作成しました。ボックス1とボックス2はそれぞれ異なるmarginとpaddingを持っています。

ボックスの背景色はそのボックスのpadding領域を含んでいます。したがって、背景色の範囲がpadding領域を視覚化しています。また、ボックス間の空白スペースはmarginを視覚化しています。コンテナの背景色（lightblue）が見えている部分は、ボックスのmargin領域です。

paddingとmarginのまとめ

paddingとmarginの違い
  • padding　　⇒　　内側の余白を示す
  • margin　　 ⇒　　外側の余白を示す
CSS/paddingとmagirn
図2：CSS/paddingとmagirn
.box {
    padding: 10px 20px 30px 40px;  /* 上、右、下、左の順に値を指定 */
    margin: 50px 60px 70px 80px;   /* 上、右、下、左の順に値を指定 */
}

.box {
    padding: 10px 20px;  /* 上下に10px、左右に20pxを適用 */
    margin: 30px 40px;   /* 上下に30px、左右に40pxを適用 */
}

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか？今すぐ行動したい方は以下の記事をチェック！

【無料】プログラミングスクールの探し方 >

読者料典　【無料】ゼロから学ぶHTML/CSS/JavaScript入門　←こちらから！

]]> Bootstrapの導入方法（読み込み）をわかりやすく３分で解説 https://it-biz.online/web-design/bootstrap-intro/ Fri, 14 Jul 2023 07:13:37 +0000 https://it-biz.online/?p=8201 Web開発のデザイン効率を飛躍的に向上させるBootstrapですが、実際にBootstrapを導入・利用開始する方法として主に2つの手段が存在します。（①ダウンロード方式・②CDN方式）

どちらの方法もBootstrapをあなたのプロジェクトに導入するための有効な手段です。

参考　Bootstrapとは？

このページでは、これら2つの導入方法を一緒に詳しく解説。各手法のステップバイステップのガイドラインだけでなく、それぞれの方法が持つメリットとデメリットについても詳しくご説明します。また、Bootstrapを適用する際のHTMLテンプレートの基本構造についても触れていきます。

このページで学べる内容
  • Bootstrapのセットアップ
    • ダウンロード方法
    • CDNの利用方法
  • HTMLテンプレートの基本構造

この記事を読むことで、Bootstrapの導入からHTMLテンプレート構造の理解まで、Bootstrapを活用するための第一歩を踏み出せるはず。是非最後までご覧ください。

Bootstrapの導入：ダウンロード方法

早速、Bootstrapを導入する１つ目の「ダウンロードして利用する方法」について解説します。

プロジェクトにBootstrapを導入する方法の一つとして、Bootstrapの公式ウェブサイトから直接ファイルをダウンロードし、プロジェクトに追加する方法があります。

この方法は、特定のネットワーク環境下では後述するCDN方式よりも安定性があるというメリットがあります。具体的な手順を見ていきましょう。

ステップ１：Bootstrapのダウンロード

まずは、Bootstrapの公式ウェブサイト https://getbootstrap.com を開きます。

Bootstrapのホームページ
図1：Bootstrapのホームページ

ホームページにアクセスしたら「Download」ボタンをクリック。

ダウンロードページに移動したら、「Compiled CSS and JS」の「Download」ボタンをクリックします。BootstrapのZIPファイルがダウンロードされます。

Bootstrap ダウンロード
図2：Bootstrap ダウンロード

ステップ２：ダウンロードしたファイルの解凍

ダウンロードしたZIPファイルを解凍します。解凍すると、「CSS」フォルダと「JS」フォルダが含まれています。

図3：CSSフォルダ/JSフォルダ

ステップ３：Bootstrapの配置

あなたのプロジェクトフォルダ内に「bootstrap.min.css」「bootstrap.min.css.map」「bootstrap.min.js」「bootstrap.min.js.map」をコピーします。これらのファイルは、それぞれ解凍した「CSS」フォルダと「JS」フォルダ内にあります。

このフォルダ（ディレクトリ）構成は、あなたが利用しているシステムによって異なります。もし、今はローカル環境で開発を進めているのであれば、ローカルPC上の任意の場所に配置しておけば問題ありません。

ステップ４：HTMLファイルでBootstrapを読み込む

最後に、HTMLファイルでこれらのCSSとJSファイルを読み込みます。やり方がわからない人のために、詳細なコーディング方法を以下２つの記事でそれぞれご説明しております。

参考　HTMLでCSSを読み込む方法 / HTMLでJavaScriptを読み込む方法

下記の例で「path/to/」とある部分は、あなたがBootstrapのファイルを置いた場所に置き換えてください。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="path/to/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JS -->
    <script src="path/to/bootstrap.min.js"></script>
  </body>
</html>

以上がBootstrapのダウンロードと設定の基本的な手順です。この方法を使えば、あなたのプロジェクトは常にBootstrapの最新版を使用することが可能になります。次のセクションでは、BootstrapをCDNから利用する方法について見ていきましょう。

Bootstrapの導入：CDNの利用方法

Bootstrapをプロジェクトに導入するもう１つの方法は、CDN（Content Delivery Network）を利用する方法です。

CDNは、全世界のサーバネットワークを利用してコンテンツを配信するシステムで、Bootstrapのような静的ファイルを迅速に読み込むのに適しています。この方法の利点は、手軽に導入できることと、常に最新のBootstrapを使用できることです。

具体的な手順を見ていきましょう。

ステップ１：BootstrapのCDNリンクを取得

Bootstrapの公式ウェブサイト https://getbootstrap.com を開き、「Get started」ボタンをクリックします。次に表示されるページに、BootstrapのCSSとJavaScriptのCDNリンクが記載されています。

Bootstrap CDNリンク
図5：Bootstrap CDNリンク

ステップ２：HTMLファイルでBootstrapのCDNリンクを読み込む

取得したCDNリンクをHTMLファイルで読み込みます。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

上記の例では、<head>タグ内にBootstrapのCSSリンクを配置し、<body>タグの終わり近くにBootstrapのJavaScriptリンクを配置しています。これにより、ページの読み込み速度を向上させることができます。

以上がBootstrapをCDNから利用する基本的な手順です。

簡単な手順でBootstrapをプロジェクトに導入でき、さらにはユーザーに対して最速の配信速度を提供できるのが、CDNの利用方法の大きな魅力です。

Bootstrapの導入方法：ダウンロード方式とCDN方式の比較

Bootstrapを導入する方法は、ダウンロード方式とCDN方式の2つが主流です。それぞれの特性とメリット、デメリットを理解することで、あなたのプロジェクトに最適な方法を選ぶことができます。以下に、それぞれの特性を表にまとめました。

導入方法概要メリットデメリット
ダウンロード方式Bootstrapの公式ウェブサイトからファイルを直接ダウンロードし、プロジェクトに追加。インターネット接続が不安定な環境でも動作し、オフラインでの開発が可能。Bootstrapのバージョンを自由に選べる。プロジェクトにBootstrapのファイルを直接含めるため、ファイルサイズが増える。最新のバージョンを利用するには手動で更新する必要がある。
CDN方式全世界のサーバネットワークを利用してBootstrapのファイルを配信する方式。HTMLファイルで直接CDNのリンクを指定する。導入が手軽で、常に最新のバージョンを使用することができる。サーバとの通信が早いため、ファイルの読み込み速度が向上する。インターネット接続が必要で、接続が不安定な環境では動作が不安定になる可能性がある。

どちらの方法を選ぶべきかは、あなたのプロジェクトの状況とニーズによります。

例えば、あなたがオフライン環境で開発を進める必要がある場合や、特定のバージョンのBootstrapを使用したい場合には、ダウンロード方式が適しています。一方、導入の手軽さや最新のバージョンを常に使用したい、読み込み速度を優先したい場合には、CDN方式が適しています。

それぞれのメリットとデメリットを理解した上で、プロジェクトに最適なBootstrapの導入方法を選んでください。

次のセクションでは、Bootstrapを適用する際のHTMLテンプレートの基本構造についてご説明します。

HTMLテンプレートの基本構造

Bootstrapを効果的に活用するためには、HTMLテンプレートの基本的な構造を理解することが重要です。

参考　HTMLの基本構造・書き方

以下に、Bootstrapを適用する際のHTMLテンプレートの基本構造を示します。

<!doctype html>
<html lang="en">
  <head>
    <!-- 必須のmetaタグ -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="path/to/bootstrap.min.css" rel="stylesheet">

    <title>ページタイトル</title>
  </head>
  <body>
    <!-- ここにコンテンツを記述 -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="path/to/bootstrap.min.js"></script>
  </body>
</html>

このテンプレートのBootstrapに特化して注意すべきポイントは以下の通りです。

  • <head>タグ： ページに関するメタ情報やCSSへのリンク、スクリプトなどを含む部分。この中にBootstrapのCSSをリンクします。
  • <body>タグ： ページの主要なコンテンツを含む部分。この中の<body>タグの終了タグの前にBootstrapのJavaScriptファイルと、依存するJavaScriptライブラリ（jQueryとPopper.js）をリンクします。

上記のテンプレート構造を理解し、自身のプロジェクトに適用できるようにしましょう。

これがBootstrapを用いたWeb開発の第一歩となります。

Bootstrap 導入のまとめ

本記事では、Bootstrapの導入方法とHTMLテンプレートの基本構造について解説しました。重要なポイントを以下にまとめます。

  • Bootstrapの導入には、ダウンロード方式とCDN方式の2つが存在する。
  • ダウンロード方式は、オフラインでの開発が可能で、バージョンを自由に選べるものの、ファイルサイズが増えるデメリットがある。
  • CDN方式は、導入が手軽で常に最新のバージョンを使用できるが、インターネット接続が必要であり、接続が不安定な場合には不適。
  • HTMLテンプレートの基本構造を理解することで、Bootstrapの活用がスムーズになる。
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Webデザインを勉強するのって結構難しいですよね。

でもその悩みを抱えているのは一人じゃありません。全てのWebデザイナーが同じ道を進んできました。

HTMLやCSS・JavaScriptをはじめとするプログラミングスキルを武器に、時間と場所に捉われない自由な生き方を目指してみませんか？今すぐ行動したい方は以下の記事をチェック！

【無料】プログラミングスクールの探し方 >

読者料典　【無料】ゼロから学ぶHTML/CSS/JavaScript入門　←こちらから！

]]> 【HTML】id属性/class属性の違い・使い分けを３分でわかりやすく解説 https://it-biz.online/web-design/id-class/ Mon, 22 Jun 2020 12:00:00 +0000 https://it-biz.online/?p=2785 id属性とclass属性は、HTML要素に識別子やスタイルを適用するために使用される属性です。

参考　属性とは？

id属性とclass属性は、どちらもHTMLのタグに名前をつける役割を担います。class属性は、１つのページ内で1だけ利用できるのに対して、id属性は何度でも利用できるなど、両者は様々な点で役割が微妙に異なります。

id属性,class属性
図1：id属性とclass属性
id属性とclass属性
  • id属性
    HTML要素に一意な識別子を付与するために使用され、ページ内で一度だけ使用できる。主にJavaScriptで要素を操作する際やアンカーリンクの作成に利用される。
  • class属性
    HTML要素に共通のスタイルや振る舞いを適用するために使用され、複数の要素に同じclass名を設定することができる。主にCSSでスタイルを適用する際に利用される。
id属性class属性
説明要素を一意に識別するための属性要素にスタイルを適用するための属性
一意性1つのページ内で一意である必要がある（同じidを持つ要素は1つまで）1つのページ内で複数の要素に同じクラス名を設定できる
複数設定1つの要素に1つのid属性のみ設定できる1つの要素に複数のclass属性を設定できる
CSS適用特定の要素に対して独自のスタイルを適用する場合に使用同じスタイルを複数の要素に適用する場合に使用
JavaScriptでの利用要素を一意に識別して操作するために使用一般的にはid属性がJavaScriptでの操作に使用されることが多いが、class属性も利用可能
CSSセレクタ#id形式で指定.class形式で指定

このページでは、id属性・class属性それぞれの役割と意味・両者の違いと使い分けとコツを解説します。

このページで学べる内容
  • id属性・class属性とは？
  • id属性とclass属性の違い
  • id属性とclass属性の使い分け

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

id属性/class属性とは？

id属性/class属性は、どちらもHTMLの要素に名前を付与する役割を持ちます。

class属性を用いた命名

<div class=”class name“>
・・・・・
</div>

id属性を用いた命名

<div id=”id name“>
・・・・・
</div>

id属性・class属性を利用し指定した要素に名称を付けることで、例えば「class A」という名前を付けられた要素には赤く色を付ける！というような形でCSSを適用（セレクタ）したり、JavaScriptから呼び出したりすることができます。

参考　CSSとは？

図2：id属性/class属性の役割

参考　セレクタとは？

id属性とclass属性の違いと使い分け

id属性・class属性のどちらもHTML要素に名前をつける役割を担いますが、id属性は一意の識別子（生徒名）を付与する役割を担い、class属性は共通のスタイルや振る舞い（クラス名）を適用する役割を担っているという点で違いがあります。

id属性,class属性
再掲：id属性とclass属性
  • id属性: 生徒名
    生徒名は、学校内で一人一人を一意に識別するための名前です。同じ名前の生徒は存在しないため、特定の生徒を探す際に生徒名を使用することができます。
  • class属性: クラス名
    クラス名は、学校内で複数の生徒が所属するグループの名前です。同じクラスに所属する生徒は、共通のスケジュールやルールに従います。クラス名を使用して、複数の生徒に対して一度に情報や指示を伝えることができます。

何となくイメージがついたら実際にサンプルコードを見て学習していきましょう。

See the Pen id/class by ビズドットオンライン (@biz-online) on CodePen.

このサンプルコードでは、成績優秀者の成績を赤く太字で表示するために、class属性を使用しています。このように、class属性を利用することで、複数の要素に共通のスタイルを適用できます。

逆に各生徒の名前には、id属性を使って一意な識別子を付与しています。これにより、JavaScriptなどで特定の生徒を操作する際に、id属性を利用して対象の要素を特定できます。

上記サンプルのボタンをクリックすると、changeColor関数が実行されます。changeColor関数は、id属性を使って特定の要素（山田太郎）を取得し、その要素の文字色を青に変更しています。

ご自身のブラウザで動作の違いを確認してみたい方は、以下のHTMLをご利用ください。

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
  <script>
    function changeColor() {
      // id属性を使って特定の要素を取得
      var student1 = document.getElementById("student1");
      
      // 要素のスタイルを変更
      student1.style.color = "blue";
    }
  </script>
</head>
<body>

<h2>クラスの成績一覧</h2>

<p class="highlight">赤文字で表示される生徒は成績優秀者です。</p>

<table>
  <tr>
    <th>生徒名</th>
    <th>成績</th>
  </tr>
  <tr>
    <td id="student1">山田太郎</td>
    <td class="highlight">A+</td>
  </tr>
  <tr>
    <td id="student2">鈴木花子</td>
    <td>B</td>
  </tr>
  <tr>
    <td id="student3">佐藤健太</td>
    <td class="highlight">A</td>
  </tr>
</table>

<button onclick="changeColor()">山田太郎の名前を青色に変更</button>

</body>
</html>
id属性はCSSではあまり利用しない

id属性はCSSで利用することができますが、一般的にはclass属性がより頻繁に使用されます。

これは、id属性が一意な識別子であるため、同じidを持つ要素はページ内に1つしか存在できないため、id属性を使用してスタイルを適用すると、そのスタイルは特定の要素にしか適用することができないためです。

一方、class属性は複数の要素に同じクラス名を設定することができるため、同じスタイルを複数の要素に適用する際に便利です。また、class属性は複数のクラス名を1つの要素に設定することができます。これにより、異なるスタイルを組み合わせて適用することが容易になります。

ただし、id属性をCSSで利用することに問題はありません。特定の要素に対して、独自のスタイルを適用する必要がある場合や、その要素に対するスタイルを強調する目的でid属性を使用することがあります。ただ、このようなケースは比較的少ないため、実際のプロジェクトではclass属性がより一般的に使用されます。

id属性とclass属性の違い・使い分け

id属性class属性
説明要素を一意に識別するための属性要素にスタイルを適用するための属性
一意性1つのページ内で一意である必要がある（同じidを持つ要素は1つまで）1つのページ内で複数の要素に同じクラス名を設定できる
複数設定1つの要素に1つのid属性のみ設定できる1つの要素に複数のclass属性を設定できる
CSS適用特定の要素に対して独自のスタイルを適用する場合に使用同じスタイルを複数の要素に適用する場合に使用
JavaScriptでの利用要素を一意に識別して操作するために使用一般的にはid属性がJavaScriptでの操作に使用されることが多いが、class属性も利用可能
CSSセレクタ#id形式で指定.class形式で指定

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説
初心者向けのHTMLとCSSとJavaScriptの基本から応用までを分かりやすく解説。実践プロジェクトを通じて独力でホームページを作成できるようになります。今すぐ始めてウェブ開発の世界をマスターしましょう！
it-biz.online
2024.03.21
]]> 【HTML】インライン要素とブロック要素の違いを３分でわかりやすく解説 https://it-biz.online/web-design/inline-block/ Wed, 11 Dec 2019 12:00:00 +0000 https://it-biz.online/?p=2745 HTMLで使われるインライン要素とブロック要素という２つの用語と意味・注意点について解説していきます。

結論、インライン要素は行内の一部のまとまり、ブロック要素は独立したブロック（行全体のまとまえり）として配置されます。インライン要素は主に文章の一部を装飾するために使われ、ブロック要素はページの構造やレイアウトを定義するために使われます。

インライン要素とブロック要素の違い
図1：インライン要素とブロック要素の違い
インライン要素 vs ブロック要素
  • インライン要素
    →行の中の一部のまとまり（主に行内装飾のために利用される）
  • ブロック要素
    →行全体のまとまり

このページでは、インライン要素とブロック要素とは何か？どのような点で相違があるのか？という疑問をお持ちの方向けに１からわかりやすくサンプルコード付きで解説します。

このページで学べる内容
  • インライン要素とは？
  • ブロック要素とは？
  • インライン要素とブロック要素の違い
  • インライン要素とブロック要素の使い分け・コツ

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

HTML：インライン要素とは

インライン要素は、主に文章の一部を装飾したり、特定の部分に対してスタイルを適用するために使用されます。ざっくり説明すると、行の中の一部のまとまりです。

インライン要素とブロック要素の違い
再掲：インライン要素とブロック要素の違い

上記はHTMLファイルをブラウザで表示した結果です。

インライン要素が行の中の一部のまとまりであることが良くわかるかと思います。

以下が実際のHTMLファイルです。インライン要素の部分に注目して見てみましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インライン要素とブロック要素の違い（色付き）</title>
  <style>
    div, span {
      border: 1px solid black;
      padding: 5px;
    }
    .block {
      background-color: lightblue;
    }
    .inline {
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <h2>ブロック要素の例</h2>
  <div class="block">これはブロック要素です。div要素は独立した行で表示されます。</div>
  <div class="block">これもブロック要素です。新しいdiv要素は新しい行で表示されます。</div>

  <h2>インライン要素の例</h2>
  <p>これは<span class="inline">インライン要素</span>です。span要素は他のテキストと同じ行に表示されます。<span class="inline">これもインライン要素です。</span></p>
</body>
</html>

参考　HTMLの書き方：基本構造

インライン要素は、他の要素と同じ行に配置され、その要素の幅や高さを変更しません。つまり、インライン要素は周囲のテキストや要素の流れを崩さず、行の中で連続したまとまりとして扱われます。

上記のサンプルコードでは、ブロック要素（<div>タグ）にはlightblueの背景色を、インライン要素（<span>タグ）にはlightcoralの背景色を適用しています。

参考　divタグ / spanタグ

色別に表示することで、ブロック要素とインライン要素の違いがより視覚的にわかりやすくしてみました。

一般的に利用されるインライン要素には以下のようなものがあります。基本的には、主に装飾を木テクとして利用されるものがほとんどです。

要素説明
<a>リンクを表す要素。他のページやWebサイトへのリンクを作成する際に使用。
<span>スタイルを適用するための汎用的なインライン要素。特定の部分にスタイルを適用する場合に使用。
<strong>強調を表す要素。テキストを太字にする。
<em>斜体でテキストを強調する要素。
<u>下線を引くことでテキストを強調する要素。
<mark>ハイライト（背景色を付けること）でテキストを強調する要素。
<del>削除されたテキストを表す要素。テキストに取り消し線が引かれる。
<ins>追加されたテキストを表す要素。テキストに下線が引かれる。
<abbr>略語や頭字語を表す要素。マウスオーバー時に元の語を表示することができる。
<q>インラインの引用を表す要素。通常、引用符で囲まれて表示される。
<code>インラインのコードを表す要素。通常、等幅フォントで表示される。

ブロック要素（ブロックレベル要素）

ブロック要素はブロックレベル要素とも呼ばれ、ページの構造やレイアウトを定義するために使用されるHTMLの要素です。ざっくり説明すると、行全体のまとまりを作るのがブロック要素です。

インライン要素とブロック要素の違い
再掲：インライン要素とブロック要素の違い

インライン要素は、行の中の一部のまとまりでしたが、ブロック要素は行全体で１つのまとまりを作ります。

ブロック要素は、ページのレイアウトや構造を構築するために使用され、幅と高さを持ち、周囲の要素とは余白や境界線で区切られるのが基本。

これらの要素は、Webページ上で縦方向に積み重ねられることが多く、インライン要素（テキストレベル要素）とは異なり、一般的には他のブロックレベル要素やインライン要素を含むことができます。

図2:インライン要素 vs ブロック要素

もう一度HTMLファイルを確認しながら、ブロック要素の役割をしっかりと理解しておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インライン要素とブロック要素の違い（色付き）</title>
  <style>
    div, span {
      border: 1px solid black;
      padding: 5px;
    }
    .block {
      background-color: lightblue;
    }
    .inline {
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <h2>ブロック要素の例</h2>
  <div class="block">これはブロック要素です。div要素は独立した行で表示されます。</div>
  <div class="block">これもブロック要素です。新しいdiv要素は新しい行で表示されます。</div>

  <h2>インライン要素の例</h2>
  <p>これは<span class="inline">インライン要素</span>です。span要素は他のテキストと同じ行に表示されます。<span class="inline">これもインライン要素です。</span></p>
</body>
</html>

代表的なブロック要素

要素説明
<div>汎用的なブロック要素で、スタイルやグループ分けのために使用されます。
<p>段落を表す要素で、文章の一つのまとまりを示します。
<h1>〜<h6>見出しを表す要素で、<h1>が最も重要で大きく、<h6>が最も小さい見出しです。
<ul>点（マーカー）付きリストを表す要素で、<li>タグと組み合わせて使用します。
<ol>番号付きリストを表す要素で、<li>タグと組み合わせて使用します。
<blockquote>引用ブロックを表す要素で、他の文章や資料からの引用を示します。
<pre>整形済みテキストを表す要素で、主にコードや等幅フォントで表示されるテキストを扱います。
<table>テーブルを表す要素で、<tr>（行）、<td>（セル）などの要素と組み合わせて使用します。
<form>入力フォームを表す要素で、<input>や<select>などのフォーム部品と組み合わせて使用します。
<nav>ナビゲーションリンクを表す要素で、ウェブサイト内の主要なリンクを示します。
<section>セクションを表す要素で、ページ内の論理的な区分を示します。
<article>記事やブログ投稿などの独立したコンテンツを表す要素です。
<aside>付随情報を表す要素で、主要なコンテンツとは関連性が低い情報を示します。
<header>ページやセクションのヘッダーを表す要素です。
<footer>ページやセクションのフッターを表す要素です。

関連　セマンティックHTML

これらのブロック要素を使って、Webページのレイアウトや構造を作成することができます。ブロック要素は、一般的には他のブロック要素やインライン要素を含むことができ、ページの構造を作りやすくしています。

インライン要素とブロック要素の違いと使い分け

インライン要素とブロック要素は以下の５点で大きく異なります。

インライン要素とブロック要素の違い
  • ポイント１：配置と改行
  • ポイント２：幅と高さ
  • ポイント３：余白と境界線
  • ポイント４：要素の含有
  • ポイント５：目的と使用場面

この章が一番大事なポイントなので、一つずつサンプルコード付きで丁寧に解説しておきます。

配置と改行

図3：配置と改行
  • インライン要素: 文章の中に埋め込まれ、周囲のテキストと同じ行に配置されます。前後に改行が入りません。
  • ブロック要素: 独立したブロックとして配置され、通常は前後に改行が入ります。
<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-sample {
      background-color: lightblue;
    }

    .block-sample {
      background-color: lightcoral;
    }
  </style>
</head>
<body>

<p>これは<span class="inline-sample">&lt;span&gt; インライン要素</span>の例です。インライン要素は同じ行に配置されます。</p>

<div class="block-sample">&lt;div&gt; ブロック要素の例1</div>
<div class="block-sample">&lt;div&gt; ブロック要素の例2</div>

</body>
</html>

このサンプルコードでは、<span>タグを使ってインライン要素を表現し、<div>タグを使ってブロック要素を表現しています。

<span>タグで囲まれたインライン要素は、<p>タグ内のテキストと同じ行に配置されています。これに対して、<div>タグで囲まれたブロック要素は、それぞれ独立したブロックとして前後に改行が入り、縦方向に配置されています。

幅と高さ

図4：幅と高さ
  • インライン要素: 上下の余白と境界線は影響を与えませんが、左右の余白と境界線は影響を与えます。
  • ブロック要素: 上下左右すべての余白と境界線が影響を与えます。
<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-sample {
      background-color: lightblue;
      width: 100px;
      height: 100px;
    }

    .block-sample {
      background-color: lightcoral;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>

<p>これは<span class="inline-sample">&lt;span&gt; インライン要素</span>の例です。インライン要素では、幅と高さの指定が効果がありません。</p>

<div class="block-sample">&lt;div&gt; ブロック要素の例1</div>
<div class="block-sample">&lt;div&gt; ブロック要素の例2</div>

</body>
</html>

このサンプルコードでは、インライン要素(<span>)とブロック要素(<div>)の両方に、幅と高さを100pxに設定しました。

ブロック要素の<div>には、幅と高さの指定が適用されており、各要素が100px四方のサイズになっています。一方で、インライン要素の<span>には、幅と高さの指定が効果がありません。そのため、<span>要素のサイズはコンテンツに応じて決まります。

余白と境界線

図5：余白と境界線
  • インライン要素: 上下の余白と境界線は影響を与えませんが、左右の余白と境界線は影響を与えます。
  • ブロック要素: 上下左右すべての余白と境界線が影響を与えます。
<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-sample {
      background-color: lightblue;
      margin: 20px;
      padding: 10px;
      border: 3px solid black;
    }

    .block-sample {
      background-color: lightcoral;
      margin: 20px;
      padding: 10px;
      border: 3px solid black;
    }
  </style>
</head>
<body>

<p>これは<span class="inline-sample">&lt;span&gt; インライン要素</span>の例です。インライン要素では、上下の余白と境界線は影響を与えませんが、左右の余白と境界線は影響を与えます。</p>

<div class="block-sample">&lt;div&gt; ブロック要素の例1</div>
<div class="block-sample">&lt;div&gt; ブロック要素の例2</div>

</body>
</html>

このサンプルコードでは、インライン要素(<span>)とブロック要素(<div>)の両方に、余白（margin）、内側の余白（padding）、境界線（border）を設定しました。

ブロック要素の<div>には、上下左右すべての余白と境界線が影響を与えています。一方で、インライン要素の<span>には、上下の余白と境界線は影響を与えませんが、左右の余白と境界線は影響を与えています。

参考　ボックスモデルとは？

要素の含有

図６：要素の含有
  • インライン要素: 通常、テキストや他のインライン要素を含むことができますが、ブロック要素を含むことはできません。
  • ブロック要素: 他のインライン要素やブロック要素を含むことができます。
<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-sample {
      background-color: lightblue;
    }

    .block-sample {
      background-color: lightcoral;
    }
  </style>
</head>
<body>

<p>これは<span class="inline-sample">&lt;span&gt; インライン要素 <strong>他のインライン要素を含む</strong></span>の例です。インライン要素では、他のインライン要素を含むことができますが、ブロック要素を含むことはできません。</p>

<div class="block-sample">&lt;div&gt; ブロック要素の例1 <span>インライン要素も含めることができます</span></div>
<div class="block-sample">&lt;div&gt; ブロック要素の例2 <div>他のブロック要素も含めることができます</div></div>

</body>
</html>

このサンプルコードでは、インライン要素(<span>)が別のインライン要素(<strong>)を含んでいる例を示しています。インライン要素は他のインライン要素を含むことができますが、ブロック要素を含むことはできません。

一方で、ブロック要素の<div>は、他のインライン要素(<span>)やブロック要素(<div>)を含むことができます。この例から、インライン要素とブロック要素における要素の含有の違いが理解できるかと思います。

目的と使用場面

  • インライン要素: テキストの一部に対してスタイルやリンクなどの機能を適用する目的で使用されます。
  • ブロック要素: ページのレイアウトや構造を構築する目的で使用されます。

インライン要素は、文書の一部を装飾・強調するためや、特定の機能を付与するために使用されます。インライン要素は文章の中で利用されることが一般的です。

対して、ブロック要素は、ページの構造やレイアウトを構築するために使用されます。ブロック要素は、コンテンツの塊を表し、通常は他の要素とは独立して配置されます。

このページのまとめ
  • インライン要素
    行の一部を表し、同じ行に連続して配置され、主にテキストの一部を装飾・強調するために使用する。
  • ブロック要素
    行全体を占める要素で、ページの構造やレイアウトを構築するために使用する。
インライン要素とブロック要素の違い
再掲：インライン要素とブロック要素の違い

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説
初心者向けのHTMLとCSSとJavaScriptの基本から応用までを分かりやすく解説。実践プロジェクトを通じて独力でホームページを作成できるようになります。今すぐ始めてウェブ開発の世界をマスターしましょう！
it-biz.online
2024.03.21
]]> 【CSS】疑似要素とは？初心者向けにわかりやすく３分で解説 https://it-biz.online/web-design/pseudo-element/ Wed, 19 Apr 2023 07:19:17 +0000 https://it-biz.online/?p=7513 疑似要素（pseudo-element）は、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

参考　HTMLの要素とは？

例えば、::beforeや::afterなどの疑似要素を利用することで以下のように「HTMLを直接修正する必要なく」指定した要素の前後にテキストやアイコンを挿入することができます。

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

このページでは、HTML/CSS初心者向けに疑似要素とは何か？をわかりやすく１から解説します。

このページで学べる内容
  • 疑似要素とは？
  • 疑似要素の使い方・構文ルール
  • 代表的な疑似要素

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

疑似要素とは？

疑似要素（pseudo-element）は、CSSセレクタで使用される擬似クラス（pseudo-class）の一種で、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

参考　疑似クラスとは？

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

詳しく説明すると、以下の sample クラスに対して

<div class="sample">Hello, world!</div>

疑似要素「::before」「::after」が利用されることで、”Hello, world!” という文字列の前後にテキストコンテンツが追加される仕組み。

.sample::before {
  content: 'Before ';
  color: red;
}

.sample::after {
  content: ' After';
  color: blue;
}

このように、ある特定の要素の部分を指し示すのが疑似要素のポイントです。

参考　divタグ

疑似要素と疑似クラスの違い
疑似要素 vs 疑似クラス
  • 疑似クラス
    要素の状態に基づいてスタイルを適用する
  • 疑似要素
    要素の特定の部分に対してスタイルを適用する

疑似クラスは、要素の状態に基づいてスタイルを適用するために使用されます。例えば、:hoverは要素がマウスオーバーされたときにスタイルを適用するために使用されます。

一方、疑似要素は、要素の特定の部分に対してスタイルを適用するために使用されます。例えば、::beforeや::afterは、要素の前後にテキストやアイコンを追加するために使用されます。

参考　疑似クラスとは？

ここまでの説明だけではまだよくわからない・・・！という方も他の疑似要素を見ていくことで徐々にイメージが湧くはずです。

ここからは実際に利用される代表的な疑似要素と、そのサンプルコードを解説します。

代表的な疑似要素

以下がよく利用される代表的な疑似要素です。利用頻度としては::beforeや::afterが圧倒的ですが、その他の疑似要素についても知っておくと便利です。

疑似要素説明
::before要素の開始タグの前にコンテンツを挿入するために使用される。
::after要素の終了タグの後にコンテンツを挿入するために使用される。
::first-letterブロックレベル要素の最初の文字にスタイルを適用するために使用される。
::first-line要素の最初の行にスタイルを適用するために使用される。
::selectionテキストが選択されたときにスタイルを適用するために使用される。
::placeholderフォームの入力欄にプレースホルダーテキストを表示するために使用される。
::markerリストのマーカー（箇条書きの数字や記号など）にスタイルを適用するために使用される。
::backdropdialog要素などの背景にスタイルを適用するために使用される。::backdropはbody要素よりも上位の階層に配置される。

実際に上記の疑似要素を利用したサンプルコードがこちらです。

サンプルコード

See the Pen 疑似要素② by ビズドットオンライン (@biz-online) on CodePen.

このサンプルコードでは、各疑似要素を使って以下のようなスタイルを適用しています。

  • ::before: テキストの前にアイコンを表示する。
  • ::after: ボタンの後ろに矢印を表示する。
  • ::first-letter: テキストの最初の文字に赤い大きなフォントを適用する。
  • ::first-line: テキストの最初の行に太字のスタイルを適用する。
  • ::selection: テキストが選択されたときに、背景色を黄色に変更する。
  • ::placeholder: フォームの入力欄にプレースホルダーテキストをグレーの斜体で表示する。
  • ::marker: リストのマーカー（リストの数字や記号）に青く太字のスタイルを適用する。
  • ::backdrop: dialog要素の背景を半透明の黒に設定する。

これらの疑似要素を使うことで、HTML要素の特定の部分にスタイルを適用できます。疑似要素は、WebサイトやWebアプリケーションのデザインに役立つ強力なツールです。

疑似要素のまとめ
  • 疑似要素: CSSで使用される、ページ要素の特定部分にスタイルを適用する仮想的な要素。
  • ::before, ::after: 疑似要素の例で、要素の前後にコンテンツを追加する。
  • 装飾・デザイン効果: 疑似要素を使って、要素の構造を変更せずにスタイルを調整。

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

【無料】ゼロから学ぶHTML/CSS/JavaScript入門：50記事で完全解説
初心者向けのHTMLとCSSとJavaScriptの基本から応用までを分かりやすく解説。実践プロジェクトを通じて独力でホームページを作成できるようになります。今すぐ始めてウェブ開発の世界をマスターしましょう！
it-biz.online
2024.03.21
]]>