TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】

初心者向けにHTMLの仕様に関連するW3Cについて解説しています。Web標準化の団体W3Cの歴史や役割、その標準に基づいたサイトの検証方法などについて説明します。アクセシビリティの確保に役立てましょう。

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

HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

HTMLの仕様に関連するW3Cについて詳しく説明していくね！

大石ゆかり

お願いします！

 

W3Cとは

W3C（ダブリュー・スリー・シー）とは、World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）の略称です。

WWW（ワールド・ワイド・ウェブ：World Wide Web）に関して、ブラウザなどの技術になる規格の標準化を目的に策定をすすめる非営利団体（組合）です。

 

W3C設立の当時

1990年代からブラウザが家庭用のパソコンにも普及していきました。当時、ブラウザの開発者によるHTMLの独自のタグの追加と提供が数多くありましたが、Webサイトの開発者にとっての苦労と混乱をまねいたことから、World Wide Webの設計者でもあるティム・バーナーズ＝リー氏によって設立されました。

 

W3Cの役割

W3Cは、各営利団体や組織はたまた個人によって、特化した技術による情報資源の独占あるいは寡占の阻止、利便性や実用性のある独自の技術などが乱立しないように、統一を目指して標準化の役割を担っています。

 

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

W3Cが勧告しているWeb標準

「Web標準」の概要は、アクセシビリティに長けているWebサイトを開発および提供できるように、多種多様な閲覧環境に依存せずに、表示および表現を同様にすることです。Webサイトの開発者が、Web標準に準拠することによって、Webサイトの汎用性が増すことから、プログラムの再利用もしやすくなります。

 

W3C勧告

W3C勧告として扱われる具体的な言語としては、HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）、 DOM（Document Object Model）、XML（Extensible Markup Language）などです。2010年代の前後に、長らく続いたHTML4.01からHTML5の策定や勧告にて賑わいました。

 

The W3C Markup Validation Service

推進の一環としても、HTMLやCSSの文法に、文法違反としての誤字脱字などを見つけるための無料のサービスがW3Cによって提供されています。

https://validator.w3.org/#validate_by_input

https://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】

HTMLでtableタグを使わないで段組みレイアウトする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

図形が描ける！HTML5のcanvasの書き方【初心者向け】

HTML5で使うcanvasの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ブラウザ上で絵...
HTML

HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】

HTMLでのselectedによる初期値の設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

HTMLで一定時間後に別のページにジャンプする方法を現役デザイナーが解説【初心者向け】

HTMLで一定時間後に別のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

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

HTMLの文法チェックツールを使って正しくコーディングする方法を現役デザイナーが解説【初心者向け】

