HTML5の特徴

HTML5とは

HTML5は、2014年10月28日にW3C(World Wide Web Consortium)によって勧告されました。HTML5では、以前のバージョンより多くのタグが増えています。現在のWebサイトはHTML5での位置付けがほぼ整い始めています。(2018年現在)

特に、スマートフォン用のWebブラウザは、HTML5のリリース後に作られたため、パソコン用のWebブラウザよりHTML5に対応しやすい環境が整っています。近年スマートフォン利用者が増加しているため、マルチデバイス最適化が求められています。パソコン用Webブラウザとスマートフォンやタブレット用などに適用させる「レスポンシブWebデザイン」が多く取り入れられており、ResponsiveWebDesignを略してRWDなどと呼ばれる場合もあります。

Webサイトは、RWD手法だけでなく各デバイスの専用サイトを個別に構築し、ユーザーエージェントによる振り分けさせる手法も存在しています。現在のWebサイトは様々な手法が混在しており、公開・制作する側によって異なっています。これが「正解」という考え方ではなく、それぞれの環境やボリュームに見合った手法を選択します。何よりも、ブラウザを通してレイアウトの崩れなく見やすく分かりやすく発信することが大切です。

初級のカリキュラムでは、限られた基本的なタグだけを練習していきます。

W3C(World Wide Web Consortium)

World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された団体です。ティム・バーナーズ＝リーが創設し、率いています。たくさんのWebサイトが、それぞれ勝手に開発したりバラバラな技術を採用すると、ブラウザ側も統一性を取ることが困難になり大変なことになってしまいます。このような団体が存在しているからこそ私たちは、パソコンやスマートフォンで安全にかつ豊富なWebサイトを閲覧できたりするわけですね。
W3C(World Wide Web Consortium)

「Webクリエイター能力認定試験」では、HTMLの最新バージョンであるHTML5を対象に試験を行っています。過去のバージョンから追加・変更された問題などが出題されているのでご紹介します。

● 新規追加されたタグ

HTML5では的確な意味付けができるように複数のタグが新しく追加されました。

※Webクリエイター能力認定スタンダードテキスト資料 P.54参照

● 意味が変更されたタグ

<strong>タグは従来のHTMLでは「強調」を意味するタグでしたがHTML5では「非常に重要、深刻、緊急」に意味が変更されました。
※Webクリエイター能力認定スタンダードテキスト資料 P.55-56参照

● 廃止されたタグ・属性

HTML5ではフレームを使用したページの作成方法が廃止されました。また、<font>タグ等の直接表示を制御するようなタグや、もともとあまり使用されていなかったタグが廃止されました。











<acronym>
<applet>
<isindex>
<dir>
</pre>
<pre class="prettyprint">
<!DOCTYPE html>
</pre>
<h4>書式が簡略されたタグ</h4>
<p>HTML5では一部のタグが従来の記述方法から簡略化され、全体的に記述しやすくなっています。一例として文書型宣言と&lt;link&gt;を紹介します。</p>
<h5>文書型宣言（DOCTYPE宣言）</h5>
<p>文書型宣言とは、文書がどのバージョンのHTMLで、どの仕様に従って作られているのかを宣言し、表示するブラウザに伝えるためのものです。</p>
<h5>&lt;link&gt;タグのtype属性が不要に</h5>
<p>外部のCSSファイルを読み込む際には&lt;link&gt;を使用していましたが、HTML5ではこの記述が不要になりました。</p>
<pre class="prettyprint">
【従来の<link>タグの記述】
<link rel="stylesheet" href="ファイルのパス.css" type="text/css">
【HTML5での<link>タグの記述】
<link rel="stylesheet" href="ファイルのパス.css">
</pre>
<p>詳しくは、「Webクリエイター能力認定試験」受験向けの特設カリキュラムで、解説いたします。</p>
	</div>

	<footer class="post-footer">

		<div class="post-tags"><a href="https://cocohp.com/wp/tag/css/" rel="tag">css</a><a href="https://cocohp.com/wp/tag/html/" rel="tag">html</a><a href="https://cocohp.com/wp/tag/html5/" rel="tag">html5</a><a href="https://cocohp.com/wp/tag/webweb/" rel="tag">ウェブ</a><a href="https://cocohp.com/wp/tag/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0/" rel="tag">コーディング</a><a href="https://cocohp.com/wp/tag/%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97/" rel="tag">マークアップ</a></div>
				
			
	<div class="post-share">

		
		
		
		
		
		
		
	</div>
	
	</footer>


