そのCSSの書き方本当に大丈夫?ユーザーを意識したCSSを書こう | Garney.Web

そのCSSの書き方本当に大丈夫?ユーザーを意識したCSSを書こう

スポンサーリンク

02151208_1

自分はブログ読むの大好きです。
仕事中でも家に帰っても移動時間でも読んでるレベルで好きですね。
でもブログ運営してる人達って読者目線で文章は書くけど、ユーザーを意識したCSS書けてないなあとフロントエンドエンジニアは思うのです。
まあ専門外ですからね、仕方がないといえば仕方がない。でも少し勿体無いなと思います。

スマホで見た場合や、複数のブラウザで見た場合に表示崩れが発生していたりすることがあるんですね。
誰かが作ったテーマをそのまま使ってそのまま放置なら良いんですけど、個人ででカスタマイズし始めた人に表示崩れは多いです。

Javascript等は置いといて、HTMLやCSSって適当に書いてもある程度形に出来るんですよ。
だからこそ副作用が多いというか、しっかり理解していないと思わない所で沼に足からズブっと突っ込んでしまうんですね。

そのCSSの書き方、スマホで見ても問題ない?

無茶な書き方してませんか?
スマホサイトを見た時、横スクロールバーが出ているのはユーザビリティとして致命的です。
サイト閲覧者がページ下部にスクロールしたいことは常々あります。
なのに横スクロールバーが出ている為に右斜下にスクロールしてしまう。

サイト右側にコンテンツが意図して有れば良いんですけど、
たいていの場合はただの表示崩れです。
こういうの一発アウトです。凄くサイトが読みづらくなるんです。

position:absoluteに要注意

例えば具体的にどういうCSSを書いているとこういうことが起こるのかと言うと

<br />
.img{<br />
position:absolute;<br />
top:0px;<br />
left:100%;<br />
}<br />

positionというのは、要素を絶対配置にする命令(以下プロパティ)です。
これめちゃくちゃ便利なんで初心者は頼りがちになると思いますね。
任意の配置したい要素をtopとleftを使って自由な位置に持っていく事ができてしまいます。

試しにpositionを用いて要素を配置してみました。
box4とbox2が重なっています。こんな風に自由に配置ができるんですよ。
これって凄く便利なんだけど、自由に配置が出来過ぎて後々収集がつかなくなってしまいます。
それと同時に、スマホサイトで副作用が発動します。
画面の外にこの要素がはみ出てしまうと横スクロールバーが出ちゃうんですね。

スマホって画面サイズが一定ではありません。
320px相当のiPhone5だったり、640px程のiPhone6。
Androidだったらもうそりゃ沢山あります。

一定ではないのに絶対配置でleft500pxなんてしちゃったら、iPhone6では見れるけど、iPhone5ではみ出てしまいますよね。

すると一定の閲覧者には非常に見にくい状態でサイトが表示されてしまいます。
これを解決する考え方がレスポンシブデザインです。
レスポンシブデザインについてこの記事では触れませんけどね。

ただ様々なディスプレイ幅のデバイスがあることを意識してください。
現在はスマホでアクセスするのが主流の世の中なので、positionプロパティの扱いには要注意です。

overflow:hiddenで回避する

応急処置として、positionを使用している要素の親要素に

<br />
div{<br />
overflow:hidden;<br />
}</p>
<p>div .img{<br />
position:absolute;<br />
top:100px;<br />
left:500px;<br />
}<br />

overflow:hiddenを指定することで回避可能です。
当然親要素をabsoluteしてしまっていると、更にその親要素に指定する必要がありますね。

overflowプロパティは、要素からはみ出した部分をどう見せるか指定するプロパティです。
hiddenはみ出し部分を非表示にします。
これでディスプレイからはみ出た部分を消すことが出来るので、横スクロールバーも消えるという理屈です。

はみ出してしまうような作り方は、しないに越したことはありません。
レスポンシブに対応するならばposition:absoluteを使用してもはみ出さないように使うべきです。
例えば

<br />
div{<br />
width:100%;<br />
position:absolute;<br />
top:0px;left:0px;<br />
}<br />

こうすればdiv要素はデバイスのディスプレイサイズにピッタリはまったボックスを絶対配置で自由に配置することが可能です。
どんなデバイスで閲覧されても問題ありません。
width:100%はレスポンシブを想定するならばめちゃくちゃ便利で有効です。
ただし、topとleftには大きな値は入れないでください。基本は0で使う方がいいですね。

