[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
爆速でタイマーセット ListTimer
以前から欲しかったので、爆速でセットできる死ぬほどシンプルなタイマーアプリを作った！無料です。爆速タイマーで検索すると見つかる。 爆速タイマーのダウンロードはこちらから。 このアプリは今まで作ったものの中でダントツにシンプルだけど、自分が頻繁に使うために作りました。 なぜ、いまさらタイマーアプリを作ったか？ 僕はiOSの標準アプリのヘビーユーザでありまして、もう毎日のように使っている。 どんな時に使うかというと、まずは毎日の作業時間のタイマーをセットするため。 これは数時間単位でセットするから特に問題ないのだけど、ラーメン作る時とか、数分レベルの時間をささっとセットする時にはとても使いにくい。。 まずiOSのドラムUIのタップできる範囲が狭く、なおかつ5分とかにぴっちりと合わせるのに気を使い、その後にセットボタンを押さないといけない。 また、電車で降りる時間をセットする時にもタイマーを使う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Design