</article>
<!-- Previous Post -->
<a href="https://cocohp.com/wp/2007/" title="jQuery スライダーとは" class="single-navigation previous-post">
<img width="75" height="75" src="https://cocohp.com/wp/wp-content/uploads/2018/01/download-75x75.jpg" class="attachment-ashe-single-navigation size-ashe-single-navigation wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://cocohp.com/wp/wp-content/uploads/2018/01/download-75x75.jpg 75w, https://cocohp.com/wp/wp-content/uploads/2018/01/download-150x150.jpg 150w" sizes="auto, (max-width: 75px) 100vw, 75px" />	<i class="icon-angle-left"></i>
</a>

<!-- Next Post -->
<a href="https://cocohp.com/wp/1149/" title="レイアウトの基礎" class="single-navigation next-post">
	<img width="75" height="75" src="https://cocohp.com/wp/wp-content/uploads/2019/08/ac8ac5d512ab6affd15bdd621697c00a_s-75x75.jpg" class="attachment-ashe-single-navigation size-ashe-single-navigation wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://cocohp.com/wp/wp-content/uploads/2019/08/ac8ac5d512ab6affd15bdd621697c00a_s-75x75.jpg 75w, https://cocohp.com/wp/wp-content/uploads/2019/08/ac8ac5d512ab6affd15bdd621697c00a_s-150x150.jpg 150w, https://cocohp.com/wp/wp-content/uploads/2019/08/ac8ac5d512ab6affd15bdd621697c00a_s-300x300.jpg 300w" sizes="auto, (max-width: 75px) 100vw, 75px" />	<i class="icon-angle-right"></i>
</a>

	</div><!-- .main-container -->


	
