2017
12.02

CSSでiframe要素をレスポンシブにする方法

CSS, CSS3, HTML

今日は自称テーマテンプレートの工事を行ったので、備忘録。

自称テーマテンプレートとは・・・  =>Adminartist

今まではPHPの管理画面を取り入れていましたが、初心者向けでなかったことを反省し
HTMLとCSSを使って、レンタルサーバーにアップロードする方式で更新出来る様にしました。

方法はとても単純、2ステップ

1. News.html(名前はなんでもOK)を作ってiframeでリンクさせる
2. News.htmlに更新情報を記載してアップロードすると更新完了!

HTML

CSS

<font-color=”red”>サンプルページがレスポンシブWEBデザインになってなかった為、削除いたしました。
お詫びして訂正させて頂きます。

参考ページ:http://www.webantena.net/css/iframe-responsive-web-design/
https://dotinstall.com/lessons/basic_responsivewebdesign/39309

サンプルデモ

テンプレートも改修しました!

PCで見た時

 

スマホで見た時

レスポンシブには出来ても、Webブラウザでちゃんと見れるのか心配!

というクライアントさんに対応する為にベンダープレフィックス対策についても、備忘録💧

こちら =>
Browserling

わざわざ他のパソコンを使って確認せずとも、5種類のWebブラウザでの表示確認ができることを発見しました!
なんとバージョンの設定もできます♪

ただ全部の機能が無料な訳ではありません。高度な表示確認は有料の様です。

でもとっても助かるスグレモノです。

本日も最後までお読み頂きありがとうございました!

【PR】

作品をアピールできるサイトを格安で作ります インスタグラムが好きな方やSNSでアピールしたい方にオススメ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。