タグ

WebDesign CSS jpとあとで読むに関するshin_kamishiroのブックマーク (3)

  • position:fixed 固定時にアンカーリンクがずれるのを解決する

    ヘッダーナビゲーションなどを固定するスタイルは良くみかけるデザインですよね。 ヘッダーをスクロールに追従させることで、ユーザーがわざわざページ上部に戻らなくてもすぐにナビゲーションにアクセスできるようになります。 スマホでの縦に長いページにはユーザービリティが向上する有用な手段です。また、ヘッダーナビゲーションにはメニューや検索フォームなど、重要な機能が含まれることが多いため、それらのアクセス性が向上します。 ヘッダーをページ上部に固定したり、下部にナビゲーションを固定するための方法にはposition:fixedを使って固定するのが一般的です。 position:fixedを使った時に手こずるのが、アンカーの位置がずれてしまう問題。 ページ内リンクにジャンプすると、リンク先が固定ヘッダーの下に隠れてしまいます。 See the Pen position:fixedでアンカーがずれる状態

    position:fixed 固定時にアンカーリンクがずれるのを解決する
  • Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい

    明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です! フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ(Brightn

    Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい
    shin_kamishiro
    shin_kamishiro 2016/08/04
    おぉ便利ですね!もうすぐに使えるということでしょうか。 @WPJ_news #CSS3Filter #CSSフィルター Photoshop
  • スタイルシート(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タグ内のこの文

  • 1