ホームページやブログを作成するとき、フォントって意識してますか？フォントを変えるだけでサイトのイメージががらりと変わりますよね。 フォントの種類を変更するには、font-familyを使います。ただ、font-famil…
@font-faceでWEBフォントを設定する方法
共用SSLを利用してCSSや画像がロードされなくなった時の対処法
お問い合わせフォームなどでメールアドレスや住所を入力してもらう場合、平文で送信すると内容を傍受されてしまう可能性もあります。 そこで送信内容を暗号化して送ることができるのですが、その暗号化プロトコルのことをSSLといいま…
角丸やグラデーションも楽々！CSSだけで作るボタンが簡単に作成できる「CSS Button Generator」
※2018/03/05追記 残念ながら、CSS Button Generatorはサービス終了してしまったようです。 WEBサイトを作成していてボタンを設置したいことって結構あると思います。画像で設置する方も多いと思いま…
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の作成がちょっと面倒で…
[CSS]要素を柔軟に配置するプロパティ「position」
![[CSS]要素を柔軟に配置するプロパティ「position」](https://techmemo.biz/wp-content/uploads/2012/12/css-position.jpg "[CSS]要素を柔軟に配置するプロパティ「position」")
要素の配置を決めるプロパティに「position」というものがあります。positionプロパティに指定できる値には、以下のようなものがあります。 static 特に配置方法を指定しない（初期値） relative 相対…
[CSS]セレクタの優先順位まとめ
![[CSS]セレクタの優先順位まとめ](https://techmemo.biz/wp-content/uploads/2012/12/a1640_000024_m.jpg "[CSS]セレクタの優先順位まとめ")
CSSセレクタの優先順位について、まとめてみました。 セレクタの優先順位にはいくつかルールがあります。それぞれのルールについて説明していきます。 後から記述した内容が優先される クラスよりIDの方が優先される より詳細に…
[CSS]疑似要素と疑似クラスを使ってさらに細かくスタイルを指定する
![[CSS]疑似要素と疑似クラスを使ってさらに細かくスタイルを指定する](https://techmemo.biz/wp-content/uploads/2012/12/a0001_016984_m.jpg "[CSS]疑似要素と疑似クラスを使ってさらに細かくスタイルを指定する")
疑似要素と疑似クラスを使うと通常よりもさらに柔軟にスタイルを変更することができます。疑似要素と疑似クラスってなんだ？となるかもしれませんが、私の乏しい表現力ではうまく説明できる気がしないので、実際にCSSを見てもらう方が…
[CSS]ちょっとだけ複雑なセレクタの指定方法
![[CSS]ちょっとだけ複雑なセレクタの指定方法](https://techmemo.biz/wp-content/uploads/2012/12/selector-css.jpg "[CSS]ちょっとだけ複雑なセレクタの指定方法")
ちょっとだけ複雑なセレクタの指定方法には、下記の4パターンがあります。 a,b（複数のセレクタをカンマで区切る） a b（複数のセレクタを半角スペースで区切る） a>b（複数のセレクタの間に>をつける） ab…