TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 枠線などを指定したい！CSSのborderの使い方【初心者向け】
オーダーメイドコース
icon
icon
CSS

枠線などを指定したい！CSSのborderの使い方【初心者向け】

初心者向けにCSSで書くborder（ボーダー）プロパティの使い方に関する解説記事です。borderは、枠線・境界線を作る時などWebデザインをする上で業務でも必要な知識になるので、ぜひ自分でも使えるようにしておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ使えるようにしておきましょう。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

田島悠介

今回はborderについて学習するよ。

大石ゆかり

田島メンター！！borderは何を指定するプロパティなんですか〜？

田島悠介

ボックスに枠線を付けたり、その種類を指定するときに使うものなんだ。まずは書き方を確認するよ。

大石ゆかり

はい！

目次

 

borderとは

borderとは、HTML要素の枠線の部分のことです。

最近のブラウザは、デフォルトでborderが非表示になっていることが多いため、いざ枠線つきのテーブルやdiv領域を描く時に戸惑う方も多いと思います。

borderプロパティを使うことで、以下のようにHTML要素の見た目を変更することができます。

[PR] Webデザインで副業する方法とは

borderを使いこなす

今回は、borderプロパティの実践的な設定方法を5点ご紹介します。

1.solid指定により、borderを「見える化」する

border: solid;

2.borderの太さを指定する

border: 4px solid;

3.borderの色を変更する

border: solid;
border-color: #031de2;

4.矩形（四角形）の角を丸くする

border: solid;
border-radius: 8px; /* 半径が8pxの角丸 */

5.矩形の１辺だけ、線を見えなくする

border: solid;
border-bottom: transparent; /* 下辺が透明になる */

ご自身でCSS設定を試してみましょう！

 

田島悠介

borderで設定できることの一覧だよ。

大石ゆかり

線をつけるかつけないか、線の種類や太さ、線の色というように一通りの指定ができるんですね。

田島悠介

次は実際にborderを使って、画面でどのように表示されるか見てみよう。

 

borderを使った実践的なサンプル

さらに実践的なborderの使い方をご紹介します。今回は、HTMLとCSSだけでタブつきの表示エリアを描画してみましょう。

完成イメージは、この通りです。

実際のHTMLとCSSのコードをご紹介します。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <div class="disp-area">
      <div id="smallArea">
        <span>Tab</span>
      </div>
      <div id="largeArea">
        <span>Hello TechAcademy!!</span>
      </div>
    </div>
  </body>
</html>

CSS

/* タブエリアのdivへの適用 */
#smallArea {
  /* 基本的なサイズの設定 */
  background-color: #bbedce;
  width: 80px;
  height: 26px;
  padding-top: 4px;
 
  /* borderに関する設定 */
  border: 1px solid; /* 線の太さと可視化 */
  border-bottom: transparent; /* 下辺を透明に */
  border-top-left-radius: 8px; /* 左上を角丸に */
  border-top-right-radius: 8px; /* 右上を角丸に */
 
  /* メイン表示エリアの線の太さだけ下にずらす */
  margin-bottom: -1px;
 
  /* その他の設定 */
  position: relative;
  text-align: center;
}

/* メイン表示エリアのdivへの適用 */
#largeArea {
  /* 基本的なサイズの設定 */
  background-color: #fff;
  width: 200px;
  height: 40px;
  padding: 20px;
 
  /* 枠線を太さ1pxで表示 */
  border: 1px solid;
}

/* コンテンツを見やすく表示 */
.disp-area {
  margin-top: 20px;
  margin-left: 20px;
}

borderプロパティを使いこなすことで、このようなタブつきの表示エリアを描けるようになります。

執筆してくれたメンター

寺谷文宏 (Teratani Fumihiro)

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、
フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

田島悠介

線の色や種類、太さを変えて表示してみたよ。

大石ゆかり

画面を見ると、それぞれの指定が合わせて適用されているのが分かりますね。

田島悠介

ここで注意したいのが、borderの幅というのは領域のwidthやheightの中ではなく外に配置されていることだね。これについてはbox-sizingというプロパティに関係してくるのでそちらも合わせて勉強しておこう。

