サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

WEB

【CSS】ローディングアニメーションの実装例3パターン(CSSのみ)

データの読み込みが完了するまで表示される、クルクル回るアレ。皆さんも目にしたことがあるかと思います。

今回は、そのローディング(待機状態)アニメーションをCSSだけで実装する方法をご紹介します!

具体的には、記事のサムネイルに掲載されている3種類のローディングアニメーションを作っていきます。

【JavaScript】スクロールで現れる要素の実装方法(素のJS)

Webページを下にスクロールさせていくと、スクロールが要素に達するタイミングでフワッと要素が現れる…といった動きのあるWebデザインをよく見かけますよね。

今回は、それを素のJavaScriptで実装する方法をご紹介します!

【超簡単!】CSSとJavaScriptでトグルスイッチを作ろう!

この記事では、ONとOFFの切り替えに使われるトグルスイッチを実装する方法と、より自然なスイッチに見せるためのコツをご紹介しています!

【SVG不要!】CSSとJavaScriptで円を描くアニメーションを作ろう!

直線が引かれるアニメーションは比較的簡単に実装できるのですが、直線ではなく曲線…たとえば円を描くようなアニメーションは意外と面倒くさいです。

円を描くアニメーションは、SVGデータを使って破線を伸ばしていく方法もあるのですが、SVGのデータを用意するのってちょっと面倒くさいですよね。

ということで今回は、CSSとJavaScriptのみで円を描くアニメーションを作ってみたいと思います!

【JavaScript】見やすくて実践的なカウントダウンタイマーを作ってみよう!

たとえば3分間のタイマーを実装したい場合、単純に180から数値がマイナスされるだけでは非常に見づらいですよね。

この記事では、カウントを分と秒に分けるなど表示方法を工夫して、より見やすいタイマーを実装していきます。

【HTML】img要素のalt属性に関する、よくある3つの勘違い

『alt属性には単に画像を説明する文章を指定すればよい?』
『alt属性はSEO対策に重要?』
『全ての画像にalt属性を指定しないといけない?』

このような認識が全て間違っているというわけではありませんが、中には正確とも言い難いものも含まれています。
alt属性の意味・役割をしっかり理解して、よりアクセシビリティに優れたWebページにしていきましょう!

【JavaScript】オブジェクトの配列データをリストに展開する方法

この記事では、idと名前(name)がセットになったオブジェクト型のデータの配列を、一つ一つ取り出して展開し、リストに表示する方法について解説しています。

【CSS】カスタムプロパティとは?CSSで変数を利用しよう!

プログラミングでお馴染みの変数ですが、CSSでもカスタムプロパティ(CSS変数)として扱うことが可能です。

この記事では、カスタムプロパティの使い方と注意点、少し応用的な使い方について解説しています。

【JavaScript】スコープって何?変数にアクセスできる範囲

『変数を宣言しているのにアクセスできない!?』というエラーに遭遇したことはありませんか?
そのエラーの原因は、スコープによるものかもしれません。

この記事では、変数を参照できる範囲であるスコープについて解説しています。

【簡単!】HTMLファイルでKindleに出版する方法【電子書籍出版】

電子書籍を出版できるサービスの中でも知名度の高いKindle。実はKindleではHTML形式のファイル(.html)でも出版することが可能です。

この記事ではHTML(CSSやXMLも含む)でKindleに出版する方法をご紹介します。