かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト -Milky Effect
テキストにtext-shadow、背景に美しいlinear-gradientを効果的に使い、かわいらしいエフェクトに仕上げたスタイルシートを紹介します。 Milky Font Effect 実装は簡単で、コピペで利用できます。 HTML p要素などに、classを添えておきます。 <p class="milky">美しい日本語</p> CSS エフェクトの大切なポイントは「text-shadow」と「background」、カラーを変更しても面白そうですね。 .milky { font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;; text-transform: uppercase; display: block; font-size: 72px; color: #f1ebe5; text
Transparent Background Images | CSS-Tricks
There is no background-opacity property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } Psst! Create a DigitalOc
CSS3でボックスの角にベベル（丸くないborder-radius）をかける方法
CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね？ でも、ベベル（丸くない border-radius）を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました！ ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 考え方 この方法では 4つの background-image を使います。 まず最初に、background-size を使って背景を4等分します。そして、それぞれの角から斜めの線形グラデーションで、透明を塗りこむことで角を見えなくするというのがこのからくりです。 この「等分すれは、複数のグラデーションを指定できる」というテクニックは、他にも応用できそうなので是非覚えておいてください。 スタイルはこんな感じです。実際に使う場合は、以下のク
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
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 本題 それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
【CSS】hrをCSSでオシャレにスタイリングする方法 ｜ KLUTCHE
仕切り線を入れたいけど無粋な線は嫌なものです。 CSSでちょこっと飾り付けをしてデザインのアクセントを付けてみます。 hr要素はセマンティックなサイト構築の観点からも有用ですので、オシャレさせて送り込んであげましょう。 デモ こんなのを作ります。半分くらいCSS3を使っているので、デモページはモダーンなブラウザでご覧ください。 デモページ 二重線 hr { border:0; border-bottom:medium double #999; } 立体的な線 hr { height:0; border:0; border-top:1px solid #ccc; border-bottom:1px solid #fff; } 点線 hr { border:0; border-bottom:1px dashed #999; } グラデーション hr { height:3px; border:0
画像不要CSSだけで作るテキストロゴデザインのTips
WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつかのおさらいなどを。 行間・字間で印象はぐっと変わるサイトトップのタイトルを画像ではなくh1タグなどで表示して文字として扱うのはSEO的効果がある！…とは限りませんが、ユニークな人名や店名、フレーズなどをサイトのタイトルとしたときには競合少ないんでタイトル+他のワードなどで検索されたときに多少の効果はあるんじゃないでしょうか。 Web fontもいちいちロードするのに時間がかかるというデメリットもありますが、日本語使わない英数字だけなら比較的ストレスなく使いやすいと思います。というわけで今回のサンプルに使うフォントは過去記事に書いたGoogle web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html