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

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]

コーディングする際に、何気なく重宝するコードがtableです。そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっ

ryster 2015/09/03

css

リンク

Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL

Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、﹃なんだ、ウィスラーのついでかよー﹄と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス

ryster 2014/12/24

リンク

ロールオーバーのいろいろなやり方

「やさしさゴシック」を使いたかっただけなんです！ "ロールオーバーのいろいろなやり方 - しるろぐ" http://ofsilvers.hatena blog.com/entry/rollover-codingRead less

ryster 2014/09/14

css

リンク

参考にしたいCSSでできるテーブルデザイン10選

こんにちは、工藤です。今回はテーブルデザインについて参考にしたいものを集めました。簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色

ryster 2014/08/25

css
table

リンク

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。今回は海外のサイトで知って目から鱗だった方法をご紹介します。基本的な設定上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。追記‥ 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg

ryster 2014/08/06

j

css

リンク

Kadoppe’s Blog

2017/02/24に開催された「日本発サービスのグローバルでの戦い方UX & Service Sketch #25」というイベントに参加した。

ryster 2014/02/06

css

リンク

スマートフォンサイト制作時に覚えておきたいCSS 15

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。また、タイトルでは﹁スマートフォンサイト制作時﹂としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

ryster 2014/02/05

リンク

HTML&CSS フロントエンド何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S

ryster 2014/01/26

html
css

リンク

これは凶悪……コーディングのヤバいバグ＆仕様　Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。LIGフィリピン支社代表のせいとです。コーディング中にバグやブラウザ仕様のせいで、﹁なんじゃこりゃアア﹂ってなること、皆さんありませんでしょうか。今回は、その中でもとりわけ﹁なんじゃこりゃアア具合﹂が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。第5位　IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな

ryster 2013/07/10

css

リンク

すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。

ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }

ryster 2013/02/26

css

リンク

CSSだけで幅を超えた文字列を...で省略する - Qiita

ある幅に合わせて文字列を省略したいときがありますが、レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }

ryster 2013/02/20

css

リンク

「Compass」、基礎から応用まで！ | 株式会社LIG

こんにちは、デザイナーの王です。今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。全くの初心者でも問題ありません！はじめに結論を言うと、CompassでCSSを書くと早い！見やすい！メンテしやすい！コード量がぐっと減る！一度使い出したら最後、もう元には戻れない！一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは﹁Sass﹂を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとはでは﹁Sass﹂とは何かと言うと、正式名称は﹁Syntactically Awesome Style Sh

ryster 2013/02/07

css

リンク

[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセットどのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセットベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ

ryster 2012/12/10

リンク

サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」:phpspot開発日誌

CSSrefresh - automatically refresh CSS files サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる﹁CSSreflesh﹂。 CSSでのデザインに注力したい場合、リロードが面倒ですが、1秒ごとにファイルの更新状態をチェックして更新されていたら反映してくれるというのがこのCSSreflesh。毎秒サーバへリクエストに行くので、本番環境では当然NGですが、開発中にCSSデザインを組む際には便利に使えそうです。ブラウザ上で即時反映されるようなツールもありますが、環境に応じてこうしたツールを使って効率化したいところですね関連エントリ Photoshopのグラデーションツールの操作感でCSSグラデーションを作れるツール CSSスプライト実装が誰でも簡単にできるツール﹁Spritebox﹂

ryster 2012/11/28

css

リンク

紙がペラペラめくれる感じの3Dドロップダウンメニュー「Makisu」:phpspot開発日誌

Makisu ~ CSS 3D Dropdown Concept 紙がペラペラめくれる感じの3Dドロップダウンメニュー「Makisu」。 Safari等のブラウザで見て頂きたいのですが、メニューが重力でペラッペラとめくれる様がいい感じです。殆どのブラウザで使えないのでアレですが、こういうものがどんどん出てきて技術の進歩を日々感じますね関連エントリ CSS3の3D Transf ormで3Dのホバーエフェクト実装例ピュアCSSでマリオを3D表示したデモ CSS3で3Dなクラウドを描く「CSS3D Clouds」 jQueryとCSS3を使った3Dのフォトスタック実装例

ryster 2012/10/29

css
3D

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

ryster 2012/10/23

css

リンク

立体的にブロック要素を別画面に切り替える超カッコいいデモ:phpspot開発日誌

Unfolding 3D Thumbnails Concept | Codrops 立体的にブロック要素を別画面に切り替える超カッコいいデモ。 Safariのみ対応のようですが、超カッコよくて何度も切り替えてしまうこと必至のデモが公開されています。 WEB製作者なら一度は見ておきたいデモだと思います。デモページとりあえず殆どのブラウザで使えるようになるのは何年後かは分かりませんが、iOS用のサイト等で活用するのもよいかもしれませんね。関連エントリ CSS3でシャレオツなリストを作るチュートリアル iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル

ryster 2012/09/03

css

リンク

画像一枚だけで写真を重ねたようにするチュートリアル | コリス

シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。重ねたエフェクトはホバー時にCSS3アニメーションします。デモページ ※ホバー時のアニメーションはFirefoxのみです。実装 HTML HTMLは非常にシンプルです。ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index

ryster 2012/06/06

css

リンク

[CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート

画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。デモページ [ad#ad-2] 実装 HTML 画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。 <div class="image_shine"> <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" /> <div class="hover_shine"></div> </div> CSS まずは、ラッパーのdiv要素のスタイルです。エフェクト用のdiv要素用の「position: relative;」がポイントです。 .image_shine{ width: 200px; height: 200px; margin: 30px auto; posit

ryster 2012/05/14

css

リンク

PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌

PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 2012年03月28日- tubalmartin/YUI-CSS-compressor-PHP-port GitHub PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 YUIというとJavaというイメージがありますが、PHPベースでお手軽に使えるのがこちら。残念ながらJavaScriptは対応していませんが、PHPコードでお手軽に圧縮できちゃうのは便利ですね以下のようなオブジェクト指向なコードで run してあげれば圧縮後の文字列が取得できます PHPなサイト内で動的にCSSを圧縮してインラインで出したい的なニーズに応えられます（圧縮で難読化しつつサイズを減らし、インラインで出すことでコネクション数を減らしてスピー

ryster 2012/03/28

css
php

リンク

はてなブックマーク

タグ

関連タグで絞り込む (23)

CSSに関するrysterのブックマーク (137)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス