ホーム > HTML+CSS

cssでハンバーガーメニューのアイコンを作成

ブログアイキャッチ画像028

read more

スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると3本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。
ただの3本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。
続きを読む»

CSSで画像のマウスホバーエフェクト

ブログアイキャッチ画像027

read more

マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。
続きを読む»

画像の上に文字列を表示する方法

ブログアイキャッチ画像024

read more

CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。

続きを読む»

CSS3で蛍光ペン風マーカー作成で気になったこと

ブログアイキャッチ画像021

read more

蛍光ペン風のマーカーをよく見ますし、私のブログでも使用しています。色々なパターンを作成していたら、Safariだと正常に表示されない場合がありましたので書き留めておきます。

続きを読む»

CSSでチェックボックスのサイズを変える方法

ブログアイキャッチ画像020

read more

スマートフォンなどではデフォルトサイズのチェックボックスだと押しにくいです。試行錯誤した結果なんとかサイズを変えられるようになりました。

続きを読む»

transitionの変化のタイミングを見て確かめます

ブログアイキャッチ画像015

read more

transition-timing-functionの値を変えることにより、アニメーションの変化のタイミングを変えることができますが、実際に見てみたいので見れるようにしました。

続きを読む»

marginとpaddingの書式って忘れやすいです

ブログアイキャッチ画像013

read more

今更ながら marginやpaddingなど複数の値を設定するときに、どこの場所の設定になるのか忘れるときがあります。

続きを読む»

CSS3で円形グラデーション

ブログアイキャッチ画像08

read more

前回に続きグラデーションのことを書きます。今回は円形グラデーションについてです。

続きを読む»

CSS3で線形グラデーション

ブログアイキャッチ画像07

read more

CSS3で簡単にグラデーションを作ることができるので、画像ファイルを使用しなくてよくなり、とても楽になりました。

続きを読む»

HTMLのテーブル(表)作成

ブログアイキャッチ画像06

read more

私は、しばらく表を作成していないとタグを忘れてしまいます。「th」、「tr」、「td」の3つのタグは覚えているのですが、それぞれの意味が分からなくなるので、書き留めておきます。

続きを読む»