cssだけでグラデーションのボタンを作る

グラデーションの背景やボタンは非常に綺麗ですが、 画像で作ってしまうと、色を変更したいときに面倒ですよね。 特にグラデーションのボタンなんかは、オンマウスで切り替わったりすると、 変更があったときにまた切替前と切替後で2枚作成しなければいけません。 でもこれがすべてCSSで指定してソースを変更するだけでいいので簡単ですね! OFF… ON!!! まずボタンはこ...
続きを読む

CSSで描く吹き出しや矢印のバリエーション

tc-1
最近吹き出しを使いことがあり、いくつか試しに作ったものがあったので紹介します! 今回は全て、borderを使わずに:before :afterで四角や丸を重ねて表現しています。 まず、丸い吹き出しにしっぽが生えたような吹き出しです。 これはすべて丸を使って作られています。 -- CSS -- #balloon-1 { position: relative; displ...
続きを読む

cssでメニューを固定表示させる

縦に長いサイトはスマホ表示にするとページが長くなってしまいます。 メニューがスクロールと一緒に流れてしまうと、メニューがある位置まで画面をスクロールさせないとならなくなるので、ユーザーにとって非常にページ移動がしづらいサイトになってしまいます。 そこで、ユーザビリティをよくするための方法としてはいくつか方法があります。 今回はメニューバーを常に画面に固定して表示する方法です。 ...
続きを読む

エクセルを使ってテーブルを作る方法

今月から開発に混ざってphpやcssの勉強を始めました。 その中で、エクセルで作られた表をサイト上にテーブルに組み直さなければならないときがありました。 エクセルのデータを入れると自動でHTMLに変換してくれるサイトもあるのですが、それを使うとイメージ通りに作ってくれないときがあります。 だからと言って、すべて手打ちしてしまうと時間がかかってしまい、とても効率が悪いです。 そこで、全自...
続きを読む