[B! css] ohsugaのブックマーク

CSS3で何が実現できるかがわかるジェネレータ – creamu

CSS3で何ができるかを知りたい。そんなときにおすすめなのが、『CSS3 Generator』。CSS3で何が実現できるかがわかるジェネレータです。 border-radiusやbox-shadowなど、CSS3の様々なプロパティーをセレクトボックスから選んで、プレビューすることができます。数値を変えられるのと、コード表示、ブラウザ対応表示もあるので、とても便利ですね。ぜひ見てみてください。 CSS3 Generator 申告を無事終えました。やっと解放された。。今年は帳簿付けは自分でやって、決算のときだけ税理士に頼もうかな。

ohsuga 2010/03/16

リンク

知っておいたほうが良いCSS3テクニック「CSS3 Techniques You Should Know」

TOP > WebDesign , WebService > 知っておいたほうが良いCSS3テクニック「CSS3 Techniques You Should Know」 CSS+XHTMLでのコーディングスタイルが主流になってかなり建ちますが、さらに新しい、CSS3という言葉も最近は耳にするようになってきました。CSS3を使えば、今まで画像でしかどうしても表現できなかった部分等もコードで実装可能になりますが今日はそんなCSS3のテクニックをあつめたエントリー「CSS3 Techniques You Should Know」を紹介したいと思います。グラデーション表現や、ドップシャドウなどなど、いままでどうしても画像に頼っていた部分がかなり解決されるみたいです。紹介されているものノン蚊からいくつかピックアップして紹介したいと思います。詳しくは以下 ■Drop Shadows ドロッ

ohsuga 2010/02/07

リンク

とっても使えるoverflowプロパティ。その使い方色々。

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。あんまoverflowプロパティを使った事が無い方は、ビックリですよ！これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけどサンプルとかは以下よりどうぞ。サンプルサイトを見るサンプルをダウンロード基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使うまずは以前の「clearfixを使わないでやるに

ohsuga 2009/11/06

画像への回り込みなどを制御するtips。印刷とは相性が悪いらしいので注意。

リンク

IEが有るから助かってるって思えるかもしれないお話

何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」とか、思うっすよね。ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。ぇーまぁそんな訳で、明日からIEが一切なくなったとして。「3番目のグローバルナビだけちょっと指定変えてもらえる？」と、言われて、『class追加するのやだなぁ』ってのが、「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」って言われてしまったり。「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」と、言われて、『最初のh3だけclass追加しないとい

ohsuga 2009/07/06

リンク

CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」

TOP > WebDesign > CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」 Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。 Beautiful CSS buttons with icon set 立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。詳しくは以下 ■How to make sexy buttons with CSS 立体的で角丸のスタンダードなボタン。

ohsuga 2009/05/29

リンク

ke-tai.org > Blog Archive > Perl用の3キャリア対応CSS変換モジュール「HTML::MobileJpCSS」

Perl用の3キャリア対応CSS変換モジュール「HTML::MobileJpCSS」 Tweet 2009/1/15 木曜日 matsui Posted in 全キャリア対応 | No Comments » Perl用の3キャリア対応のCSS変換モジュール「HTML::MobileJpCSS」がリリースされたとのことです。 →　komoriyaのはてなダイアリー　3キャリア対応のCSS変換モジュールHTML::MobileJpCSS [d.hatena.ne.jp] →　CPAN　HTML-MobileJpCSS-0.01 [search.cpan.org] ドコモのCSSは、ヘッダ部への記述や外部CSSの利用ができないという困った仕様ため、ページの作成には非常に苦労します。これらを解決するには、Perlでは「HTML::DoCoMoCSS」、PHPでは「HTML_CSS_Mobile」

ohsuga 2009/01/16

リンク

IE6で閲覧すると。

hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。って言ってたので、CSS HappyLifeでやってみた。ボクが出来る2008年最後の大仕事でした。えぇ。使いたい方は是非是非。ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。であ。 16日のお昼頃追記ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％

