HTMLのonclick属性を使ってクリック時に処理をする方法

今回はHTMLonclick属性について解説をしていきます!

onclick属性では要素がクリックされたかどうかをイベントとして判断することが出来ます。

ただこのonclick属性について調べてみると、JavaScriptとも関係していて混乱する初心者の方もいるかもしれません。

この記事では、

・onclick属性とは
・HTMLとJavaScriptの関係
・onClick属性の使い方と使われる場所

について解説をしていきます。

具体的なサンプルや役に立つ記事なども紹介していくのでぜひご覧ください!

onclick属性とは

まずはonclick属性とは何かについて知っておきましょう。

onclick属性では、要素をクリックしたときに、どのような処理を行うかを設定することができます。

処理という言葉はHTMLだけでは聞かないなと思ったかもしれません。

このonclick属性はより複雑な処理をすることができるJavaScriptと一緒に使われることが多いです。

このonclick属性が設定された要素をクリックすることで、onclick属性に指定したJavaScriptの関数などが実行されるようになります。

HTMLとJavaScriptの関係

ここで一旦、HTMLJavaScriptの関係についておさらいしておきましょう。

基本的にはHTMLのみでWebサイト上のコンテンツは完成させることが出来ます。

そのコンテンツをアニメーションで動かしたり、ユーザーからの入力を取得したりするのがJavaScriptになります。

その中でユーザーからのクリックを取得するために使われるのがonclick属性になります。

ちなみに、HTMLで作られたコンテンツに装飾を行う目的で使われるのが、CSSになります。

JavaScriptについての概要についてはこちらの記事で解説しているので、ぜひご覧ください!

JavaScriptとは?初心者向けに概要や使い方をわかりやすく解説
更新日 : 2019年9月10日

onclick属性の使い方

それでは簡単にonclick属性がどのように使われるのかを見てみましょう。

今回はaタグでリンクのボタンを作り、そこにonclick属性を設定してみます。

こちらのコードをご覧ください。

実行結果

クリック後

このコードでは、aタグで作ったリンクにonclick属性を追加しました。

onclick属性には、js_alert()関数が設定されています。

このjs_alert()関数は、scriptタグで囲った部分で定義されています。

もちろん、アラートを出す以外にも、関数で定義されるものであればどのようなものでも指定することが出来ます。

JavScriptで動くアニメーションなどでクリックされたかどうかを判定する場合も、今回と同じようにonclick属性を使います。

onclick属性が使われる場所

今までで一通り、onclick属性が使われる場所について解説をしてきました。

このonclick属性がどのようなところで使われるかイメージがつきにくい方もいるかもしれません。

このonclick属性は先程解説したように、クリックで実行されるようなアニメーションに使われる他にも、フォームでエンターキーを押したときにも実行されます。

Googleなどの検索画面で検索を行う場合、マウスで検索ボタンをクリックする他にエンターキーで検索が始まると思うのですが、あの動きはonclickで再現することが出来ます。

高条件の案件獲得にはHTML以外のスキルも必要

ウェブサイト制作をするには今回解説したHTMLは学習必須ですが、それだけでは仕事の幅は狭く、何ページも制作しなければならないなどと量をこなす仕事しかできなくなってしまいます。

同時にCSSやJavaScript、WordPressなどの技術を身につけることで、単価の高い仕事や、案件数も多くなるためおすすめです。

HTMLのみとウェブサイト制作では仕事の量が全く違う

HTML/CSSのみとウェブサイト制作全般では案件数は約10倍ほど変わります。仕事を取り続けられるエンジニアになるために様々な技術を身につけていきましょう。

クラウドワークスでも以下のように複数スキルの習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

ウェブサイト制作に必要な具体的なスキルと学習手順はプログラミング学習診断アプリでも解説していますので見てみてください。

挫折せずにスキル習得をするには

これらの複数スキルを挫折せずに身につけるならプログラミングスクールでの学習がおすすめです。

独学だとエラーに詰まったり、プロのレベルやスタンダードがわからないため、「このまま独学を続けて仕事獲得できるようになるのかな?自分のコードの書き方や学習の方向性はあってる?」と不安になり、なかなか学習が進まないことがあると思います。

弊社「侍エンジニア塾」では、あなたの理想の生活やプログラミングを学ぶ目的をヒアリングさせていただいた上で、最適なカリキュラムや講師によるマンツーマンレッスンを行うため、しっかり本来の理想に繋がったプログラミング学習をすることができます。

無料体験レッスンでは、時間と場所に縛られずに働くために必要なスキルや、その学習手順などもお伝えします。オンラインでも受講可能なため、ぜひお気軽にお申し込みください。

無料体験レッスンへ申し込む

まとめ

この記事ではonclick属性の基本的な部分について、HTML寄りの解説を行ってきました。

基本的な部分については分かっていただけだでしょうか?

onclick属性を使いこなしていくためにはJavaScriptについての知識も欠かせません。

ぜひ紹介した記事で、JavaScriptについても学んでみてください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説