昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
擬似クラスと間接セレクタを使って汎用性のある角丸テーブル | バシャログ。
洗濯すると雨の降るhakoishiです。 今回は汎用的に使える角丸テーブルのソースをご紹介。 border-radiusに合わせて、IE9以上の対応です。 サンプル まずはサンプル。 この5種類です。 theadなし、tbody左行がth。 theadあり。tbodyはthなし。 theadあり。tbody左行がth。 thead複数行、セル結合あり。tbody左行がth。 theadあり。tbody左行がth。tfootあり。 サンプルページ 擬似クラスと間接セレクタを使って汎用性のある角丸テーブル お約束 tbodyを必ず入れる tfootを入れる場合、tbodyの上部へ 上記の点だけ注意すれば、テーブルや内部のセルへのクラスの付与は不要です。 CSS table { /* 上、左にborder */ width: 100%; border-collapse: separate; /*
CSS3 で二重丸を作る｜TechRacho by BPS株式会社
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
IE6からでも角丸に。CSS3を使わずJavaScriptでやります。 - Shinichi Nishikawa's
CSS3で角丸、便利なんですけど、IEは9でも無視ですから、使えません。 なので、こちらを使って丸くします。 CurvyCorners http://www.curvycorners.net/ 使い方は、ダウンロードしてきたcurvycorners.jsを読み込んで、下記のように<head>に書きます。 読み込み <script type="text/JavaScript" src="curvycorners.js"></script> 設定 <script type="text/JavaScript"> addEvent(window, 'load', initCorners); function initCorners() { var settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