ohsuga 2008/12/16

リンク

[ CSS ] pre でも改行を生かしたまま折り返す

pre 要素で囲んだ一行が長い場合、親要素の幅に収まりきらず、スクロールバーが出てしまいます。なんとか親要素の幅内で収めたい。で、適当な位置で改行するように、 pre { overflow: auto; white-space: normal; } なる CSS を追加したのですが、今度は、私が追加した任意の改行まで無くなってしまいました。調べてみると、下のようなコードを追加すると、改行を生かしたまま折り返してくれます。 pre { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word;

ohsuga 2008/12/09

css
tips

リンク

今よりちょっとだけクオリティを上げるために。

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？よく分か

ohsuga 2008/09/20

リンク

auとソフトバンクの外部CSSを切り替えるMobile CSS Switcher 携帯サイトを作ろう！　-ちょっと詳しいモバイルサイトの作り方-

auとソフトバンクの3G端末は外部CSSを読み込むことで、豊富な表現が可能になっています。（ドコモはダメ）ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、 3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。まず、どのような設計にするかというと、・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlin

ohsuga 2008/08/27

リンク

CSSで実現するアコーディオン「Concertina menu」

最近ではスクリプトでHTML上でも様々な動きを実現できるようになっていますが、今日紹介するのはスクリプトを一切使わずCSSのみで実現するアコーディオン「Concertina menu」です。上記の画像は投じている時の状態です。スクリプトのような滑らかな表現みたいな所はさすがに実現は出来ませんが、見事にアコーディオンをCSSのみで実現しています。詳しくは以下 ↑開いている時のスクリーンショットアコーディオン部分にはテキスト以外の要素も自由に配置することができます。動作環境は、IE6, IE7, Firefox, Opera, Safari(PC)となっています。スクリプト以外でこういった仕掛けをしたいかたは一度試してみてはいかかでしょうか？ソースは今の所パッケージでは公開されていなく、zipファイルで欲しければ、メールをくださいと書かれていますので、どうしても気になった、もしくは実装

ohsuga 2008/07/02

css

リンク

シンプルなCSSテンプレートセット「CSS Layout Cheats」

Designdevelopでは「代表的な12のCSSレイアウトテンプレートを配布する「Nice and Free CSS Templates」」など、何度かお伝えしているCSSのシンプルテンプレート集ですが、今回紹介するのもそんなシンプルなCSSのレイアウト集「Nice and Free CSS Templates」です。標準的なレイアウトが12個用意されていて、1カラムから4カラムまで、センター配置からFluidまでと、様々なCSSによるレイアウトが配布されています。詳しくは以下ソースはページ自体にCSSが記述されていますので、ダウンロードするか、レイアウトのサムネイルをクリックした後に表示されるレイアウト個別ページの「View sorce」と言うテキストリンクから参照することができます。レイアウトだけなので、デザインは起こさなくてはいけませんが、ベースがあるだけでも大部変わって

ohsuga 2008/07/01

リンク

CSSで組むことのメリットとか

テーブルレイアウトじゃなく、正しいHTMLとCSS使ってサイトを作ることのメリットって何だろー？そんな事をたまに思いつつ、古いサイトの修正を依頼されて、ソースを覗いて、ガチテーブルだとものすごいテンションが落ちるので、それだけとってもCSSはいいんすよ！とか思うけど、もうちょっとだけ考えてみたりググってみたのです。とりあえず、内容被り気味だけど以下のようなのがあると思う！ソースがとてもシンプルになる。容量が軽くなる。エコなんです！っていう表現も使える。大規模サイトならトラフィック軽減になるぽい。ちょっとCSSを編集すれば、サイト全体の修正が出来る。メンテナンス性が向上する。 HTMLを変えなくてもデザインをガラッと変える事ができたりする。あんまり考えてなくても、アクセシビリティ面がよくなる。デザイン要素が邪魔な人は切れる。テキストエディタオンリーでもいける。今後表現