CSS3 を使ってグラデーションを表現したい場合 linear-gradient や radial-gradient を使いますが、細かいグラデーションを作成したい場合微妙に面倒だったりします。 Grad3 は、そんな面…
CSS3のグラデーションやボタンが楽々作成できちゃうWEBサービス「Grad3」
CSS3やHTML5のブラウザ対応状況を確認できる「Can I use…」
Can I use… は、CSS3 のプロパティや HTML5 のタグなどについて、ブラウザの対応状況を確認することができるWEBサービスです。 Can I use… の使い方 例えば、CSS3 …
CSS3で色や要素の透明度を指定する方法(rgbaとopacityについて)
CSSで背景などの色を変更する場合は、red や blue などの色の名前で指定したり、16進数のカラーコードで指定します。例えば、以下のような感じですね。 CSS3からは、これらの色に透明度を指定することもできるように…
Google Web Fontsを使っておしゃれに文字を装飾する方法
先日@font-faceでWEBフォントを設定する方法という記事をエントリーしましたが、サイトで使いたいフォントファイルを持っていないとか、もっと手軽に利用したいという方もいるかと思います。そんな方にはGoogle We…
[CSS] floatを使って親要素の高さがなくなってしまった時の対処法
![[CSS] floatを使って親要素の高さがなくなってしまった時の対処法](https://techmemo.biz/wp-content/uploads/2013/04/float-overflow.jpg "[CSS] floatを使って親要素の高さがなくなってしまった時の対処法")
要素を回り込みで表示させたい時に便利なfloatですが、floatで回り込みさせた要素の親要素に背景色や枠線をつけようとしたら高さがなくなってて思った通りにスタイルを指定できない、といった経験はありませんか？ 私もCSS…
@font-faceでWEBフォントを設定する方法
ホームページやブログを作成するとき、フォントって意識してますか？フォントを変えるだけでサイトのイメージががらりと変わりますよね。 フォントの種類を変更するには、font-familyを使います。ただ、font-famil…
共用SSLを利用してCSSや画像がロードされなくなった時の対処法
お問い合わせフォームなどでメールアドレスや住所を入力してもらう場合、平文で送信すると内容を傍受されてしまう可能性もあります。 そこで送信内容を暗号化して送ることができるのですが、その暗号化プロトコルのことをSSLといいま…
CSSだけで角丸のボタンを作成する方法
WEBサイトにきれいなボタンを設置したい場合、画像を使っている人も多いと思いますが、CSS3の登場によってCSSだけでも非常にきれいなボタンなどを作成することが可能になりました。 そこで、今回はCSSのみで角丸のボタンを…
[CSS]z-indexで要素の表示順位を変える
![[CSS]z-indexで要素の表示順位を変える](https://techmemo.biz/wp-content/uploads/2013/01/zindex.jpg "[CSS]z-indexで要素の表示順位を変える")
今回はpositionプロパティと密接に関係するプロパティについて投稿します。それは、z-indexです。z-indexは要素が重なった時の優先順位を指定するプロパティです。 positionプロパティを使って要素の配置…
画像をZIPにまとめてアップロードするとCSSスプライト用の画像とCSSを生成してくれるサービス「SpriteMachine」
※2017/03/10追記 SpriteMachineはサービス終了してしまいました。 WEBサイトを高速化したいときに避けては通れないのがCSSスプライト。でもCSSスプライトは画像の作成とCSSの作成がちょっと面倒で…