画面サイズの適応/アナログ人間勉強中14
パソコン、タブレット、携帯の画面にレイアウトを適応させる。のも
現代では人工知能とかで
なんとなくいい配置にしてくれているのかと思いきや、、、
コーディングされている方の汗の涙の結晶であることがわかりました。
ごちそうさまです。
この書き換えの際に大事な要素を
この初心者の私なりに書き出してみようという試みでございます。
・フォントサイズ
見やすくするためには余白が大事なので
ただ大きければいいというわけではないですね。
・画像？がある場合の配置(大きい塊、、笑)
パソコンの配置とは大胆に変える方が
携帯ではカッコよく見える可能性が大ですね。
・ページリストの見せ方
(例えばメインページの他にaboutとかの他ページがある場合
パソコンではヘッダーに一覧がありますが
今の携帯だと画面右上のプルダウンでまとめているケースが多いですね。)
・文字レイアウト
(パソコン画面は横長ですが携帯だと縦長が今の主流なので
見せ方も変わりますね。)
・ボタンの押しやすさ
パソコンではカーソルですが
携帯では画面にタッチなので
ボタンを大きめにして画面の統一性が出ると
カッコよくなりそうですね。
ちなみにこれらの書き換えは
HTMLの<head>にviewportを設定し
cssシートに
@media(width:画面サイズpx){
内容
}
でできます。
パソコン、タブレットには表示せず
携帯のみの場合は
.menu-icon{
display:none;
}
/*デフォルトでは表示しない*/
@media(width:画面サイズpx){
.menu-icon{
display:block;
}
/*携帯のみ表示メニュープルダウンアイコン表示*/
.menu{
display:none;
}
/*デフォルトのメニューの方を消すのをお忘れなく。*/
}
などができます。
素人なりに記録していると
あとで面白いですね。
それに
どのくらい進歩したかも比較しやすく
この初期の記録もいいものだな〜と思っています。
ここまでくれば
あとは応用していくだけだと思うので
今後記録をどうしようかなと考え中です。
こあらあきこ
この記事が気に入ったらサポートをしてみませんか？