[B! サイズ] bamboo_nのブックマーク

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

iOSのSafariには、フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままというありがた迷惑な独自仕様があります。（ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…）以前、この現象を回避する方法として viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですがピンチイン（アウト）での拡大縮小は許可したまま iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！サンプル ※iPhoneでひらくと動作を確認できます入力フォームのfont-sizeが関係していた iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか inputとtextareaの文字サイズが16px以上ならフォーカス時の自動拡

bamboo_n 2016/10/14

リンク

まだ使ってないでしょ？動画や画像のサイズ調整にobject-fitとobject-positionが便利すぎ

CSSのobject-fitとobject-positionプロパティって知ってますか？画像だけでなく、動画のサイズ調整（特にレスポンシブ！）にも使える便利なプロパティ、今後のWeb制作の現場で活躍しそうですよ。 Webサイトのレイアウトをするとき、動画や画像は潜在的な問題を抱えています。たとえば、CSSで画像の幅を明示的に指定したとしましょう。もしその幅がパーセントまたはビューポート単位で指定され、高さがautoに設定されていると、ブラウザーのウインドウサイズを変更しても画像のアスペクト比は保たれますよね。ただ、これだと画像が縦長の場合にスペースを取ってしまうので、画像の高さを制限したいときもあります。ところが、単に高さをCSSで制限すると、今度はアスペクト比が崩れてしまうのです。こうした、画像とアスペクト比に関連する多くの問題は、CSSのobject-fitとobject-po

bamboo_n 2016/10/04

リンク

CSS：スマホとPCサイトの文字サイズを固定する | raining

PCサイトを構築時にスマホでページを閲覧すると一部の文字サイズが大きく拡大されて表示されることがありました。 iPhoneやAndroidなどでは文字が見やすいように文字サイズを自動調整して、大きく表示してしまうようです。しかし、文字が拡大してしまうとPCサイト用に構築したデザインが崩れてしまったりすることがあります。文字サイズを勝手に拡大されないようにするには CSSの「-webkit-text-size-adjust」プロパティを指定すると回避できます。下記にCSSの「-webkit-text-size-adjust」プロパティを使用して、スマホ・PCサイトの文字サイズを自動調整して拡大表示させずに固定して表示する方法をメモします。 ■ 「-webkit-text-size-adjust」テキストの文字サイズを調整するプロパティです。デフォルトは「auto」なので文

bamboo_n 2016/09/11

リンク

メディアのサイズを追加する[WordPress]

WordPressのメディアのサイズは3種類ですが、このサイズを追加する方法をご紹介します。function.phpに一行追加するだけという超お手軽な方法です。まえがき WordPressで画像をアップロードすると、デフォルトの設定だと「サムネイル（150×150）」「中サイズ（300×300）」「大サイズ（1024×1024）」のサイズで画像が自動的に切り出されます。このサイズをただ変更したい場合は「設定」→「メディア」から編集することができるのですが、サイズが3つだけでは足りない場合、自分の好きなサイズを簡単に追加することが出来ます。その方法をご紹介します。 function.phpに、追加したいメディアサイズのコードを追記お使いのテーマのfunction.phpにちょっとコードを追加するだけでカスタムサイズを作成することができます。 add_image_size( $n

bamboo_n 2016/03/03

リンク

【 WordPress 】[追記あり]Advanced Custom Fieldsプラグインでアップロード画像サイズを指定して表示｜WordPress｜しろうとにけがはえた

みんなだいすき！Advanced Custom Fieldsにて、画像を表示する際、 CSSでアップロードした画像サイズをムリヤリ変更するっていうのもありですが、『メディア』で設定されているサイズで表示させたり、更にみんなだいすき『 add_image_size(‘size1’,200,200); 』とかの画像のサイズを表示させることもできるんだね(/･ω･)/！っていうメモです。。 (´・ω・｀)＜知らなかったんだ・・面倒くさいからいつも画像URL取得してた☆ 知ってる人は生暖かい目でry Advanced Custom Fieldsプラグインをインストールそして有効(/･ω･)/ 左メニューにできた『カスタムフィールド』で画像のカスタムフィールドを作成ここで、『返り値』を『画像ID 』に ※カスタムフィールド全体だけど、『 style 』を『 Standard(WP

bamboo_n 2016/03/03

リンク

はてなブックマーク

タグ

関連タグで絞り込む (9)

サイズに関するbamboo_nのブックマーク (5)

お知らせ

今週のはてなブックマーク数ランキング（2024年10月第1週）

月間はてなブックマーク数ランキング（2024年9月）

今週のはてなブックマーク数ランキング（2024年9月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス