[B! CSS] Meguromanのブックマーク

CSS(スタイルシート)の基本、小技、テクニック総まとめ

CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセットブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。方法は色々ありますが、個人的には一番

Meguroman 2013/03/25

リンク

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレームまとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

Meguroman 2012/10/25

リンク

[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。

第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<

Meguroman 2012/08/28

テーブル、表組みの参考になる。

CSS

リンク

CSSスプライトについてあれこれ。

「CSS Sprites（CSSスプライト）」についてまとめます。すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

Meguroman 2012/08/24

リンク

http://blog.e-riverstyle.com/2009/08/csscss-19.html

Meguroman 2012/08/13

リンク

csspop.com

This domain is registered at Dynadot.com. Website coming soon. csspop.com 2024 著作権. 不許複製プライバシーポリシー

Meguroman 2012/07/30

リンク

CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ

年末に、オンラインブックマークでたまってしまいがちな「あとで読む」とか、「一応保存」とかを整理することにしました。そしたら、同じような内容や機能のWebサービスのページをいくつもブクマしてることに気づいてしまいました。そこで、似たようなものは自ブログにまとめて少しブクマ数をスッキリさせることにします。で、実はあんまり使ってないけどいざって時にあると助かる「スクリプトの圧縮＆デコードツール」をまとめてみたいと思います。まずは圧縮編から。ファイルの改行やインデントを無くしたりしてファイルサイズを軽くするツール私がやるような規模の案件ではまず使うことはないのだけど、サイト規模が大きくなるとこういう配慮も必要なのかも。やってることはどのサイトでも一緒なので、各自見やすい・使いやすいと感じるやつを選んでいただければよろしいかと。 CSS編 CSS Compressor 圧縮度合いを4段

Meguroman 2012/06/01

ソースコード圧縮ツール

リンク

ホームページ作成 - ロールオーバー～全てのボタンを１枚の画像にして移動させる～ - WEBサイト作成　フリー素材コード　の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

ロールオーバー　全てのボタンを１枚画像にして移動するマウスが上に来た時に、別々の画像では無く、全てのボタンを１枚の画像にして、表示位置を移動させてロールオーバー効果を出す方法です。 ↑この１枚の画像と、対応する項目部分とで、それぞれ表示位置を指定して表示させ、マウスが上に来た場合に下の対応する部分の画像を表示させる事になります。１枚の画像なので、別々の画像で行う場合とは違い表示しない画像で先に読み込む必要がありません。ここでは、javaを使用しない方法になります。リスト（<ul>～</ul>）で作成したメニューの各項目のリンクの背景に画像の対応する上の部分を表示し、マウスが上に来た時に背景画像を対応する場所まで移動させて下半分を表示する方法です。よって、画像の作りも上半分に最初に表示する画像、下半分に後の画像、という様に作りましょう。半分の画像の高さと幅が下記の様に作成されてま

Meguroman 2012/05/31

CSSスプリットの解説

リンク

CSS Tools: Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here a

Meguroman 2012/05/28

css

リンク

re-dzine.net situs togel online toto 2023 -

By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

Meguroman 2012/05/10

リンク

http://www.mozilla-japan.org/css/base/content.css

/* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup ) */ /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */

Meguroman 2012/05/08

CSSプロパティの記述順-mozilla式（モジラ）

css

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

Meguroman 2012/04/18

リンク

Webサイトの基本要素見出し・リスト・引用文のスタイルを整える

2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa

Meguroman 2012/04/18

リンク

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。見出し(Headline)のサンプル集色やボーダーサイズ等の装飾部分はお好みで編集してください。見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

Meguroman 2012/04/18

リンク

コーディングのスピードを上げる為の6つの方法

2017年7月25日 Webサイト制作, 便利ツール今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化するこれは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出すレイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング表示確認うまく表示できない箇所の修正ヘッダー内のHTMLマークアップ CSSでヘッダー内の