資格ライフ.COM NO LISENSE NO LIFE

士業、コンサルタントとして生きるために自分がやってきたこと、仲間と一緒にこれからやりたいこと

レスポンシブWebデザイン

にほんブログ村 士業ブログ 税理士へ

相続税と資産税の専門家 夢をかなえる税理士&CFP です。

当ブログに訪問していただき、ありがとうございます。

税理士のランキングに参加中です。

応援クリックだけを励みに更新しています!

 ↓↓

にほんブログ村 士業ブログ 税理士へ

スマートフォンタブレット端末などが登場して、ホームページを横で見るケースと縦にみるケースがあると思います。

パソコンなど横でみる用にホームページを作ると縦になるとちょっとおかしいですよね。

特にスマホタブレットなど小型のデバイスについては字が小さくなってしまいます。

そこで考えられているのが、デバイスの種類によって見え方が違うような作り方が求められるようです。

そんなこと言われても僕のようなスキルのない人間は困ります。

多少スタイルシートはつかるようになりましたが、あくまでも使う範囲内の知識です。

とりあえずいろいろなHPを参考にしてやってみました。

まず、ホームページのHTMLのMETA情報として次のような記述をしました。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

これで、スマホタブレットで開いたときに勝手に文字が縮小されないというもののようです。

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="all">

<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 0px)">

<link href="smart.css" rel="stylesheet" media="screen and (max-width: 480px)">

これで、デバイスの横幅によって読み込むスタイルシートが切り替わります。

そして、スタイルシートタブレット向けにサイドメニューを下に持ってきたり、上のメニューが表示されないように設定しました。

とにかく、これからはタブレットスマホを意識してホームページを作らないといけないようですね。

夢をかなえる税理士&CFPの学ぶlog-相続と相続税なら

税理士さん教えて!相続と相続税の基礎講座

http://www.officenms.co.jp/souzoku/

【SPONSOR LINK】