HTMLの文法チェックツールについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 文法チェックツールについて詳しく説明していくね！ 大石ゆかり お願いします！   チェックツールとは 正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。 そんな時に活用したいのがHTMLのエラーチェックツールです。 どんなものがあるのか、実際どのような利点があるのか、そして使い方などを見ていきましょう。   文法ミスがあるとどうなるか 「正確なHTMLが書けていないとSEOに影響が出る」といわれていますが、実のところSEOにHTMLのエラーはそんなに影響は出ないのです。 事実、htmlが本当に正しい文法で書かれているwebサイトというのは世界中でも5%にも満たないのが現状です。 では、何故HTMLチェッカーが必要なのかというと、 レイアウト崩れや表示に影響がないか リンク切れやhタグの並び順、要素の誤った使い方など、明らかにおかしいところがないか このようなことをチェックするために使用する、と考えるのが正しい使い方、ということになります。   [PR] Webデザインで副業する方法とはおすすめ文法チェッカー10選 W3C HTMLチェッカー W3Cが運営するHTMLチェッカーです。まずはこれを使うのが基本です。 W3C CSSチェッカー W3Cが運営するCSS用のチェッカーです。日本語でエラー内容が表示されてHTMLチェッカーよりもわかりやすいのが特徴です。 W3C モバイル用チェッカー W3Cが運営するモバイルサイト用のHTMLチェッカーです。 (X)HTML5 Validator  HTML5対応HTMLチェッカーです。 HTMLチェッカー HTMLコーディングを完璧にしたい、というのであればこちらを使用することをお勧めします。 Another HTML-lint gateway HTML5対応で、日本語でチェックできるHTMLチェッカーとなっています。 WDG HTML Validator 40種類の文字コードをサポートしてくれていて、かつサイト全体のHTMLチェックを一括でしてくれる便利なHTMLチェッカーです。 Dirty Markup 文法だけでなくCSS、JavaScriptの3タイプのソースを選択箇所にコードをペーストするだけでチェックしてくれるオンラインチェックツールです HTML5 Outliner こちらは文法チェックとは少しことなりますがwebページの見出しの階層がどうなっているか確認できるツールです HTMLエラーチェッカー こちらはwebサイトではありませんが、ブラウザを閲覧するだけでHTMLの文法ミスを自動でチェック出来るGoogleChromeの拡張機能です。   チェックツールを使ってみよう 使い方はいたって簡単です。今回はW3C HTMLチェッカーで試してみます。 HTMLチェックをしたいURLを貼り付けて、チェックボタンを押すだけ。 是非試してみてください。   監修してくれたメンター メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろう こんな疑問を持っている方は、ぜひこの記事を読んでみてください。 どういう仕組みでWebページができているのか理解できますよ。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次W3CとはW3Cの役割W3Cが勧告しているWeb標準監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLとは何かについて詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。 簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。 マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。 「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。   例えば、このような情報をホームページにしたいと思います。 ニュース 孫が生まれて、ついにおじいちゃんになりました。   この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文>   これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p>   HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。 このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。 ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。   Webページの裏側を見る 普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。 実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。   たとえば、テックアカデミーのWebページも、裏側はHTMLです。   Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。   すると、英単語と記号が組み合わさった文章が出てきます。 これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。   HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。   Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。 どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。   [PR] Webデザインで副業する方法とはHyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。   インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。 そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。 「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。   ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。 今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。   HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。 いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。   ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】   HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】     HTMLの種類 HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。 現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。     大石ゆかり ソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？ 田島悠介 HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。 大石ゆかり なるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？ 田島悠介 リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。   HTMLファイルの作り方 最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）   以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。 ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。   リンクを表示する リンクを作成した場所へページが移動しました。 リンクを作成するには<a>タグを使用します。 <a>タグの書き方 <a href="リンク先へのパス">リンクを貼るテキストや画像</a> hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。 最後に必ず終了タグ</a>を入力します。   使用例 実際に<a>タグを使用してテキストにリンクを貼ります。 今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。 https://coolors.co/ コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body>
HTML

