CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ｜Webpark
実は先日からできるだけ画像をたくさん使おうと心がけているわけですが、そんな時に役立ちそうな国内外のフリーフォト、無料写真素材サイトをたくさん集めてみました。 煩わしい登録がいらないお手軽なものを集めてみました。 写真素材 足成 私が最初にお世話になったサイトです。 プロ・フォト プロのカメラマンが撮影した写真だそうです。枚数は載っていませんがかなり多いと思います。 BEIZ Graphics Web 数はそんなに多くなさそうですが、写真のクオリティは高いと思います。サイズも3種類から選べて使いやすいです。 ソザイング 写真だけでなくアイコンやボタンなんかもあります。 2000ピクセル以上のフリー写真素材集 その名のとおり高解像度な画像が集められています。 フリー写真素材 Futta.NET こちらもかなり解像度は高めです。 Free Photos Bank こちらは英語のサイトになります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