<div class="sidebar-right-wrap">
	<aside class="sidebar-right">
		<div id="media_image-5" class="ashe-widget widget_media_image"><a href="https://pixabay.com/ja/"><img width="300" height="100" src="https://cocohp.com/wp/wp-content/uploads/2019/03/banner-1-300x100.png" class="image wp-image-4837  attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="lazy" /></a></div><div id="custom_html-5" class="widget_text ashe-widget widget_custom_html"><div class="textwidget custom-html-widget"><a href="https://px.a8.net/svt/ejp?a8mat=3B58SL+1PBO36+3SPO+25GPIP" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://www25.a8.net/svt/bgt?aid=200118981103&wid=001&eno=01&mid=s00000017718013011000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=3B58SL+1PBO36+3SPO+25GPIP" alt=""></div></div><div id="search-2" class="ashe-widget widget_search"><form role="search" method="get" id="searchform" class="clear-fix" action="https://cocohp.com/wp/"><input type="search" name="s" id="s" placeholder="Search..." data-placeholder="Type &amp; hit Enter..." value="" /><span class="svg-fa-wrap"><i class="fa fa-search"></i></span><input type="submit" id="searchsubmit" value="st" /></form></div><div id="media_image-11" class="ashe-widget widget_media_image"><div class="widget-title"><h2>スマホでもご覧いただけます。</h2></div><img width="116" height="116" src="https://cocohp.com/wp/wp-content/uploads/2019/04/23f60cd616c32e16d20d90e9f64ecff7.png" class="image wp-image-5548  attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="lazy" srcset="https://cocohp.com/wp/wp-content/uploads/2019/04/23f60cd616c32e16d20d90e9f64ecff7.png 116w, https://cocohp.com/wp/wp-content/uploads/2019/04/23f60cd616c32e16d20d90e9f64ecff7-75x75.png 75w" sizes="auto, (max-width: 116px) 100vw, 116px" /></div><div id="nav_menu-4" class="ashe-widget widget_nav_menu"><div class="widget-title"><h2>Category</h2></div><div class="menu-category-container"><ul id="menu-category-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4927"><a href="//cocohp.com"><i class="fas fa-home orange"></i> HOME</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4891"><a href="https://cocohp.com/wp/category/internet/"><i class="fas fa-laptop gray"></i> インターネットの基礎知識</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4934"><a href="https://cocohp.com/wp/category/webdesigner01/"><i class="far fa-folder-open gray"></i> 準備をしよう</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-4893"><a href="https://cocohp.com/wp/category/curriculum01/"><i class="fas fa-adjust fa-spin gray"></i> Webクリエイター【初級／前編】</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-4935"><a href="https://cocohp.com/wp/category/curriculum01/html/"><i class="fas fa-angle-double-right gray"></i> HTMLを学ぶ</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4936"><a href="https://cocohp.com/wp/category/curriculum01/curriculum01_css01/"><i class="fas fa-angle-double-right gray"></i> CSSの基礎</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4937"><a href="https://cocohp.com/wp/category/curriculum01/html-lesson01/"><i class="fas fa-angle-double-right gray"></i> HTML初級/練習問題(上)</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4938"><a href="https://cocohp.com/wp/category/curriculum01/html-lesson02/"><i class="fas fa-angle-double-right gray"></i> HTML初級/練習問題(下)</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6132"><a href="/category/shikaku/?post_type=level_002"><i class="far fa-clone gray"></i> Webクリエイター試験対策</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4899"><a href="https://cocohp.com/wp/category/curriculum02/"><i class="fas fa-adjust fa-spin gray"></i> Webデザインを学ぶ【初級／後編】</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4939"><a href="https://cocohp.com/wp/category/curriculum02/layout/"><i class="fas fa-angle-double-right gray"></i> レイアウトを学ぶ</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5010"><a href="https://cocohp.com/wp/category/curriculum02/css02/"><i class="fas fa-angle-double-right gray"></i> CSSを学ぶ</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4941"><a href="https://cocohp.com/wp/category/curriculum02/curriculum02-menu/"><i class="fas fa-angle-double-right gray"></i> メニューを学ぶ</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4942"><a href="https://cocohp.com/wp/category/curriculum02/javascript/"><i class="fas fa-angle-double-right gray"></i> JavaScriptを学ぶ</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4940"><a href="https://cocohp.com/wp/category/curriculum02/css_production/"><i class="fas fa-angle-double-right gray"></i> 様々な演出効果</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4943"><a href="https://cocohp.com/wp/category/curriculum02/rwd/"><i class="fas fa-angle-double-right gray"></i> レスポンシブデザイン</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4944"><a href="https://cocohp.com/wp/category/curriculum02/web-lesson02-01/"><i class="fas fa-angle-double-right gray"></i> Webデザイン後編/練習問題(上)</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4945"><a href="https://cocohp.com/wp/category/curriculum02/web-lesson02-02/"><i class="fas fa-angle-double-right gray"></i> Webデザイン後編/練習問題(下)</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-custom_category menu-item-7244"><a href="https://cocohp.com/wp/custom_category/wordpress/"><i class="fas fa-adjust fa-spin gray"></i> ワードプレスを学ぶ</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4907"><a href="https://cocohp.com/wp/category/banner/"><i class="fas fa-angle-double-right faa-passing animated gray"></i>　バナー制作の技術</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4908"><a href="https://cocohp.com/wp/category/dw/"><i class="fas fa-angle-double-right faa-passing animated gray"></i>　Dreamweaver</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4909"><a href="https://cocohp.com/wp/category/web-column/"><i class="fas fa-angle-double-right faa-passing animated orange"></i>　Column</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5758"><a href="https://cocohp.com/wp/category/web-column/icebreak-web-column/"><i class="fas fa-angle-double-right gray"></i> アイスブレイク</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4913"><a href="https://cocohp.com/wp/category/news/"><i class="fas fa-adjust fa-spin gray"></i> お知らせ</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4915"><a href="https://cocohp.com/wp/category/web-homework/"><i class="fas fa-adjust fa-spin gray"></i> 宿題・課題</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4916"><a href="https://cocohp.com/wp/category/students-web/"><i class="fas fa-adjust fa-spin orange"></i> 生徒作品集</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5199"><a href="https://cocohp.com/wp/curriculum/">カリキュラム概要</a></li>
