サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
littlethings.jp
ファーストビューでは非表示。 一定量をスクロールしたら、ボタンを出したい。 PCのときだけ、SNSのボタンを画面の左端に出してみました。 html <!-- 常に横にいるボタン --> <div class="flow-nav__wrapper is_flow"> <div class="flow-navi"> <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> </div> </div> 該当の要素に「is_flow」というクラスを付与します。 css .flow-navi__wrapper { display:none; } .flow-navi { position: fixed; top: 260px; z-index: 3; } @media(max-width:863px) { .flow-navi__wrapper { p
GoogleMapがいかにも地図です。 地図なので当たり前ですが、地図の色味がデザインの邪魔をしているように感じることが・・。 モノクロにしたい。 iframeを使ってシンプルに地図のみ表示させているページなので、cssだけでカスタマイズ。 cssだけでモノクロにできたよ。iframeにfilter。 埋め込んでいるiframeに対して、cssのfilterを使います。 モノクロにしたいので、grayscaleを100%に。 .googlemaps iframe, .googlemaps object, .googlemaps embed { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filte
たくさんの情報を発信しているサイト。 せっかく更新した記事も、ページの読み込みが遅いと見ている側はストレスに・・ 表示の遅いサイトは、それだけでユーザーがさよならしてしまうことも。 表示速度が遅くなる要因は複雑。jsやcssなどコードの量だけでなく、表示させる画像のサイズとか枚数とか・・ファイルの読み込みの数、要するにリクエストとレスポンスの数。 同時多発的なアクセス数の問題、WEBサーバのスペックの問題、さらには使う人のネット環境も・・ もうなにから改善したらいいのやら。いっそ全部テキストにしてしまえ。装飾などいらん。画像もいらん。心が折れてそんな境地に陥ることもしばしばですが・・ できることから改善していきながら、快適に見てもらうための工夫も必要なのかも。 そんなわけで、画像をたくさん読み込んでいるこのサイト。読み込みに時間がかかるページがちらほら出てきてしまいましたので・・読み込み完
パンくずリストを横にスクロールさせてみました。 スマホのときだけ、慣性スクロールでぬるっと動きます。 html <!-- パンくずリスト --> <div class="breadcrumbs__wrapper"> <div class="breadcrumbs"> <ul> <li><a href="TOPページのリンク">TOPページ</a></li> <li><a href="一覧ページのリンク">一覧ページ</a></li> <li>詳細ページのタイトル</li> </ul> </div> </div> <!-- // パンくずリスト --> 普通のパンくずリストです。 .breadcrumbs__wrapper { width:100%; height:40px; background: #fafafa; } .breadcrumbs { margin:auto; max-wid
髪を切って、きのこになりました。秋です。 ページを読み込んだときに、コンテンツをふわっふわっと表示させたい。 最近よく見るあれをやってみます。 ふわっという動きはcss3のtransitionで時間を制御。 「effect-fade」と「effect-scroll」、2種類のcssアニメーションを用意してスクロールをトリガーにjsで切り替えます。 html ふわっふわっと表示させたい要素に「effect-fade」というclassを付与します。 ブロックまるごとふわっとさせたい <section class="effect-fade"> <h1>タイトル1</h1> <p>説明文1</p> </section> <section class="effect-fade"> <h1>タイトル2</h1> <p>説明文2</p> </section> <section class="effect
このページを最初にブックマークしてみませんか?
『ふんわり柔らか。「たまボケレンズ」で撮った写真で2018年を振り返る。 | LittleTh...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く