じゃんけんは勝敗条件がシンプルで分かりやすく、複雑な状態管理や計算を行う必要がない上に、当然ながらデータの永続保存も必要ありません。
初心者がつまずくポイントはほとんどないと言えるので、初心者がプログラミングを理解しながら作成するアプリとしては最適だと思います。
ということで、今回はReact Nativeでシンプルなじゃんけんゲームを作ってみたいと思います!
画像のスライダーは通常、ライブラリでサクッと実装することが多いかと思いますが、JavaScriptを学ぶことが目的の場合はあえて自力(素のJS)で実装してみるのもおすすめです。
そこで、今回はライブラリを頼らず、素のJavaScriptで画像のスライダーを実装する方法をご紹介します!
ただ画像を配置するだけのimg要素と比べ、動画を扱うvideo要素は気をつけるべき点も多く、専用の属性も多いのが特徴です。
といっても扱いが難しいというわけではないので、基本をしっかりマスターして動画素材をWebサイト作成に活かしていきましょう!
メニュータイトル(項目)をクリックすると、隠されていたメニューがアコーディオンが展開されるように現れるようなタイプのメニューを、アコーディオンメニューと言います。
メニュー項目の増減により要素の縦幅が変わっても大丈夫なアコーディオンメニューを、素のJSで実装する方法をご紹介します!
データの読み込みが完了するまで表示される、クルクル回るアレ。皆さんも目にしたことがあるかと思います。
今回は、そのローディング(待機状態)アニメーションをCSSだけで実装する方法をご紹介します!
具体的には、記事のサムネイルに掲載されている3種類のローディングアニメーションを作っていきます。
Webページを下にスクロールさせていくと、スクロールが要素に達するタイミングでフワッと要素が現れる…といった動きのあるWebデザインをよく見かけますよね。
今回は、それを素のJavaScriptで実装する方法をご紹介します!
この記事では、ONとOFFの切り替えに使われるトグルスイッチを実装する方法と、より自然なスイッチに見せるためのコツをご紹介しています!
直線が引かれるアニメーションは比較的簡単に実装できるのですが、直線ではなく曲線…たとえば円を描くようなアニメーションは意外と面倒くさいです。
円を描くアニメーションは、SVGデータを使って破線を伸ばしていく方法もあるのですが、SVGのデータを用意するのってちょっと面倒くさいですよね。
ということで今回は、CSSとJavaScriptのみで円を描くアニメーションを作ってみたいと思います!
たとえば3分間のタイマーを実装したい場合、単純に180から数値がマイナスされるだけでは非常に見づらいですよね。
この記事では、カウントを分と秒に分けるなど表示方法を工夫して、より見やすいタイマーを実装していきます。
『alt属性には単に画像を説明する文章を指定すればよい?』
『alt属性はSEO対策に重要?』
『全ての画像にalt属性を指定しないといけない?』
このような認識が全て間違っているというわけではありませんが、中には正確とも言い難いものも含まれています。
alt属性の意味・役割をしっかり理解して、よりアクセシビリティに優れたWebページにしていきましょう!