【ちゃんと使えてる?】HTML5・CSS3の使い方HTML2018年06月15日WEBサイト制作に欠かせないプログラミング言語(マークアップ言語)といえばHTML・CSSですよね。現在は、HTML5・CSS3がリリースされており、HTML5とCSS3を使用してWEB制作するのが一般的な方法です。今回は、HTML5・CSS3の特徴などを紹介します。「HTML5・CSS3ってなに?」と疑問に思っている人は、ぜひ本記事を参考にしてください。HTML5の特徴HTML5の特徴は「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことです。以前までは、divタグで「header」、「footer」などをidの名称に指定して使用していました。現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになりました。これからはid名称に「header」、「footer」など指定するのではなく「header」、「footer」タグを使用するようにしましょう。id="main">メインです。id="footer">フッターです</div></body></html>「header」、「section」、「nav」、「footer」などにdivを割り当てているのが特徴です。HTML5ではこのようなdivの割り当てが不要になります。href="style.css"><title>テストです</title></head><body><header>ヘッダーです</header><nav><ul><li>リストです</li><li>リストです</li><li>リストです</li><li>リストです</li><li>リストです</li></ul></nav><main>メインです。<section>セクションです</section></main><footer>フッターです</footer></body></html>「header」、「section」、「nav」、「footer」などにdivを割り当てがなくなりました。こちらの方が検索エンジンWEBページの構造が伝わりやすくなります。検索結果の順位の変動にも影響する可能性もあります。HTML5の記述の方がシンプルで見やすくなったのが特徴です。記事・記事のコメント部分に使用するタグ。日時を示す箇所に使用しますHTML5は追加される要素があります。それとは反対に廃止される要素も要素もあるので、紹介します。フォントの大きさ・種類・色を指定するための要素ですHTLML5からはHTMLタグでfontを指定するのではなく、cssのfontプロパティで使用しますHTML5の特徴・追加される要素・廃止される予定の要素などを紹介しました。次はCSS3の特徴について紹介します。CSS3の特徴まずは、cssの基本的な役割について説明します。cssは、WEBサイトのデザインを整える機能を持っています。美しいWEBサイトに仕上げるためにはcssが必要です。cssには、css1・css2・css3の3つのバージョンがあります。バージョンが上がるにつれて、機能が追加されます。CSS3の機能css3は2011年に公開されました。今では、ほとんどのWEBサイトがcss3で制作されています。css3は以下のブラウザに対応しています。12css3には新たにこのような機能が追加されました。・グラデーショングラデーションは「linear-gradient」でグラデーションを適用できます。指定することが可能です。四角形の上部を白色・下部を黒色にグラデーションするとこのようになります。#000);">サンプル</div>デフォルトでは上方向からのグラデーションに設定されています。方向はこのように指定することもできます。#000);}また、このように%(パーセント)で割合をすることもできます。70%);}グラデーションは線形だけではなく、円形で指定することもできます。適用することが可能です。・角を丸くするcss3以前もborder-radiusを使って角を丸くすることができました。現在は、以前よりもより細かく設定できるようになりました。実際にサンプルコードを見てみましょう。border-radiusはこのように設定できます。角の丸み具合を変更することが可能です。上手にborder-radiusを使用することで、複雑な図形を表現することもできます。・ボックスに影のエフェクトをつけるボックスシャドウもcss3よりも以前のバージョンから使用することができました。css3では、より細かいところまでシャドウのエフェクトを設定することが可能です。値5(カラー):カラーの値サンプルコードを見てみましょう。inset;}シャドウのエフェクトはボックスだけでなく、テキストにも適用できます。rgb(0,0,255,0.4);}ボックスの角を丸くしたい・テキストにエフェクトを適用させたいという人には、「bad-company」というツールがおすすめです。このツールはカーソルを操作することで、直感的にボックスシャドウ・テキストシャドウのソースコードが生成されます。bad-companyURL:http://www.bad-company.jp/box-shadow/・ボックスのレイアウトflexboxを使用することでボックスレイアウトを変更することができます。以前はfloat設定することでレイアウトを変更するのが一般的でした。floatを設定すると要素が崩れることがあり、初心者が扱うには難易度が高いのが難点です。flexboxを使用すれば初心者でも簡単にレイアウトを変更できます。サンプルコードを使って解説します。flex;」を指定するだけで子要素が横に並びます。以下のサンプルコードのように子要素の並び順を変更することも可能です。column-reverse;}row・・・子要素を左から右に配置する(デフォルトの値)row-reverse・・・子要素を左から右に配置するcolumn・・・子要素を上から下に配置するcolumn-reverse・・・子要素を下から上に配置する要素を複数行に配置するには以下のコードを使用します。wrap-reverse;}nowrap・・・一行に配置する(デフォルトの値)wrap・・・上から下に複数行に配置するwrap-reverse・・・下から上に複数行に配置する子要素の配置間隔、子要素の配置開始位置を変更することも可能です。space-around;}flex-start・・・左から子要素を配置するflex-end・・・右から子要素を配置するcenter・・・真ん中から子要素を配置するspace-between・・・最初と最後の子要素を両端に配置、残りの要素は間隔を均等にあけて配置するspace-around・・・全ての子要素間隔を均等にあけて配置する子要素の垂直方向の並びを変化させるためにはこのようにコードを記述します。baseline;}stretch・・・親要素の高さまたは子要素の中にあるコンテンツの高さに合わせて配置する(初期値)flex-start・・・上部から配置する。flex-end・・・下部から配置する。center・・・中央に配置するbaseline・・・子要素の中にあるコンテンツのベースラインを基準に配置する・アニメーションアニメーションはその名前の通りcssで動きをつけることができます。動きを表現するのは、javascriptやjQueryなどが主流です。javascriptやjQueryなどは多様な表現、複雑な動きを表現できます。javascriptやjQueryはcssよりも難易度が高く、初心者には理解しにくいのが難点です。cssのアニメーションはtransitionやanimationなどを使用します。これらはOSやブラウザによっては表示されないこともあるので、注意が必要です。explorer・・・バージョン6・7・8・9は未対応、バージョン10・11は対応Chrome・Safariは一部未対応の部分もあるFirefoxには対応しているiOSの場合Safariは一部未対応の部分もあるAndroidの場合Chromeは一部未対応の部分もあるFirefoxには対応しているtransitionではこのようなプロバティを使用できます。設定できるbackground-color・・・背景色の指定ができる使用できるプロパティのごく一部を紹介しました。次はコードを描くには欠かせないエディタを紹介します。おすすめのエディタコード記述の生産性を飛躍的にアップさせるのがエディタです。使いやすいエディタを使用することで、スペルミスを防ぐこともできます。ここではおすすめのエディタを2つ紹介します。Textなシンプルなユーザーインターフェイスで初めて本格的なエディタを使用する人も簡単に使えます。その上、無料で使用することが可能です。無料で使用する場合は、保存する時にときどき購入を勧めるウィンドウが表示されます。拡張機能も充実しており、特におすすめなのが「Emmet」です。Emmetはコードを素早く記述するためのプラグインです。「!」と記述してからTabキーをクリックするだけでHTML5のひな形が生成されます。<title>Document</title></head><body></body></html>他にも[link]と記述してからTabキーをクリックするだけで以下のようなコードが生成されます。href="">Emmetは生産性を飛躍的にアップできるので、ぜひ使ってみてください。TextダウンロードURL:https://www.sublimetext.com/3Atom豊富な機能性を搭載しているエディタといえばAtomです。比較的新しいエディタで機能性の高さ、おしゃれなユーザーインターフェイスが人気を集めています。「パッケージ」と呼ばれる拡張機能を追加することで、自分に最適なエディタに仕上げることが可能です。Atomは、無料で使用することができます。現在、急激にユーザーを増やしているエディタなので、ぜひ使ってみてください。AtomダウンロードURL:https://atom.io/まとめ今回はHTML5&CSS3の解説とおすすめのエディタ2つを紹介しました。いかがでしたか?現在は、HTML5&CSS3が主流になっているので、コーディングする際はHTML5&CSS3を使うようにしましょう。コーディングの技術は日々進化しているので、常に情報を入手してスキルアップを目指しましょう。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。