画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。CSSを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ／縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端な拡大や縮小は避けたい」など、画像サイズの自動調整に上限や下限を設けるCSSを解説。

クロスブラウザ対策 あなたはどんなブラウザをつかってこのページをみていますか？ InternetExplorer？ FireFox？Netscape？Safari？それともGoogleChrome？ あなたのつくったサイトは横組み、余白などをしっかり設定してますか？ あなたの環境ではマトモにみえたWEBデザインも、他人の環境でみたときには醜くバラバラに崩れているかもしれません。 IEのユーザーは60% , FireFoxのユーザーは15% …のようにそれぞれCSSに対する解釈が異なります。 どんなブラウザでみても同じようにみせる。それがクロスブラウザ対策です。 以下のTipsではできるだけクロスブラウザを意識した記述をしています。 それではどうぞ。 Reset CSS クロスブラウザ対策。 初期状態の表示差異をリセットする。 http://developer.yahoo.com/yui/r

ぼかし効果のサンプル 以下のような指定で簡単に画像にぼかし効果を入れることができます。 img{ -webkit-filter: blur(3px); filter: blur(3px); } See the Pen filter: blur(3px) by Saomocari (@Saomocari) on CodePen. その他の効果は以下のようなものがあります。 ぼかし / blur() 明度 / brightness() コントラスト / contrast() 彩度 / saturate() ドロップシャドウ / drop-shadow() グレースケール / grayscale() 色相 / hue-rotate() 階調の反転 / invert() 透明度 / opacity() セピア / sepia() SVG のfilter / url() CSS-Filters-Po

Flexbox Froggy is created by Codepip • YouTube • Twitter • GitHub • Settings Language Difficulty

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ

$('a[href^="#"]').click(function(){ var speed = 800, href = $(this).attr("href"), target = $(href === "#" || href === "" ? 'html' : href), position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); 冒頭にやつがいますね。[^="#"]さん。正規表現的な何かなのでしょうか。 ちなみに、jQueryのバージョンによっては#を""で囲まないと動作しないことがあるそうなので、私は無難に"#"としています。 「 ^= 」の名前はビット排他的論理和演算子 「^=」の部分で検索すると、「ビット排他的論理

ブラー（ぼかし）エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです！この「ぼかす」表現を「ブラー（blur）エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの？」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします！ なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜！ CS

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。 まずは、サンプルをご確認ください。 DEMO ※スクロールすると画面の上部にメニューが固定表示されるかと思います。 それでは見ていきましょう。 1.HTMLを記述 サンプルとして、liタグで横幅25%に指定しfloatさせることで4つのメニューを配置。 <nav id="fixed-navi"> <ul> <li><a href="#">NAVI1</a></li> <li><a href="#">NAVI2</a></li> <li><a href="#">NAVI3

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>