</ul></div></div><div id="media_image-8" class="ashe-widget widget_media_image"><div class="widget-title"><h2>ウェブデザイナーズ・ラボ</h2></div><a href="//wwweb.jp"><img width="960" height="400" src="https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1-1024x427.jpg" class="image wp-image-4955  attachment-large size-large" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="lazy" srcset="https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1-1024x427.jpg 1024w, https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1-300x125.jpg 300w, https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1-768x320.jpg 768w, https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1-1140x475.jpg 1140w, https://cocohp.com/wp/wp-content/uploads/2019/03/header_min02-1.jpg 1200w" sizes="auto, (max-width: 960px) 100vw, 960px" /></a></div><div id="ashe_social_widget-2" class="ashe-widget ashe_social_widget"><div class="widget-title"><h2>Follow Us</h2></div>        <div class="social-icons">
                      <a href="https://www.facebook.com/sharer.php?src=bm&#038;u=http://cocohp.com&#038;t=Webデザイナーの教科書" target="_blank">
                <i class="fab fa-facebook-f"></i>
            </a>
          
                      <a href="https://twitter.com/intent/tweet?url=http://cocohp.com&#038;text=Webデザイナーの教科書" target="_blank">
                <i class="fab fa-twitter"></i>
            </a>
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
                      <a href="http://info@cocohp.com" target="_blank">
                <i class="fas fa-envelope"></i>
            </a>
          
        </div>
        <style>
           #ashe_social_widget-2 .social-icons a {
                    color: #111111;
                }
    
                #ashe_social_widget-2 .social-icons a:hover {
                    color: #ca9b52;
                }        </style>
        </div>	</aside>
</div>
</div>

		</div><!-- .page-content -->

		<!-- Page Footer -->
		<footer id="page-footer" class="clear-fix">
			
			<!-- Scroll Top Button -->
						<span class="scrolltop icon-angle-up"></span>
			
			<!-- Instagram Widget -->
			
<div class="footer-instagram-widget">
	<div id="media_gallery-4" class="ashe-instagram-widget widget_media_gallery"><div id='gallery-1' class='gallery galleryid-1383 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
			<div class='gallery-icon landscape'>
				<a href='https://cocohp.com/wp/index-2/'><img width="150" height="150" src="https://cocohp.com/wp/wp-content/uploads/2019/03/index-1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" decoding="async" loading="lazy" srcset="https://cocohp.com/wp/wp-content/uploads/2019/03/index-1-150x150.jpg 150w, https://cocohp.com/wp/wp-content/uploads/2019/03/index-1-300x300.jpg 300w, https://cocohp.com/wp/wp-content/uploads/2019/03/index-1-75x75.jpg 75w" sizes="auto, (max-width: 150px) 100vw, 150px" /></a>
			</div></figure>
		</div>
</div></div>
			<div class="page-footer-inner ">

			<!-- Footer Widgets -->
			
<div class="footer-widgets clear-fix">
	<div id="tag_cloud-2" class="ashe-widget widget_tag_cloud"><div class="widget-title"><h2>タグ</h2></div><div class="tagcloud"><a href="https://cocohp.com/wp/tag/web/" class="tag-cloud-link tag-link-127 tag-link-position-1" style="font-size: 12.941176470588pt;" aria-label="web (3個の項目)">web</a>
