CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2245872982c8e900d7bcc462d8385b1f0845ff9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット｜Web Design KOJIKA17
IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi
ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 - kojika17
最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit:
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URLのパラメータによって要素のスタイルを変更する方法 - Qiita
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
Furatto
Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies![Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4c5e88a0f20510caffcbe04a2c82643c871c41/height=288;version=1;width=512/https%3A%2F%2Fwww.digitalocean.com%2F_next%2Fstatic%2Fmedia%2Fsocial-share-default.e8530e9e.jpeg)