実際のアプリに学ぶ！モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、エンジニアのNick Babich氏によって投稿されました。   配色は、モバイルデザインにおいて、おそらく機能性の次に重要なものです。人間からコンピュータへの命令は主に、グラフィカルUI（GUI）の要素へのインタラクションを通して行われ、「配色」は重要な役割を担っています。   ユーザーが、アプリのコンテンツを見て理解し、アクションするときに役立ちます。すべてのアプリにはそれぞれに独自の配色があり、主な領域には原色を使っています。 新しいアプリをデザインするとき、可能な色の組合わせは無数に存在するので、それに合う配色を決定することは困難です。この記事では、モバイルデザインの配色で最も重要なことについて紹介します。   伝統的な配色のパターン（モノクロ―ム、類似色、補色）、どのパータンにも依存しない配色を自作する方法、ユーザビリティに優れたアプリのための色の選び方をテーマとして扱います。 また、この記事で紹介しているAdobe XDは、ダウンロードして無料で試用することもできます。   効果的な配色を選ぶ方法 配色を作るときには考慮すべきことがたくさんあります。 例えば、（あなたの製品や組織の）ブランドカラー、あなたの地域に調和するカラーなどです。   使うカラーの数はいくつにするべきか？ カラーの組合わせをシンプルにすると、ユーザーエクスペリエンスを向上する効果があります。シンプルな配色は、人間の目に自然になじみやすく、コンテンツの理解を促進します。反対に、過度に多くの場所に過度に多くの色を使う場合には、混乱したデザインになります。 トロント大学がAdobe Color CCの使用に関する調査を行ったところ、ほとんどの人が2〜3色のみ使用するシンプルな色の組み合わせを好むことが明らかになりました。   配色を作る方法 この2～3色を選ぶには、カラーホイール（色相環）を使うのが効果的です。 既存の配色は豊富にありますが、これらを利用すると新しいスキームの作成が容易になります。特に初心者の方にとっては。   モノクローム モノクロは、各色が同じベースカラーから生成されるため、最もシンプルな配色です。モノクロームのカラーは全体的な色の調和を生み出し、すっきりとした印象になります。 画像：モノクロームの配色は、単色、そのティント（色相に白色を混ぜて生まれる色）、そのシェード（色相に黒色を混ぜて生まれる色）、そのトーン（色相に灰色を混ぜて生まれる色）から構成されます。 特に、青や緑のモノクロームの配色は、人間の目に優しい色合いになります。 画像引用元：Adobe Color CC 画像引用元：Louis Saville モノクロームの配色は、クリーンで洗練された印象になります。   類似色 類似色の配色は、互いに調和する、カラーホイールで隣り合う色から作られます。そして、1色をドミナントカラー（支配色）として使い、他の色は配色を引き立てるために使います。 画像：12色のカラーホイールで隣り合う3色を使うことで、類似色の配色が作られます。 類似色の配色は比較的簡単ですが、色の鮮やかさが強調されやすいため、その決定が重要です。   例えば、ジェスチャー駆動のToDoリストアプリであるClearは、視覚的にタスクの優先順位を示すためにこの配色を使っています。 画像引用元：Adobe Color CC Clearのデフォルトの配色は、ヒートマップを連想させるようなデザインで、より重要度の高いタスクは、鮮やかな赤い色で画面に表示されます。   一方、瞑想アプリのCalmはユーザーがリラックスできるように、類似色の配色に青と緑を使っています。 画像引用元：Adobe Color CC Calmは全体のデザインにも、類似色の配色を使っています。   補色 補色とは、カラーホイールで正反対の位置にある色です。補色の色同士は必ずしも不調和になるというわけではありません。 補色とは、カラーホイールで正反対の位置にある色です。 補色はコントラストが強く、ユーザーの注意を引くために使うことができます。一方の色をドミナントカラー（支配色）にして、もう一方の色をアクセントカラーにすることが重要です。例えば、緑のオブジェクトの上に赤を合わせると、非常に目立ちます。 補色の配色は、何かを目立たせたい場合に効果的です。 しかし、補色の配色を使うときには、不調和な配色とならないよう注意も必要です。   カスタムの配色を自作する 配色を自作することは、多くの人が考えているほど複雑ではありません。明るいアクセントカラーを中間色（ニュートラルカラー）に加える方法は、その中で最も簡単な配色の1つであり、視覚的な効果も非常に高いといえます。 グレースケールのデザインに1色を追加するだけで、シンプルかつ効果的に視線を集めることができます。 Dropboxの配色を構成しているのは、白の背景、グレーのテキスト、青いアクセントカラーです。画像引用元：Dropbox   Adobe Color CCは配色を効率化する Adobe Color CCを使うと、色の選択が容易になります。パレットの各カラーは、数回クリックするだけで基本色として修正または選択できます。 各カラーのコードをエクスポートする機能もあります（16進数カラーコードを含む）。 パレットは直接的にライブラリに保存または追加できます。さらに、コミュニティによって作られた数多くの配色も、サイト上で利用できます。 ゼロから作る必要がなくなるので、ぜひ試してみることをおすすめします。   [PR] Webデザインで副業する方法とはコントラストの効果 一般的に、UI上で色のあるオブジェクトや領域は、単独で表示されるということはなく、他の色のオブジェクトや領域と隣り合うか重ねられています。このことがコントラストの効果を生みます。   コントラストとは、ある色が別の色からどのくらい対立するかを表す指標です。 コントラストを適切に使うと、目への負荷を減らし、画面上のデザイン要素をはっきり区別することでユーザーの注意を引く効果があります。 高いコントラストの場合はそれぞれのカラーがはっきりと目立ちますが、低いコントラストの場合はそうなりません。   コントラストとテキストの可読性 カラーコントラストは、色彩理論がデザインのユーザビリティに重要な影響を及ぼす分野の1つです。デザイナーは、美しくて調和が取れているように見える、低いコントラストを好む傾向にあります。 しかし、美しいことは常に可読性を高めるベストな方法であるとは限りません。テキストにカラーを使うときには、低いコントラストにすると読みにくくなるため、注意が必要です。 このことは特にモバイルス画面において注意するべきであり、ユーザーは外出先でデバイスを利用することが多いため、明るい場所で光が画面に反射するときには、ますます読みにくくなるのです。 デザイン要素同士のコントラストは十分に高くしておきましょう。その方法は簡単で、コントラスト比を確認するだけです。 コントラスト比は、あるカラーが別のカラーからどのくらい対立するかを示す比率です（一般的に、1:1や21:1などの形で表記されます）。コントラスト比の差が大きくなるほど、相対輝度の差も大きくなります。   W3Cは、本文のテキストと画像のテキストについて次のコントラスト比を推奨しています。 小さな文字のテキスト：背景に対して少なくとも4.5：1のコントラスト比とする必要があります。 大きな文字のテキスト（14 ptの太いウェイト/ 18 ptの標準的なウェイトおよびそれ以上）：背景に対して少なくとも3：1のコントラスト比とする必要があります。 このガイドラインは、低視力、色覚異常、または視力の低下しているユーザーが画面上のテキストを見たり読んだりする際にも役立ちます。 テキストの色と背景色をW3Cの推奨するコントラスト比に従って修正すると、読みやすくなります。 画像引用元：マテリアルデザイン アイコンなど他のデザイン要素も、W3Cの推奨するコントラスト比を実践することが望ましいです。 選択したパレットのコントラストの度合いについて、有益なフィードバックを提供してくれる無料のツールもいくつかあります。 その1つはWebAIMのColor Contrast Checkerで、選択した色をテストできます。   ユーザーの注目を集める効果 コントラストは読みやすいテキストを作るだけではなく、画面上の特定の要素にユーザーの注目を集める効果もあります。一般的に、高いコントラストは、重要度の高い要素を引き立てるために使うのに適しています。 例えば、ユーザーは背景色と高いコントラスト比にあるコールトゥアクション（CTA）のボタン要素を、よりクリックしやすいといえます。 コントラストによって、画面上でデザイン要素が目立っています。   色覚異常（カラーブラインド）の人のためのデザイン 視覚的な障害を持つ人があなたのアプリのユーザーとなり得ることを想像したことがありますか？ 通常、色覚異常は「特定の色を多くの人と同じように知覚しないこと」という意味で使われています。男性の約8％、女性の約0.5％が何らかの形で色覚異常の影響を受けているとされています。赤と緑の色について、よく問題となるようです。 色覚異常としてさまざまなタイプ（赤、緑、青、黄、モノクロームなど）が存在するため、アプリにおいて重要度の高いことを表示するときには、あらゆる人が知覚できるような視覚的な配慮が重要です。 システム状態を知らせるために、カラーだけを使用しないように注意してください。   また、Photoshopは色覚異常の人が見た場合をシミュレーションするのにも役立つツールです。アプリの画面が実際にどのように見えるかを表示する機能を備えています。 画像：Airbnbアプリのログイン画面　画像引用元：Pinterest   結論 今回は、色彩理論がアプリのUIデザインをどのように向上できるかの基本については、ほとんど触れていません。 カラーを使いこなすスキルを磨くためには、継続的な努力を要します。 美しくかつ機能的な配色を作成する方法を学ぶには、練習、決意、および多くのユーザーテストが必要です。   また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次W3CとはW3Cの役割W3Cが勧告しているWeb標準監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。 田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。 たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。   HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。 タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。 題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。   <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。 開始タグと終了タグで囲むことで、開始と終了を表現します。 開始タグから終了タグまでのひとまとまりを要素と呼びます。 図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。   要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。 代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。 改行のない文章のひとかたまりを示すために使用します。 文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。 以下のように見出しの大小を表現するために使用します。 大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。 他のHTMLなどへのリンクを表現するために使用します。 青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。 四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。 画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。 文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。   [PR] Webデザインで副業する方法とは属性と値 各要素の細かい動きや働きを設定するための付属情報が属性です。 何の設定かを示すものが属性名、どう設定するかを属性値といいます。 開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。 上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。   この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。 たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。   以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png">   田島悠介 要素と属性、ぜひ組み合わせて理解してくださいね！ 大石ゆかり タグは全部覚えなければダメなんですか？ 田島悠介 要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。 各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。 常に調べながら書いていますよ。 大石ゆかり 今回のタグは、後で覚えてもいいんですね？ 田島悠介 技術は常に移り変わるので、すぐに古くなってしまうためですね。 暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。 大石ゆかり 調べるときはテックアカデミーの記事を参考にしますね！   HTMLを書いてみよう これまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。   <!DOCTYPE html>はHTMLを示すもの 文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。 この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。   要素の階層構造 要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。 以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body>   また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。   HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。   <head>と<body> <html>の中身は大きく
HTML

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次W3CとはW3Cの役割W3Cが勧告しているWeb標準監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] Webデザインで副業する方法とは開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.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.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート --> <div id="square-template" class="square"> <div class="stone"></div>
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】