TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのappearanceプロパティの使い方を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSのappearanceプロパティの使い方を現役エンジニアが解説【初心者向け】

初心者向けにCSSのappearanceプロパティの使い方について解説しています。appearanceプロパティを設定することで、入力フォームなどのデフォルトのスタイルを解除することができます。使用した場合の画面上での見え方を元の状態と比較してみましょう。

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

CSSのappearanceプロパティの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

appearanceプロパティの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

appearanceプロパティとは

appearanceプロパティとは、OS（オペレーティングシステム）によって異なる標準的な部品（ユーザーインタフェース）のスタイルを解除するためのプロパティです。主にinputタグに対する既定の装飾を解除することに使用できます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

ユーザーインターフェースとは

ユーザー（利用者）がコンピュータを動作させるために、操作できる画面です。

 

ブラウザ毎のデフォルトスタイルを変更してみよう

表組みの内部にあるinputタグに装飾を施します。

 

HTML

<table class="table-collection">
  <tbody>
  <tr>
  <th></th>
  <th>TEXT</th>
  <th>TEXT</th>
  </tr>
  <tr>
  <td>TEXT</td>
  <td>
  <input type="checkbox">
  </td>
  <td>
  <input type="checkbox">
  </td>
  </tr>
  </tbody>
</table>

 

CSS

.table-collection input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  border: none;
  outline: 1px solid #e8e4da;
  margin: 0;
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 10px;
  text-align: center;
  vertical-align: top;
  background-color: #ffffff;
}

.table-collection input[type="checkbox"]:checked::before {
  content: "✔";
}

.table-collection {
  width: 100%;
  table-layout: fixed;
  background-color: #f9f9f5;
  border-collapse: collapse;
  border: 1px solid #e8e4da;
  text-align: center;
}

.table-collection th, .table-collection td {
  padding: 25px 0;
  border: 1px solid #e8e4da;
  line-height: 1;
  color: #887f69;
}

 

表示結果

See the Pen
2020-06-20-sample05 by YOHEI INAI (@yohei_inai)
on CodePen.

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSでアコーディオンメニューを作成する方法【初心者向け】

CSSでアコーディオンメニューを作成する方法について解説します。 アコーディオンメニューとは、楽器のアコーディオンのように伸縮する蛇腹が、メニューの内容を...
CSS

サンプル有り！CSSで書くテーブル（table）の作り方【初心者向け】

CSSでテーブルを様々なカスタマイズができます。今回はその一例を紹介します。 実際によくサイトで見るようなテーブルを作りながら書き方を解説しています。自身...
Webデザイン

CSSで画像とテキストを横並びにする方法【初心者向け】

CSSで画像とテキストを横並びにする方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読む...
CSS

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。 最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。 ここでは一例として...
Webデザイン

CSSでボタンやボックスの角を丸くする方法を現役デザイナーが解説【初心者向け】

今回は、角を丸くするborder-radiusプロパティについて解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説し...
CSS

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

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

Laravelでcollection（コレクション）を使う方法【初心者向け】

Laravelでcollectionを使う方法について解説します。 配列を操作しやすくする機能が多くあるので、使い方を知っておくと非常に便利でしょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでcollectionを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   Laravelのcollectionとは Laravelのcollectionとは配列のラッパーです。IlluminateSupportCollection にて提供されています。 collectionにはPHPの配列を操作しやすくした、様々なメソッドが定義されています。each、map、filter、reduce、などほかの言語で馴染み深い配列操作メソッド、union、intersect、diff などの集合操作系メソッドも使えたりします。 またコレクション内から要素を取り出す操作も充実しており get、shift、put、push、pull など行えます。 そのほかいっぱいあるのでぜひリファレンスを参照してください。 Laravelリファレンス-collections コレクションを使う事でメソッドチェーンが使えるようになるのが非常にありがたいです。クロージャーによりループ変数のスコープが閉じるのでコードがスッキリすると思います。   collectionの書き方 collectionを作成するにはヘルパー関数collectを使います。引数として配列を渡す事で、配列をラップした IlluminateSupportCollection が生成されます。これを使って色々遊んでみましょう。 $c = collect([1, 2, 3, 4, 5]) $c->partition(function($i) { return $i % 2 === 0; }) // 偶数奇数のコレクションに分割する $c->filter(function ($i) { return $i >= 3; }) // 3以上の要素のみを取得 $c->map(function ($i) { return $i ** 2; }) // 各要素を二乗する   [PR] Webデザインで副業する学習方法を動画で公開中実際にLaravelのcollectionを使ってみよう FizzBuzz でもやってみましょう。1から100 までの数字に対してFizzBuzzのルールに基づいた変換を行い、最終的な結果を文字列としてまとめて表示してみましょう。以下が変換ルールです。 3の倍数はFizzに変換 5の倍数はBuzzに変換 3と5の倍数であっても15の倍数であればFizzBuzzに変換 その他の場合は変換しない 詳しいルールは次のリンクを参考にしてください。 wikipedia-fizz_buzz rangeメソッドを使うとある範囲の値を含んだ配列が作成できます、これをcollectionに変換するところから始めましょう collect( range(1, 100) ) 次に map を呼び出し、各数字に対してFizzBuzzを判定します。 ... )->map(function ($n) { if
PHP

