忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[170] [169] [168] [167] [166] [165] [164] [163] [162] [161] [160

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

初めてスマートフォンサイトを設計してわかったこと

今、絶賛スマホサイト作成中なんですが、自分でイチから組んでみてわかったことをメモがわりに。

良くも悪くも、一回ちゃんと組んでみて初めて分かったことがたくさんでした。
 

1.HTML5が地味に難解

今までもそう思っていたので新たな発見、とまではいかないですが、やはり迷ったのはsectionの使い方。
メインコンテンツエリアの文章内の見出しと、見出しに紐付くコンテンツをsectionで囲ってみたものの、これであってるのかな?感が未だにぬぐえず。HTML5、奥が深いです。


2.CSS3の新プロパティの使いどころに迷う

たとえば、コンテンツ内でボックスがふたつ横並びになっている場合、display:boxなのかfloatなのか、いちいち判断に迷いました。
2カラムコンテンツの実装はfloat(もしくはposition)、と迷いのなかった今までに比べると、迷いが出る分時間がかかります。
さらに、CSS3のプロパティを実践的に使うことで、案外使い方が分からなかったり、使い方の新しい発見があったりで、より時間がとられました。


3.プリフィックスがヤバイ

最初は、prefixfree.jsでprefixをつけずに実装するつもりだったのですが、諦めた(理由は後述)ため、大量のプリフィックスが出現。
幸い、prefixfree.jsに関しては、多分実践では使えないかもなぁという予想はしていたので精神的ダメージはほぼなかったんですが、prefixがかなりつらかったです。
gradientのprefixをつけるときに間違って-webkit-background:linear-gradient...としてしまうくらい(笑)。
(正しくはbackground:-webkit-linear-gradient...)

また、途中で、WebKitにはgradientの記述方式が2種類必要と聞いてドン引きました…。
2種類あること自体は知っていましたが、現在もその記述が必要だとは思いもしていませんでした。
下記の2つです。

  • background:-webkit-gradient(linear, 方向, from(#XXX), color-stop(XX%, #XXX), to(#XXX));
  • background:-webkit-linear-gradient(方向, #XXX, #XXX XX%, #XXX);

上の記述のほうは、古いwebkitの仕様であったもので、古いスマートフォンではこちらしか認識しないものもあるんだとか。

スマートフォンは2年契約が多いから、2年位前に出ている機種までは対応する必要があるんだよね。

という名言をいただきました。
舞台はスマホに移っても、意識するのはPCと同じですね(涙)。


4.実機での確認は必須

最初、「基本、PCのwebkit系ブラウザで確認すればOKだから。」と言われていたのですが、そんなことはありませんでした

まず、レンダリングの速度です。
先ほどprefixfree.jsの話をしましたが、PCで見ていたときは問題なくレンダリングされていたのですが、やはりスマートフォン実機で見てみると、レンダリング時にタイムラグが。
JSをやめ、prefixをCSS直書きに直したところ、タイムラグがなくなったので、今回はprefixfree.jsなしでいくことに決めました。

次に、フォントサイズ
実機で確認すると、フォントの見え方がやはり異なります。ボックスにぴったり入る文字数だと思っていたら1文字だけ改行してしまったり、文字間が思ったより空いてしまったり。
今回、エミュレータは導入しなかった(存在すら知らなかった)のでこのような事態になっているわけですが、やはり実機で確認することが必須です。


5.CSS拡張メタ言語の偉大さを知る

最近、社内のいろんな人がLessだのSassだの(CSS拡張メタ言語)言うのを聞くようになりました。
簡単な概要は知っていたのですが、CSSは手書きで書いてこそなんだよ(怒)なんでそんなの使わなきゃいけないの?などと思っていました。

が、スマートフォン案件には、彼らの力が必要だと体感しました。
スマートフォン案件というよりは、CSS3を使用する案件には、CSS拡張メタ言語が必要なんです。

構築前にも、「Sassとか使わんの?」といわれたので、「Sassは使ったことがなく、今回スマホ案件初めてなので、時間がかかると困るのでひとまず使わないでいきたいです」(これはSassが嫌いだったから断ったんじゃなくて本心です)と言ったんですが、やってみてわかることがやはりあります。

ただ、普通のサイト構築なら、別に必要ないよ。という気持ちは変わってません
今回、なぜ必要だと切にに感じたのかと言うと。

※ちなみに、下記はSassについてざっくり話を聞いたときに得た知識で、Lessも同じことができるかどうかは確認していません。

  • プリフィックスの多用
    JSなどを使用しない場合、CSS3を使用する際には、-webkit-、-moz-、-o-、-ms- の4種類のprefixが必要になります。
    1つのプロパティにつき、prefixなしの通常の書き方も含めると5つ、記述が必要になります。これがたくさんの種類、たくさんのモジュールにあたるとかなりげんなりしてしまいます。
    が、SassとCompassを使用するとこれが楽になるんだとか。
  • 同じスタイルの使用
    特にbox-shadow(ドロップシャドウ)を使う際に思ったのですが、ひとつのサイト内で、ドロップシャドウの向きが変わったり、サイズが変わったりすることは少ないように思います。そのときに、同じ記述を何度も書くのは面倒だし、ひとまとめにするにしても記述する場所が散らばっていると、運用時に不便。
    Sassを使用すると、プロパティを変数化して代入することができるので管理が楽に。

ただ、今でもSassやLessを導入せずに構築したことに関しては後悔していません。
それらを導入せずに設計したからこそ、ツールの必要性が、理屈ではなく体験として理解できたので。私の中ではとても貴重な経験でした。


6.コツを掴んだことによる記述変化

これは私が悪いんですが、最初は要領がいまいちわかってなかったのでソースがごちゃごちゃだったんですが、徐々に慣れてコツを掴んだ結果、ソースに統一感が無くなり、失敗しました・・・。



まだ全然納品まで到ってないのですが、それにしても10ページ前後のHTMLを作るだけでこれほど分かることがあるとは、と感動しました。だから新しい技術を学ぶのは面白い!と改めて実感しました。

 


PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
08« 2017/09 »10
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ブログ内検索
忍者ブログ [PR]