HTMLなら私、ライターのナナミです。ホームページ作成に必須の言語であるHTMLですが、どうすれば動作するのか、もしくはどうすれば動きのあるホームページを作れるのかでお悩みの方が、この記事にたどり着いたと思います。今回はそんなHTMLの「動き」についてをご紹介していきます!HTML自体の動作はどうすればいいのかHTMLの要素を動かすにはどうすればいいのかこの2点について理解して、HTMLの記述スキルを高めましょう。まとめHTMLの動作に必要なモノはたった2つHTML自体を動作させるために、難しい環境の用意などは必要ありません。HTMLはブラウザに諸々の設定が組み込まれているので、いつもホームページを閲覧しているブラウザさえあればOKだからです。HTMLの動作に必要なのはHTMLファイルブラウザの2つだけ。難しいことをしなくても、手軽に触れることができる言語なのです。HTMLが動作してくれない時のチェックポイントどうしてもHTMLが動作しない!というパターンはあんまりないのですが、表示が崩れたり、思っていた表示にならなかったりということはあると思います。このような場合、大体はHTMLの記述間違いです。下記のポイントをチェックしてみましょう。開始タグと終了タグがちゃんとあるか入れ子の構造が正しいかタグの中に全角スペースが入っていないか開始タグと終了タグがちゃんとあるかHTMLの基本の形は下記のように、開始タグと終了タグのセットになっています。-->ちゃんと終了タグが入っていないと、表示の崩れに繋がります。おかしいな?と思ったらチェックしてみましょう。入れ子の構造が正しいかHTMLはタグの中に更にタグを入れる「入れ子」構造で組み上げていきます。この入れ子の構造をミスってしまうと、表示の崩れや不具合に繋がります。-->間違った例の方は、タグの中に別の開始タグがあるのに、終了タグはタグの外にありますね。構造がきちんとなっているかどうか、崩れた箇所を確認してみましょう。タグの中に全角スペースが入っていないかこれが地味にあるパターンなんですが...タグの記述の中に全角スペースが入っていると、タグであると正しく認識してくれなくて表示崩れになってしまいます。-->パッと見で気付きづらい箇所ですが、これも要注意です。HTMLだけで「動き」は作れる?さて、ここからはHTMLに動きをつけて、ホームページをより素敵に仕上げていくためのお話をしていきましょう。あるフワッと出てくるみたいな動き、これはHTMLの要素を動かすことで実現していることがほとんどです。これはHTMLだけでは作ることができません。CSSやJavaScriptなど、他の言語と組み合わせることで実現することができます。過去、HTML4などの頃は、HTMLだけで文字を動かすなんてこともできていました。昔のホームページとかで、電光掲示板みたいに動く文字をご覧になった方も多いと思います。参考:文字を動かすタグ「marquee」のリファレンスしかしこのタグは、現行のバージョンであるHTML5では廃止されています。HTMLはあくまでも構造の整理に使う物になり、動きや見た目を整える役割はCSSに任せる形になったのです。今は基本的にHTMLと他の言語を組み合わせることで動きをつけていきます。具体的な例を見ていきましょう。シンプルに動かす「HTML×CSS」CSSはHTMLの要素を装飾する役割を持つ言語です。現行のバージョンであるCSS3は装飾に加え、簡単なアニメーションを作ることが可能になりました。具体的な例を見ていきましょう!ボタンボタンをマウスオーバーすると、ちょっとだけ動いてボタンが押されたようになる動作ってよくありますよね。あれはCSSだけで作られています。.2s;}ちょっとした動きですが、これだけでもホームページのクオリティがグッと上がりますね。出てくる下記のように要素がふわっと出てくる動きも、CSSで作ることができます。2019年7月30日くるっと一回転CSSを使えば、こんな風に要素をくるくる回すこともできちゃいます。細かく大胆に動かす「HTML×JavaScript」CSSだけでも動きは簡単に作れるのですが、「クリックしたら」という条件づけや、画面全体に関わる大胆な動きはJavaScriptが必須となります。いろんな例を見ていきましょう!クリックしたらアイコンが増えるJavaScriptでは「要素をクリックしたら」という条件をつけて動きを作ることができます。HTMLのタグをJavaScript側から書き足す事もできるので、下記のように街頭インタビューとかでよく見る投票みたいなものも作れちゃうのです。CodePen.0スライドを作るJavaScriptはHTMLを書き換えることもできるので、こんな感じのスライドを作ることもできます。slide();</script>これはとっても簡単な切り替わりだけのスライドですが、よくある横にスーッと動くスライドもJavaScriptで作ることができますよ!TOPへ戻るボタンJavaScriptは要素だけでなく、画面全体を動かす事もできます。最近よくある「TOPに戻る」を押すとページの一番上に戻るボタンなどは、この方法を使っているんです。CodePen.0詳しい解説は下記の記事をご覧ください!https://www.sejuku.net/blog/62930まとめHTMLの動作自体は難しいことではありませんが、要素を動かすとなると他の言語などとの組み合わせが必要です。そのため、HTMLだけでなくCSSやJavaScriptも勉強しようとよ言われているわけですね。今回紹介した動きは、CSSやJavaScriptでできることのほんの一部です。いろいろな組み合わせや方法を試して、素敵なホームページを作ってみてくださいね。TweetPocket「プログラミング、右も左もわからない...」という方にオススメ当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。