表で見やすくしたい！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でcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次appearanceプロパティとはユーザーインターフェースとはブラウザ毎のデフォルトスタイルを変更してみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。   HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。 なお、今回はBootstrapのバージョン「3.3.5」を使用します。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！Bootstrapというのは何ですか〜？ 田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 大石ゆかり フロントエンドというとHTML・CSS・JavaScriptですか？ 田島悠介 そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。   目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。   Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。   このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。 この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。     [PR] Webデザインで副業する学習方法を動画で公開中Bootstrapを使う準備 実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。   Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。 ソースをダウンロードして、ローカルに配置して読み込む すでにホストされているファイルをインターネット経由で読み込む 今回は、前者の方法を紹介します。   ダウンロードするには、BootstrapのTOPページにアクセスしましょう。 「Download Bootstrap」のボタンをクリックしてください。   次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。   ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。   続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み -->
Bootstrap

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

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 目次appearanceプロパティとはユーザーインターフェースとはブラウザ毎のデフォルトスタイルを変更してみよう監修してくれたメンター 【動画の解説はこちら】   田島悠介 今回は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

MySQLでALTER TABLEを使ってテーブル構造を変更する方法【初心者向け】

MySQLの初心者向けに、基本的な使い方を解説する記事です。 今回は、ALTER TABLEを使ってテーブル構造に変更・追加・削除といった操作を加える方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ALTER TABLEを使うと、MySQLの既存のテーブルの定義（構造）を変更できます。 実務でも、ALTER TABLEを使ってテーブル構造に変更・追加・削除し、Webアプリケーションのデータ処理を行うので、ぜひ学習してみてください。 目次appearanceプロパティとはユーザーインターフェースとはブラウザ毎のデフォルトスタイルを変更してみよう監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   今回は、このようなデータの入ったuserというテーブルをもとに解説を進めます。   大石ゆかり 田島メンター！テーブルを作成して、データを追加できるようになったんですが、作成した後にテーブルの変更ってできるんですか？ 田島悠介 作成したテーブルの内容の変更やフィールドの削除などできるんだ。 大石ゆかり 後からでも全部作り直せる感じでしょうか？ 田島悠介 そうだね。SQLiteなど簡易なデータベースは注意が必要だけど、普通のデータベースは後からでも変更できるんだ。変更の仕方を見てみよう！   テーブル名を変更する際に利用するコマンド テーブル名を変更する際には次のように操作します。 テーブル名を表示するコマンドは必須ではありませんが、名前が変更できたかを確認する方が安心です。 テーブル名を表示 テーブル名を変更   テーブル名一覧を表示するコマンド テーブル名を変更する場合、show tables;を利用します。 show tables;   テーブル名を変更するコマンド テーブル名を変更する場合、alter tableを利用します。 alter table  テーブル名 rename  新テーブル名;   テーブルの中のデータを表示するコマンド テーブルの中のデータを表示する場合、select を利用します。 select * from テーブル名;   データ型を確認するコマンド テーブルのデータ型を確認するためには、descを利用します。 desc テーブル名;   ALTER TABLEを使ってテーブル名を変更してみよう 実際にALTER TABLEを使ってテーブル名を変更してみましょう。   テーブル名を表示 まずはshow tables;を使ってテーブル名を表示させておきましょう。 コマンド  show tables; 実行結果 解説 show tables;というコマンドを実行すると、userというテーブルが表示されました。   テーブル名を変更 alter tableを使って、usersという名前に変えてみたいと思います。 コマンド alter table user rename users; 実行結果 解説 alter table user rename users;というコマンドで、userテーブルをusersテーブルに名称変更しました。 「Query OK」と表示されれば変更完了です。   テーブル名を再確認のため表示 show tablesを利用して、再度テーブル名を確認します。 コマンド show tables; 実行結果 解説 userからusersに変わっています。 これでテーブル名の変更ができました。   [PR] Webデザインで副業する学習方法を動画で公開中 ALTER TABLEを使ってフィールドを追加する方法 テーブルの中にはいくつかフィールドがありますが、新しいフィールドを追加できます。 フィールドを追加するためのコマンドは次の通りです。 alter table テーブル名 add フィールド名 データ型;   テーブルの中のデータを表示 現在のテーブルの中身を表示させます。 コマンド select * from users; 実行結果 解説 select * from users;では、テーブル名がusersのテーブルの中身を表示しています。 id・username・organization_id・email・password・login_num と、6つのフィールドがあります。   フィールドを追加する フィールドを追加する方法を解説します。 コマンド alter table users add age int; 実行結果   alter table users add
MySQL

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのappearanceプロパティの使い方を現役エンジニアが解説【初心者向け】