【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 | スターフィールド株式会社
スターフィールド株式会社 > Blog > 制作 > css3 > 【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 jQueryを使うと、手軽にアニメーションを実装することができて、とても便利です。 しかし、jQueryによるアニメーションは処理がどうしても重くなります。 特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、 jQueryによるアニメーションがもっさりとした動きに感じることが多いのではないでしょうか。 jQueryのアニメーションは、通常CPU(コンピュータの総合的な演算装置)により処理されています。 CPUは元々画像処理だけに最適化されたものではない上に、アニメーションだけでなくコンピュータ全体の演算を担っているため、 CPUでアニメーション処理を行うとどうしても処理が遅くなっ
【初心者向けCSS】レスポンシブな tableを作ってみる | SONICMOOV LAB
お待たせしました！まりぞーですヽ(゜ω゜)ﾉ 今回は CSS 初心者向けです。 table タグがあるじゃないですか。 アレをレスポンシブな感じに実装していこうという内容です。 デモはこちら 使ったものは CSS と HTML とjQuery、そしてコピペです。 よろしくお願いします。 目次 そもそもレスポンシブってなんだっけ Media Queriesの使いかた HTML CSS IE8対応 共通項目 Media Queries まとめ そもそもレスポンシブってなんだっけ responsive 「よく反応する」という意味の形容詞です。 当記事ではブラウザのウィンドウ幅をぐにょんぐにょんいじるとなんか臨機応変に見た目が変わったり変わらなかったりするやつです。 基本的に CSS3 の Media Queries を用いる方法で進めていきます。 Media Queriesの使いかた HTML
3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.cssファイル、.jsファイルをgzip圧縮してみる
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
SASSIENCE ～ 世界が嫉妬するCSSへ