[B! スマホ] ricopinxのブックマーク

background-attachment: fixed がスマホで効かない問題は ::before で解決！

background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか

ricopinx 2016/09/14

リンク

ひたすらハンバーガーアイコンを作ったので9種のソースを公開します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き動き出す前の傾きとバーの位置をtransf ormで調整をします。こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;

ricopinx 2015/11/17

close時のアニメーションバラエティ豊富！

リンク

初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB

また会いましたな！スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ先日、ついにWii UとSplatoonをゲットしました。そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。また、来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って

ricopinx 2015/09/11

リンク

レスポンシブに対応した簡単メニュー

PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまずは確認してみてください。ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。デモサンプルそれでは、作り方を見ていきましょう。 1.HTMLを記述 <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="

ricopinx 2015/09/10

リンク

PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About

スマートフォンは、PC用に作られたウェブサイトでも表示できます。しかし画面サイズが小さいため、そのままの状態では読みにくい可能性があります。その場合の対策としては、レスポンシブWebデザインを採用するスマートフォン専用サイトを作るなどの方法があります。 ■更新や管理が楽なのはレスポンシブWebデザインだが…… 更新や管理の労力を考えれば、レスポンシブWebデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。 (参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選しかし、既存のPC用サイトがレスポンシブ化しにくいデザインな場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合では、PC版サイトとスマートフォン版サイトを分離する方が望ましいこ

ricopinx 2015/09/10

PC版とスマートフォン版サイトを自動振り分けする方法

リンク

【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを合わせられます。

多くの場合、PC用とスマホ用のテーマでは記事部分の大きさが違います。なので、PC用のテーマに合わせて画像のサイズを設定するとスマホ用テーマでは記事からはみ出してしまいます。これは(・A・)ｲｸﾅｲ!! という訳で方法を調べ、実際に最適化した状態がこちらです。しっかり画像が記事の中に収まっていますね。結構これのやり方がお手軽簡単だったので軽く解説を。「max-width」を使えば一発！最初これをやろうとした時、「テーマに合わせて画像のサイズを変えるのか…きっとjQueryとか使ってメンドクサイんだろうな…」と思いましたが、調べてみたら超簡単！なんとCSSのプロパティに「max-width」を加えるだけ！ img { max-width: 100%; height:auto; } このように「max-width」を100%に設定することによって画像のサイズを囲んでいる要素のいっ