<a href="https://cocohp.com/wp/tag/web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc/" class="tag-cloud-link tag-link-97 tag-link-position-2" style="font-size: 17.882352941176pt;" aria-label="webデザイナー (7個の項目)">webデザイナー</a>
<a href="https://cocohp.com/wp/tag/web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" class="tag-cloud-link tag-link-72 tag-link-position-3" style="font-size: 10.964705882353pt;" aria-label="Webデザイン (2個の項目)">Webデザイン</a>
<a href="https://cocohp.com/wp/tag/yui/" class="tag-cloud-link tag-link-78 tag-link-position-4" style="font-size: 10.964705882353pt;" aria-label="yui (2個の項目)">yui</a>
<a href="https://cocohp.com/wp/tag/z-index/" class="tag-cloud-link tag-link-56 tag-link-position-5" style="font-size: 8pt;" aria-label="z-index (1個の項目)">z-index</a>
<a href="https://cocohp.com/wp/tag/%e3%81%8a%e6%b0%97%e3%81%ab%e5%85%a5%e3%82%8a%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/" class="tag-cloud-link tag-link-61 tag-link-position-6" style="font-size: 8pt;" aria-label="お気に入りアイコン (1個の項目)">お気に入りアイコン</a>
<a href="https://cocohp.com/wp/tag/webweb/" class="tag-cloud-link tag-link-117 tag-link-position-7" style="font-size: 18.705882352941pt;" aria-label="ウェブ (8個の項目)">ウェブ</a>
<a href="https://cocohp.com/wp/tag/%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf/" class="tag-cloud-link tag-link-99 tag-link-position-8" style="font-size: 12.941176470588pt;" aria-label="エディタ (3個の項目)">エディタ</a>
<a href="https://cocohp.com/wp/tag/%e3%82%ab%e3%83%95%e3%82%a7/" class="tag-cloud-link tag-link-52 tag-link-position-9" style="font-size: 8pt;" aria-label="カフェ (1個の項目)">カフェ</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/" class="tag-cloud-link tag-link-65 tag-link-position-10" style="font-size: 8pt;" aria-label="グローバルメニュー (1個の項目)">グローバルメニュー</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0/" class="tag-cloud-link tag-link-108 tag-link-position-11" style="font-size: 22pt;" aria-label="コーディング (13個の項目)">コーディング</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab/" class="tag-cloud-link tag-link-53 tag-link-position-12" style="font-size: 10.964705882353pt;" aria-label="サンプル (2個の項目)">サンプル</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b9%e3%82%a4%e3%83%83%e3%83%81/" class="tag-cloud-link tag-link-66 tag-link-position-13" style="font-size: 8pt;" aria-label="スイッチ (1個の項目)">スイッチ</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3/" class="tag-cloud-link tag-link-67 tag-link-position-14" style="font-size: 8pt;" aria-label="スマートフォン (1個の項目)">スマートフォン</a>
<a href="https://cocohp.com/wp/tag/%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc/" class="tag-cloud-link tag-link-47 tag-link-position-15" style="font-size: 10.964705882353pt;" aria-label="スライダー (2個の項目)">スライダー</a>
<a href="https://cocohp.com/wp/tag/%e3%82%bf%e3%82%b0/" class="tag-cloud-link tag-link-103 tag-link-position-16" style="font-size: 17.058823529412pt;" aria-label="タグ (6個の項目)">タグ</a>
<a href="https://cocohp.com/wp/tag/%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/" class="tag-cloud-link tag-link-69 tag-link-position-17" style="font-size: 8pt;" aria-label="ダウンロードできない (1個の項目)">ダウンロードできない</a>
<a href="https://cocohp.com/wp/tag/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88/" class="tag-cloud-link tag-link-98 tag-link-position-18" style="font-size: 10.964705882353pt;" aria-label="テキスト (2個の項目)">テキスト</a>
<a href="https://cocohp.com/wp/tag/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab/" class="tag-cloud-link tag-link-85 tag-link-position-19" style="font-size: 8pt;" aria-label="テーブル (1個の項目)">テーブル</a>
<a href="https://cocohp.com/wp/tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" class="tag-cloud-link tag-link-51 tag-link-position-20" style="font-size: 17.882352941176pt;" aria-label="デザイン (7個の項目)">デザイン</a>
<a href="https://cocohp.com/wp/tag/%e3%83%88%e3%82%b0%e3%83%ab/" class="tag-cloud-link tag-link-64 tag-link-position-21" style="font-size: 10.964705882353pt;" aria-label="トグル (2個の項目)">トグル</a>
<a href="https://cocohp.com/wp/tag/%e3%83%88%e3%83%a9%e3%83%b3%e3%82%b8%e3%82%b7%e3%83%a7%e3%83%b3/" class="tag-cloud-link tag-link-49 tag-link-position-22" style="font-size: 8pt;" aria-label="トランジション (1個の項目)">トランジション</a>
<a href="https://cocohp.com/wp/tag/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/" class="tag-cloud-link tag-link-80 tag-link-position-23" style="font-size: 12.941176470588pt;" aria-label="ナビゲーション (3個の項目)">ナビゲーション</a>
<a href="https://cocohp.com/wp/tag/%e3%83%8f%e3%83%83%e3%82%b7%e3%83%a5%e3%82%bf%e3%82%b0/" class="tag-cloud-link tag-link-102 tag-link-position-24" style="font-size: 8pt;" aria-label="ハッシュタグ (1個の項目)">ハッシュタグ</a>
<a href="https://cocohp.com/wp/tag/%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b3/" class="tag-cloud-link tag-link-62 tag-link-position-25" style="font-size: 8pt;" aria-label="ファビコン (1個の項目)">ファビコン</a>
<a href="https://cocohp.com/wp/tag/fontfont/" class="tag-cloud-link tag-link-116 tag-link-position-26" style="font-size: 8pt;" aria-label="フォント (1個の項目)">フォント</a>
<a href="https://cocohp.com/wp/tag/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/" class="tag-cloud-link tag-link-70 tag-link-position-27" style="font-size: 10.964705882353pt;" aria-label="プラグイン (2個の項目)">プラグイン</a>
<a href="https://cocohp.com/wp/tag/border/" class="tag-cloud-link tag-link-132 tag-link-position-28" style="font-size: 8pt;" aria-label="ボーダー (1個の項目)">ボーダー</a>
<a href="https://cocohp.com/wp/tag/%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97/" class="tag-cloud-link tag-link-107 tag-link-position-29" style="font-size: 15.905882352941pt;" aria-label="マークアップ (5個の項目)">マークアップ</a>
<a href="https://cocohp.com/wp/tag/%e3%83%a1%e3%83%a2%e5%b8%b3/" class="tag-cloud-link tag-link-100 tag-link-position-30" style="font-size: 14.588235294118pt;" aria-label="メモ帳 (4個の項目)">メモ帳</a>
<a href="https://cocohp.com/wp/tag/%e3%83%aa%e3%82%bb%e3%83%83%e3%83%88/" class="tag-cloud-link tag-link-77 tag-link-position-31" style="font-size: 12.941176470588pt;" aria-label="リセット (3個の項目)">リセット</a>
<a href="https://cocohp.com/wp/tag/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96/" class="tag-cloud-link tag-link-71 tag-link-position-32" style="font-size: 20.188235294118pt;" aria-label="レスポンシブ (10個の項目)">レスポンシブ</a>
<a href="https://cocohp.com/wp/tag/%e3%83%ac%e3%83%83%e3%82%b9%e3%83%b3/" class="tag-cloud-link tag-link-95 tag-link-position-33" style="font-size: 14.588235294118pt;" aria-label="レッスン (4個の項目)">レッスン</a>
<a href="https://cocohp.com/wp/tag/%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc/" class="tag-cloud-link tag-link-82 tag-link-position-34" style="font-size: 8pt;" aria-label="ロールオーバー (1個の項目)">ロールオーバー</a>
<a href="https://cocohp.com/wp/tag/%e4%bd%9c%e5%93%81/" class="tag-cloud-link tag-link-55 tag-link-position-35" style="font-size: 8pt;" aria-label="作品 (1個の項目)">作品</a>
<a href="https://cocohp.com/wp/tag/%e4%bd%9c%e8%a1%a8/" class="tag-cloud-link tag-link-88 tag-link-position-36" style="font-size: 8pt;" aria-label="作表 (1個の項目)">作表</a>
<a href="https://cocohp.com/wp/tag/%e5%88%9d%e5%bf%83%e8%80%85/" class="tag-cloud-link tag-link-93 tag-link-position-37" style="font-size: 8pt;" aria-label="初心者 (1個の項目)">初心者</a>
<a href="https://cocohp.com/wp/tag/%e5%88%9d%e7%b4%9a/" class="tag-cloud-link tag-link-106 tag-link-position-38" style="font-size: 20.847058823529pt;" aria-label="初級 (11個の項目)">初級</a>
<a href="https://cocohp.com/wp/tag/%e5%8b%95%e3%81%8d/" class="tag-cloud-link tag-link-75 tag-link-position-39" style="font-size: 8pt;" aria-label="動き (1個の項目)">動き</a>
<a href="https://cocohp.com/wp/tag/%e5%ad%a6%e7%94%9f/" class="tag-cloud-link tag-link-54 tag-link-position-40" style="font-size: 10.964705882353pt;" aria-label="学生 (2個の項目)">学生</a>
<a href="https://cocohp.com/wp/tag/%e6%ae%b5%e8%90%bd/" class="tag-cloud-link tag-link-104 tag-link-position-41" style="font-size: 8pt;" aria-label="段落 (1個の項目)">段落</a>
<a href="https://cocohp.com/wp/tag/%e7%94%bb%e5%83%8f/" class="tag-cloud-link tag-link-83 tag-link-position-42" style="font-size: 8pt;" aria-label="画像 (1個の項目)">画像</a>
<a href="https://cocohp.com/wp/tag/%e7%b7%b4%e7%bf%92/" class="tag-cloud-link tag-link-94 tag-link-position-43" style="font-size: 21.341176470588pt;" aria-label="練習 (12個の項目)">練習</a>
<a href="https://cocohp.com/wp/tag/%e7%bd%ae%e6%8f%9b/" class="tag-cloud-link tag-link-84 tag-link-position-44" style="font-size: 8pt;" aria-label="置換 (1個の項目)">置換</a>
<a href="https://cocohp.com/wp/tag/brush-up/" class="tag-cloud-link tag-link-114 tag-link-position-45" style="font-size: 8pt;" aria-label="資格取得 (1個の項目)">資格取得</a></div>
</div><div id="search-4" class="ashe-widget widget_search"><form role="search" method="get" id="searchform" class="clear-fix" action="https://cocohp.com/wp/"><input type="search" name="s" id="s" placeholder="Search..." data-placeholder="Type &amp; hit Enter..." value="" /><span class="svg-fa-wrap"><i class="fa fa-search"></i></span><input type="submit" id="searchsubmit" value="st" /></form></div><div id="text-4" class="ashe-widget widget_text">			<div class="textwidget"><p><strong>「WEBデザイナーの教科書」</strong>は、どなたでも、自由に閲覧使用していただけるように、公開しています。WEBに携わる方・教育の現場などお気軽にお使いください。</p>
</div>
		</div><div id="custom_html-3" class="widget_text ashe-widget widget_custom_html"><div class="widget-title"><h2>座右の銘</h2></div><div class="textwidget custom-html-widget"><a href="/profile/">努力すれば夢は叶う</a></div></div></div>
			<div class="footer-copyright">
								
				<div class="copyright-info">Copyright © 2017 Webデザイナーの教科書 Co.,Ltd. All Rights Reserved.</div>	
				
				<nav class="footer-menu-container"><ul id="footer-menu" class=""><li id="menu-item-6713" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6713"><a href="https://cocohp.com/wp/about/">このサイトについて</a></li>