自分は初心者の方にはposition:absoluteとrelativeは使用せずに構築してみてとお願いしています。これ本当に副作用が多いので。

そのCSSの書き方どのブラウザでも表示される?

CSSにはバージョンがあって現在主流なのがCSS3です。実は4もあるんですよ?
時代を先取りしすぎていて今使う意味はありませんけど。

さて、CSSはバージョン3をダウンロードしてきて読み込ませて使用するのか?というとそうではありません。
CSS3の書き方があって、その書き方で書くとCSS3だし、使わなければ大抵はCSS2です。
CSS3で書くかCSS2で書くかは自分自身の知識がどこまで及んでいるかが鍵になります。

対応ブラウザを意識する

さてここで問題なのが、どのブラウザまで自分のサイトが見れれば良いのかということです。例えばIE8からIE11とEdge。ChromeとSafariにFirefox。だったらCSS3使用には要注意。

例えばモダンブラウザ・・・IE11、Edge、Chrome、Safari、FirefoxだけならCSS3でもある程度大丈夫です。

これ凄く重要です。IE8まで綺麗に見せたいのにCSS3ゴリゴリで書いているとどうなるか・・
IE8や9でレイアウトが崩壊します。ほぼ確実に崩壊します。
これらのブラウザではCSS3が効きにくいんですね。効かないプロパティが多いんです。
IE9はまだ効くんですけど要注意です。
またSafariはモダンブラウザですが注意してください。崩れやすいです。

いろんなサイトで「コピペでOK!CSSだけで作れる~~」とかあるんだけど、こういうのよく見ると「あ、Safari無理だな?崩れるな」ってのがありますね。

特に変形によるアニメーションを含むCSSですね。

CSS3 のみでキューブ(立方体)を作る! – はしくれエンジニアもどきのメモ
作るの大変だったので、良さ気なのを外部サイトから引用しました。

ここまで3Dを用いたスタイルを使うことってまあ無いんだけどね。
ただ、要注意のtranslateプロパティを使ってます。

translateプロパティはリッチなアニメーションを実装するときに欠かせないけども、普通に書くとSafariで表示崩れが発生します。物によってはChromeやFirefoxでも見れません。

じゃあどうすればいいか。

ベンダープレフィックスを使おう

ベンダープレフィックスを使ってください。何それって話ですよね。

<br />
.box{<br />
-webkit-transfrom:translateY(-50%);<br />
-moz-transfrom:translateY(-50%);<br />
-ms-transfrom:translateY(-50%);<br />
-o-transfrom:translateY(-50%);<br />
transfrom:translateY(-50%);<br />
}<br />

「-」から「-」までの間に書かれている文字列がベンダープレフィックスと呼ばれるものです。

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

引用:HTMLリファレンス

これをつけていないとつまり各ブラウザで機能しないことがあるんですね。
各ベンダープレフィックスの意味は以下の通りです。

-webkit-はChromeとSafari。
-moz-はFirefox
-ms-はIE系
-o-はOpera

特にこれを付けていないことで崩れやすいのがSafari。-webkit-のベンダープレフィックスはCSS3を用いたスタイルを書くときにはほぼ必須です。
抜けると崩れます。特にiPhoneは崩れが頻発します。

幾ら良さそうなCSSスニペットを見つけたからと言ってよく見ないと書くブラウザで表示崩れが起こるので注意しましょう。
CSS3だな?と思ったらコピペした後にベンダープレフィックスをつけたりすると良いと思います。

まとめ

CSSって本当に適当でも書ける。だから安易にコピペしがちなんだけど、こういう落とし穴もあるよって話です。

表示が崩れてしまっていることで、せっかくサイトに訪れてくれた人が離脱しちゃうのは勿体無いじゃないですか。

キチンと解決策をしっていれば回避できるものばかりなので、正しい知識を是非身につけてください。

この記事で上げた例はほんの一部です。
CSSには多くのプロパティが用意されていて、
これらの組み合わせによって幾らでも表示崩れは発生します。
一度自分のサイトは大丈夫か様々なデバイス、ブラウザでチェックしてみることをオススメします。
(自分のサイト大丈夫か心配になってきた・・・w)

メンテナンス性を追求し始めるとCSSって奥が深いんですけど、表示崩れくらいならそこまで難易度は高くないので覚えてみると良いと思いますよー。

言ってる自分もまだまだなんですけどね。
んじゃね。寝る!深夜4時半

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法