Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

HTML/CSS

HTML/CSSのアイコン

【HTML】動画を配置・自動再生する方法(iPhone対応)【video要素】

ただ画像を配置するだけのimg要素と比べ、動画を扱うvideo要素は気をつけるべき点も多く、専用の属性も多いのが特徴です。

といっても扱いが難しいというわけではないので、基本をしっかりマスターして動画素材をWebサイト作成に活かしていきましょう!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【CSS】@layerを使って複数のスタイルを調整・管理する方法

@layerについて

@layerでスタイルを調整することで、簡単に変更前の状態に戻せたり、複数の見た目の調整を1つのCSSファイルで管理できたりなどのメリットが得られます。

今回は、CSSの@layer(レイヤー)を利用してスタイルを調整する方法をご紹介します。

【CSS】paddingの指定で親要素をはみ出してしまう問題の解決(box-sizing)

box-sizingについて

padding=内側の余白というのはCSSの基礎ですが、内側の余白ならば余白が親要素をはみ出すことはない気がしてしまいます。
しかし、これは間違いです。

paddingが親要素からはみ出てしまった場合の対処法をご紹介します。

【HTML】canvas要素って何ができるの?学んだ方がいいの?

canvas要素の基本

HTMLのタグは使い方がシンプルで簡単なものが多いですが、canvasタグはやや扱いが難しい部類に入ります。

この記事では、『そもそもcanvasタグで何ができるのか?』『自分は学んだ方が良いのか?』そんな疑問にお答えします!

【CSS】height値を変えずに画像の縦横比を変える方法(aspect-ratio)

aspect-ratioについて

Webページには画像を配置することも多いですが、パソコンとスマートフォンで画像の縦横比を変えたい…という場合も多いですよね。
ですが、縦横比を計算してheightを指定するのも面倒です。

そこで、aspect-ratioを使ってheight値はautoのまま、画像の縦横比を変える方法をご紹介します。