スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。 レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。
スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。 レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか? 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で
近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり… みたいな事を回避するための tips をご紹介します。 postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。 postMessage による値の受け渡し 他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。 window.postMessage("value"
地味な離島ライターの内藤です。またも地味でニッチな話題を離島からお送りします。 ページ内の頭出しやページTOPに戻るページ内リンクは便利ですよね。今回は、リンク先のページ内に埋め込まれたiframeの中での頭出しについて書きたいと思います。 というのも、後述するようなレガシーサイト対応をしている方から相談を受けたのがきっかけです。新しい技術で、どんなレガシーサイトも使い勝手をよくしようではありませんかっ。 言葉だとわかりづらいので、下のデモページで動作をご確認ください(ページ左上のリンクをクリックしてみてください)。 https://www.web-naito.net/demo/iframe/ ※現在はサービスを終了しています。 ご覧のように、リンク先のiframeのところまでページ内リンクし、その後iframeの中がスクロールして頭出しをします。 とはいえ、最近はあまり使われなくなってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く