大石ゆかり

box-sizingについても調べておきます。ありがとうございました！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

転職・在宅ワークにも繋がる！Web制作の副業の仕事内容と収入を徹底解説

皆さんは本業の収入やお仕事に満足していますか？ 「転職するほど不満があるわけではないけど将来を考えた時にこのままで良いか、なんとなく不安」という方が多いのでは...
ピックアップ

CSSでURLを指定する方法を現役デザイナーが解説【初心者向け】

ここでは、CSSで背景画像などを指定する際に使用するURLの指定方法について記載します。 CSSについてそもそもよく分からないという方は、CSSの書き方に...
CSS

三角ジェネレータを応用してCSSで矢印を作る方法を現役エンジニアが解説【初心者向け】

三角ジェネレータを応用してCSSで矢印を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでかわいいデザインのボタン10選を現役エンジニアが紹介【初心者向け】

CSSでかわいいデザインのボタン10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお...
CSS

CSSのflexで内容に合わせて高さを変える方法【初心者向け】

CSSのflexで内容に合わせて高さを変える方法について解説します。flexboxではデフォルトで高さが揃った状態で表示されますが、内容に応じて表示するようにし...
CSS

あわせてよく読まれている記事

実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】

CSSでLINEのような吹き出しを作る方法について解説しています。 実際にソースコードを書いて説明しているので、書きながら実践的に理解していきましょう。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   大石ゆかり 田島メンター！！メニューの横に吹き出しのような三角を付けたいのですが、どうすればいいですか〜？ 田島悠介 それでは今回はbeforeとafterの疑似要素を使って、画面に吹き出しの形を作成する例を紹介しよう。 大石ゆかり beforeとafterは、要素の直前や直後に何かを入れるものでしたね。 田島悠介 そうだね。吹き出しの三角形部分を作るのにはいくつかの手順があるんだ。ひとつ例を見てみよう。   最初に実行結果をお見せします。   吹き出しの書き方 左向きの吹き出しを例に書き方をみていきます。まず、吹き出しの枠を作ります。 html部分 ------------------------------------------ <div class="balloon-left"> 左だよ </div> ------------------------------------------ css部分 ------------------------------------------ .balloon-left { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 34px; text-align: center; background: #44FF44; border: 3px solid #000000; z-index: 0; } ------------------------------------------   次に、:beforeで、吹き出しの尖った部分を作ります。 html部分 ------------------------------------------ <div> 左だよ </div> ------------------------------------------ css部分 ------------------------------------------ .balloon-left { position: relative; display: inline-block; padding: 0 15px;
CSS

HTML+CSSのfontプロパティで文字の太さを指定する方法を現役デザイナーが解説【初心者向け】

HTML+CSSで文字の太さを指定する方法について解説します。これができるようになると、サイト制作でメリハリのあるページをつくることができるようになります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 文字の太さを指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSで太さを変更する方法と注意点 CSSで文字の太さを指定するには font-weight プロパティまたは font プロパティを指定します。font プロパティは、 font-styleｍ font-variant font-weight font-size line-height font-family を一括指定できます。 font-weight プロパティの指定方法は以下のとおりです。 font-weight: キーワード font-weight: 数値 キーワードには以下を指定できます。 normal ：通常の太さです。数値指定の400と同じです bold ：太字です。数値指定の700と同じです lighter ：親要素よりも1段階細くします bolder ：親要素よりも1段階太くします 数値には100～900の値を指定可能です(新しい規格では1～1000までの任意の値に対応)。ただしほとんどのフォントは通常と太字の2種類の太さしか持っていないため、細かな太さの指定には対応していない点に注意が必要です。 font や font-weight プロパティについて、詳しくは以下も参考にしてください。 MDN font MDN font-weight   CSSで太さを細かく指定する方法 font や font-weight プロパティで指定する方法の他に、text-shadow プロパティを使って擬似的にフォントを太く表現することができます。text-shadow プロパティは文字の影(シャドー)を指定します。 text-shadow: 水平方向 垂直方向 影の大きさ 色 text-shadow プロパティについて、詳しくは以下も参考にしてください。 MDN text-shadow 関連記事：文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】 [PR] Webデザインで副業する方法とは実際に太さを変えてブラウザで見てみよう 今回のサンプルプログラムでは、font-weight 及び text-shadow プロパティを使って文字の太さを変更しています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> .font_normal { font-weight: normal; } .font_bold
CSS

画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説

今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自分で書けるようになっておくと見た目の調整がしやすいでしょう。 様々な形の矢印の作り方を紹介しているので、ぜひ参考にしてみてください。 目次 CSSで作る矢印アイコンの書き方 三角の矢印の作り方 「く」の字型矢印の作り方 上向き矢印の作り方 オーソドックスな大きな矢印の作り方 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   CSSで作る矢印アイコンの書き方 CSSで作る矢印アイコンについて説明します。 画像は使わずにCSSだけを使って矢印を作成することができるので参考にしてみてください。 また、CSSのスキルアップにも使えるので、CSSのスキルアップを目指している方は、ぜひオリジナルの矢印を作ってみましょう。   まずは、簡単に矢印の書き方を紹介する上で、左上から右下へのL字矢印を作ってみようと思います。 直角に曲がる矢印になります。 HTML <!DOCTYPE html> <html> 　　<head> <meta charset="utf-8"> 　　　　<title>CSS arrow</title> 　　　　<link rel="stylesheet" type="text/css" href="sample.css"> 　　<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 　　</head> 　　<body> 　　<div class="arrow"></div> 　　</body> </html>   CSS .arrow{ position: relative; width: 200px; height: 50px; border-top: 8px solid #5bc0de; border-right: 8px solid #5bc0de; box-sizing: border-box; } .arrow::after{ content: ""; position: absolute; bottom: -14px; right: -17px; border-top: 14px solid #5bc0de;
CSS

表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】現役Webデザイナーが解説

この記事ではHTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介します。 HTMLでテーブルを表示する方法を学習していただくことで、HTMLを利用してエクセルのような表を作れるようになります。 表を利用できるようになると、今まで文章だけで記載していたコンテンツを、わかりやすく一覧できるコンテンツにすることが可能です。 一覧で、コンテンツの要点だけを伝えたい場合や、数字を扱うコンテンツの場合に、表を使ってわかりやすい表示を作ってみましょう。 目次 テーブル（表とは） HTMLでテーブルを表示するために使うタグ テーブルを実際に作ってみよう 応用編：テーブルの構造をまとめる テーブルのデザインを変更する方法 表をスマホ対応で表示する方法   テーブル（表とは） まずはテーブル（表）の基礎を知っておきましょう。 HTMLでも表をつくることができます。 表はテーブルと呼ばれます。   横一列のデータのことを「行（レコード）」といい、ひとつのデータの塊を意味します。 縦一列のデータを「列（カラム）」、ひとつひとつのマスのことを「セル」と呼び、セルの中に各データの値を入れていきます。 「行（レコード）・列（カラム）・セル」は、Excelやデータベースでデータを管理するSQLでも共通している概念ですのでぜひ覚えておきましょう。   [PR] Webデザインで副業する方法とはHTMLでテーブルを表示するために使うタグ HTMLでは以下のタグを使ってテーブルを表示します。   表（テーブル）を作る <table>表（テーブル）</table> 表（テーブル）をつくるタグです。   見出しを作る <th>見出し</th> セルの要素であり、表の見出しを意味します。   データをいれるセルを作る <td>データ</td> セルの要素であり、表の値(データ)を意味します。   横方向のセルをまとめる <tr>tdやthなどの要素</tr> 表でつくられる横一列のセルをまとめます。       テーブルを実際に作ってみよう <table>タグに「border=”1″」を加えると枠が表示されます。 <table>タグのなかに<tr>タグで各データの行を指定し、そのなかに<td>タグでデータを入力します。 <th>タグではデータの見出しをつけましょう。   HTML <table border="1"> <tr> <th>日本語</th> <th>英語</th> </tr> <tr> <td>東京</td> <td>Tokyo</td> </tr> <tr> <td>大阪</td> <td>Osaka</td> </tr> </table>   解説 <table border=”1″>でテーブルを作成することを意味しています。 borderは枠線の太さを指定していますが、html5では1しか指定できません。 枠線の表示に関してはcssで指定することが実務でも一般的です。 cssでテーブルのデザインを変える方法については次の記事を参考にしてみてください。 サンプル有り！CSSで書くテーブル（table）の作り方 | TechAcademyマガジン   ２行目の <tr>では、横方向の<th>をまとめています。 つまり、 <th>日本語</th> <th>英語</th> が横に並ぶように<tr>で囲んでいます。   ３行目と４行目の<th>では、表の見出しを作っています。 見出しがあると、見出しだけ別の色にしたりすることで、表が非常にわかりやすくなります。   ６行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>東京</td> <td>Tokyo</td> の部分が該当し、thで指定した日本語と英語に対応するように、東京とTokyoというデータが表示されます。   １０行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>大阪</td> <td>Osaka</td> の部分が該当し、thで指定した日本語と英語に対応するように、大阪とOsakaというデータが表示されます。   表示結果 ブラウザで確認するとこのように表示されました。 テーブルが表示され、<th>タグで囲った部分が太字になりました。 <tr>タグは横一列のデータを「行」としてまとめ、その行をつくる値が<td>で表示されます。   動作確認 See the Pen table-html by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   応用編：テーブルの構造をまとめる テーブルは<thead><tbody><tfoot>のタグを使って表の構造をまとめることができます。 表の構造をまとめるということは、これまでtheadで表題だけ、tbodyでデータ部分だけ、tfootでフッターだけをそれぞれひとまとめのグループとして考えることが可能です。 例えばtheadだけグループにすることで、縦方向に長い表であったとしても、theadで囲まれた部分だけ固定して表示することが可能になります。 表の構造をまとめることで、ユーザーがより理解しやすいコンテンツを、よりわかりやすく一覧できるようになります。   タグの意味まとめ それぞれのタグは下記の意味です。   table headをグループ化する <thead>〜</thead> （<table>タグ内で）テーブルのヘッダー部分を意味します。   table bodyをグループ化する <tbody>〜</tbody> テーブルのボディ部分を意味します。   table
HTML

スマホ対応に便利！CSSのbox-sizingの使い方【初心者向け】

CSSで書くbox-sizingの使い方について解説する記事です。 Webデザインをする上で、今や必須となったスマホ画面への対応にも便利です。 box-sizingを利用すると、paddingやborderに依存せずに画面レイアウトを調整できるので、ぜひ覚えておきましょう。   目次 box-sizingとは box-sizingの書き方 実際にbox-sizingを書いてみよう まとめ   【動画の解説はこちら！】 大石ゆかり 田島メンター！！HTML要素のpaddingを設定したら、ボックス（表示領域）全体の大きさも変わってしまって……ボックスの大きさをそのままにするにはどうしたらいいですか～？ 田島悠介 そういうときはbox-sizingがとても便利だよ。 大石ゆかり box-sizingは何をするんですか？ 田島悠介 最初に指定したwidthとheightの範囲内でpaddingやborderを設定できる機能なんだ。まずは普段、paddingを設定したときにボックスの大きさがどうなっているかを確認してみよう。   box-sizingとは box-sizingは、HTML要素の表示領域（ボックス）の算出方法として利用されるプロパティです。 また、padding（余白を調整する属性）やborder（境界線の太さを調整する属性）といったプロパティがあります。 paddingやborderプロパティを使用して余白や境界線の太さを設定すると、widthやheightの表示領域にpaddingとborderのサイズが加わります。 そのため、paddingやborderの値によってボックス全体の大きさが変わってしまうのです。 これは、paddingとborderのサイズがwidthやheightの表示領域に含まれず、別のものとして扱われているためです。 box-sizingプロパティで設定を変えることによって、ボックスの大きさにpaddingやborderを含めるよう設定することができます。 これにより、余白や境界線の太さに影響されずにボックスの大きさを決めることが可能になります。 大石ゆかり そうそう、こんな感じで大きさが変わっちゃうんです。 田島悠介 これは、paddingやborderのサイズがwidthやheightの表示領域の上に加わってしまっているからなんだね。 大石ゆかり そこでbox-sizingを使うんですね。実際にはどう書くんですか？   [PR] Webデザインで副業する方法とはbox-sizingの書き方 box-sizingは以下のように記述します。 box-sizing: 値; 値の部分には以下のどちらかを入力します。 content-box：padding,borderを高さや幅に含めません(初期値) border-box：padding,borderを高さや幅に含めます   実際にbox-sizingを書いてみよう ここでは、box-sizingプロパティを実際に利用し、HTML要素の表示領域（ボックス）を設定します。 以下のhtmlにbox-sizingプロパティを使用します。 HTML <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <link rel=”stylesheet” href=”sample.css” type=”text/css”> </head> <body> <p class=”content1″>content-box(初期値)の場合、paddingとborderはwidthとheightに含まれない</p> <p class=”content2″>border-boxの場合、paddingとborderがwidthとheightに含まれる</p> </body> </html> 全く同じwidthとheightを設定した領域(幅400px、高さ150px)を2つ並べ、1つ目のボックスには初期値であるcontent-boxを、2つ目のボックスにはborder-boxを設定します。 CSS p.content1 { width: 400px; height: 150px; background-color:#f0f8ff; border: 30px solid #4169e1; padding: 10px; box-sizing: content-box; } p.content2 { width: 400px; height: 150px; background-color:#f0f8ff; border: 30px solid #4169e1; padding: 10px; box-sizing: border-box; } 画面では以下のように表示されます。 上のボックスではpaddingとborderに設定した分のサイズが元の幅と高さに追加されています。 下のボックスではwidthとheightの範囲内でpaddingとborderが生成されています。   まとめ 以上、CSSで書くbox-sizingの使い方について解説しました。 content-boxとborder-boxを使い分け、詳細なHTML要素の表示領域（ボックス）を設定できることを理解しておきましょう。 ぜひスマホとPCで共有する画面を作るときの参考にしてみてください。   執筆してくれたメンター メンターSS 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   田島悠介 今回は、box-sizingのふたつの値を比較してみたよ。 大石ゆかり content-boxは普段の状態、ボックスが大きくなっちゃうやつですね。 田島悠介 そうだね。そこで値をborder-boxにすることで領域内でpaddingやborderを設定することができるようになるんだ。 大石ゆかり これで領域の設定がやりやすくなりそうですね。ありがとうございました！   [お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
CSS

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 目次borderとはborderを使いこなすborderを使った実践的なサンプル執筆してくれたメンター 【動画の解説はこちら】   田島悠介 今回はCSSの基本的な書き方について勉強していこう。 大石ゆかり 田島メンター！！CSSの構文ではどんなものを使うんですか〜？ 田島悠介 まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。 大石ゆかり はい！   CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。   スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。 同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;}   [PR] Webデザインで副業する方法とはCSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。 セレクタ – どのHTMLタグに対して見合えを調整するか プロパティ – どういった内容のデザインを施すか 値 – プロパティはどの程度か   簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。 説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。 たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。 ほかのタグに設定したいときも同様です。 例）pタグ p {color: red; }   最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。   田島悠介 セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。 大石ゆかり この場合段落<p>のcolor、文字色をredの赤にするということですね。 田島悠介 そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。   プロパティを複数指定したいとき ひとつのセレクタに対して、プロパティは複数指定することができます。 たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。 また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; }   プロパティの種類 プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。   下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。 プロパティ 説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する   実践〜スタイルを作ってみよう〜 では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。 今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html>   ブラウザ画面ではこのように表示されます。   これを、最終的に次のようなデザインにしたいと思います。 スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。 まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。   <head> <meta charset=“UFT-8”>
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 枠線などを指定したい！CSSのborderの使い方【初心者向け】