<li id="menu-item-6706" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6706"><a href="https://cocohp.com/wp/curriculum/">カリキュラム概要</a></li>
<li id="menu-item-6708" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6708"><a href="https://cocohp.com/wp/%e5%80%8b%e4%ba%ba%e6%83%85%e5%a0%b1%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/">個人情報について</a></li>
<li id="menu-item-6709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6709"><a href="https://cocohp.com/wp/profile/">座右の銘</a></li>
<li id="menu-item-6707" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6707"><a href="https://cocohp.com/wp/contact/">お問い合わせ</a></li>
</ul></nav>
		<div class="footer-socials">

			
			
			
			
			
			
			
			
		</div>

				</div>

			</div><!-- .boxed-wrapper -->

		</footer><!-- #page-footer -->

	</div><!-- #page-wrap -->

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/wp\/*"},{"not":{"href_matches":["\/wp\/wp-*.php","\/wp\/wp-admin\/*","\/wp\/wp-content\/uploads\/*","\/wp\/wp-content\/*","\/wp\/wp-content\/plugins\/*","\/wp\/wp-content\/themes\/pro\/*","\/wp\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="text/javascript" id="contact-form-7-js-extra">
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/cocohp.com\/wp\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
/* ]]> */
</script>
<script type="text/javascript" src="https://cocohp.com/wp/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.1" id="contact-form-7-js"></script>
<script type="text/javascript" id="toc-front-js-extra">
/* <![CDATA[ */
var tocplus = {"visibility_show":"\u8868\u793a","visibility_hide":"\u975e\u8868\u793a","width":"Auto"};
/* ]]> */
</script>
<script type="text/javascript" src="https://cocohp.com/wp/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509" id="toc-front-js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=6LcG7vcqAAAAALyVvyUFq-M64UzZbvIQsA4WhZxv&amp;ver=3.0" id="google-recaptcha-js"></script>
<script type="text/javascript" src="https://cocohp.com/wp/wp-content/themes/pro/assets/js/custom-plugins.js?ver=3.5.2" id="ashe-plugins-js"></script>
<script type="text/javascript" src="https://cocohp.com/wp/wp-content/themes/pro/assets/js/custom-scripts.js?ver=3.5.2" id="ashe-custom-scripts-js"></script>
<script type="text/javascript" src="https://cocohp.com/wp/wp-content/themes/pro/prism/prism.js?ver=20190124" id="app_prism-js"></script>
<script type="text/javascript">
( function( grecaptcha, sitekey ) {

	var wpcf7recaptcha = {
		execute: function() {
			grecaptcha.execute(
				sitekey,
				{ action: 'homepage' }
			).then( function( token ) {
				var forms = document.getElementsByTagName( 'form' );

				for ( var i = 0; i < forms.length; i++ ) {
					var fields = forms[ i ].getElementsByTagName( 'input' );

					for ( var j = 0; j < fields.length; j++ ) {
						var field = fields[ j ];

						if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
							field.setAttribute( 'value', token );
							break;
						}
					}
				}
			} );
		}
	};

	grecaptcha.ready( wpcf7recaptcha.execute );

	document.addEventListener( 'wpcf7submit', wpcf7recaptcha.execute, false );

} )( grecaptcha, '6LcG7vcqAAAAALyVvyUFq-M64UzZbvIQsA4WhZxv' );
</script>

</body>
</html>