position:fixed 固定時にアンカーリンクがずれるのを解決する
ヘッダーナビゲーションなどを固定するスタイルは良くみかけるデザインですよね。 ヘッダーをスクロールに追従させることで、ユーザーがわざわざページ上部に戻らなくてもすぐにナビゲーションにアクセスできるようになります。 スマホでの縦に長いページにはユーザービリティが向上する有用な手段です。また、ヘッダーナビゲーションにはメニューや検索フォームなど、重要な機能が含まれることが多いため、それらのアクセス性が向上します。 ヘッダーをページ上部に固定したり、下部にナビゲーションを固定するための方法にはposition:fixedを使って固定するのが一般的です。 position:fixedを使った時に手こずるのが、アンカーの位置がずれてしまう問題。 ページ内リンクにジャンプすると、リンク先が固定ヘッダーの下に隠れてしまいます。 See the Pen position:fixedでアンカーがずれる状態
Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい
明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ（Brightn
CSSのすごいアイデアから実用的なテクニックまで！スタイルシートの最新テクニックのまとめ
最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。 デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。 ※一部JavaScriptも必要最小限で使用しています。
スタイルシート(CSS) - 複数のセレクタで指定/ホームページマスター
HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。 複数のセレクタでCSSを指定することができます。 ■ 複数のセレクタをカンマで区切ってCSSを指定する 複数のセレクタをカンマで区切って同じスタイルを適用させることができます。 下の例は<p>～</p>、<div>～</div>、<span>～</span>内の 文字を赤色に適用させるように指定しています。1番目の外部ファイルは1行だけの記述ですが 2番目の外部ファイルの3行の記述と同じ効果があります。 外部ファイル p,div,span{color:red;} HTMLソース <p>pタグ内のこの文章は赤色になります。</p> <div>divタグ内のこの文章も赤色になります。</div> <span>spanタグ内のこの文
セレクタのグループ化｜CSSの基本｜CSS HappyLife ZERO
セレクタは、カンマ（,）で区切ることによってグループ化され、複数の要素に同じスタイルが適用できます。 #main table { margin-bottom: 1em; } #main ol { margin-bottom: 1em; } #main ul { margin-bottom: 1em; } #main dl { margin-bottom: 1em; } #main blockquote { margin-bottom: 1em; } #main pre { margin-bottom: 1em; } #main p { margin-bottom: 1em; } 上記のようにそれぞれの要素にmargin-bottom: 1em;の指定をしていたら手間もかかりますし、コードも長くなってしまいます。 そこで、同じスタイルを複数の要素に適用させる場合、グループ化をすることで見やす
【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話）
現在、（HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました。 では、どうなったかというと、その考え方はCSSに引き継がれています。 ブロック要素、インライン要素というHTMLの話ではなくて、 『その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。 つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。 HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。 見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたとい
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック
<div class="wrapper"> <div class="slides"> <div class="slide"> <div class="title">Pure CSS z-scrolling</div> </div> <div class="slide"> <div class="title">Slide 1</div> </div> <div class="slide"> <div class="title">Slide 2</div> </div> <div class="slide"> <div class="title">Slide 3</div> </div> <div class="slide"> <div class="title">Slide 4</div> </div> <div class="slide"> <div class="title">Slide
![[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c240a0c68b39f0eb21713fec05a4da0d2fa6b175/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063006.gif)
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まさとらん on Twitter: "意外と知らないのが多い。ちょっと試してみようかな…丨全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選 https://t.co/bAA2cPGugp"
CSS SANS
画像の保存を禁止する 〜CSSテクニック〜
GitHub、HTML5/CSS/JavaScriptによるアプリ開発フレームワーク「Electron 1.0」 