初めてやったマークアップでの覚書

あらすじ

経験ゼロだけど仕事がまわってきた。

cssやらJavascriptやらのフロントを触れるようになり、これでお小遣い稼ぎでもしたいけど、実際実務経験０の人間には仕事が来づらいな−とかって愚痴ってたら、簡単なマークアップの仕事やってみる？って感じで仕事が来た。多分◯ラウドサービスみたいなところからの仕事だと思う。詳しくは聞かなかった。

仕事の内容

当初は3,4日くらいで終わるよ−という話だった。デザインができたものを成形するだけ、ということだった。提示された金額が数千円で、明らか最低時給下回る想定だったけど、まぁ勉強にもなるしいいかなーという感じ。

デザイナーから引き継がれるまで

月曜か水曜にデザインがあがってくる、という話だったが、待てどなかなか来ず。水曜になって、金曜に出来上がる、ということを聞いた。
月曜、水曜どちらでも対応できるようなスケジュールにしておいたのだが、金曜は想定してなかった。でも万全ではないにしろ、なんとか時間は確保できた。渡してきた人から、コードガイドラインを教えてもらった。SEO対策のこととか書いてて、初めて見たときはわからないタグあったりでびっくりした。

実際は・・・

パソコン用１枚とスマホ用１枚で数千円というふうに提示されていたが、完成デザインを見てみると、どちらも、4,5枚ある。聞いてみると、どうやら渡されたファイルがpdfで、画面が別れているように見えるが、実際は１枚のLPだ、ということだった。
昔はメニュータブからリンクへ画面遷移する感じのホームページが多かったのだが、最近はスマホの影響からか、ワンページのものが増えてきていて、Webサイト制作の単価は下がってるのかな−、なんて思ったりもした。まぁ明らかに自分の作業量に似合わない単価設定だな、って思っている。

素人がまずやったこと

コードガイドラインを見渡す。

資料が渡されたときに同じく、コードガイドラインを教えてもらった。SEO対策は自作のフロントデザインの練習では書いたことがなかったので、初めて見るものばかりだった。og:titleとかなんじゃそれ！って感じだった。
一応、あとで書けばいい・修正きく内容だったので、なんとかなりそうなのがほとんどだったけど、なるべくheader,footer,article,section,nav使い分けることってのがあって、タグの書き換えは途中でだるいので、これをちょっと調べた。調べた結果、sectionでコンテンツをかき分けていくことにした。

資料の確認

さて、早速取り掛かる前に、まずちゃんと送られてきた資料が揃っているか確認してみた。送られてきた資料は、PC版とスマホ版の完成デザインのpdfファイルと、あとはパーツのgifやjpgの画像ファイルである。一応、完成デザインからパーツがあるかどうか、pdf上で赤ペンチェックした。大丈夫そうである。

マークアップの方法論の検討

ワンページのLPなので、とってもシンプルな作りになっている。ただ、基本左右余白なのだが、ところどころのフォームやトップなどは、余白なしでラベルが広がっている。
ここで２つの方法を考えた。
①z-indexみたいなのを使って、下に余白ありレイヤーをしき、その上に余白なしレイヤーを作る方法

②上から一つづつ余白あり、なしのセクションを重ねていく。

もともとマークアップの仕事をしていた方に相談すると、②で余白をつくるクラスをいれてけばいいんじゃない？って言ってたので、それでやることに。

ラフスケッチして中間報告

まずは正確な位置合わせは置いといて、それっぽく配置してみた。これまで文字とか画像は自分で一つづつ設定していたので、とても楽だった。なるべくデザインはPhotoshopとかで画像にしてもらって、それをペタペタ貼るのがいいな、と感じた。

最初のフィードバック

指摘１：inlineの罠

全然位置が違うよ−ちゃんと見て直してください。というお言葉。
なお、ここでは画像の下になぜか変な隙間が出来てしまう問題があった。paddingやらmarginをつかっても全然なおらず、developer toolを使ってもわからなかった。
どうやらこれは、inline要素だと自動的に行を挿入するらしく、その影響だと。なので、''display:block''を指定して解決した。

指摘２：hタグでのSEO対策

SEO対策でh1,h2,h3タグを使う必要があったのだが、コンテンツのタイトルなど主要部分は、すでに画像化されていたので、hタグ使わないでいた。しかし、どうやら画像に対してもhタグで囲うのがいいのだそう。

指摘３：IDセレクタはなしよ

ユニークなdiv要素などにはidセレクタを使っていた。どうやら、保守性？の観点から、なるべく使ってはいけないらしい。使うにしてもjavascriptで、狙いたい時だけで、装飾系はなるべく使わないのがいいのだそう。。。

指摘４：縦方向は%じゃなく、pxで設定して

これはびっくりしたのだが、%で高さの幅を指定していたら、ダメと言われた。別のデザイナーの会社で働いていた人は、％だよーと言っていたのだが・・・企業・人によって違う？？

他にも細かいところはあったが、テクニカルな部分はここらへん。

大きな壁。テーブル

１回目の提出は製作途中で、まだ書ききってなかったので、前回の指摘事項を修正し、書き続けていった。
よくあるボタンを押すと、TOPへぬるっと上スクロールする機能を下記のように実装していった。jQueryOKなので楽だった。

scroll-top.js

$(function(){
    $('.js-scroll-top').on('click',function(){
        $('html,body').animate( {scrollTop:0} , 'slow' ) ;
    });
});

すると、ある文字がでてきた。googlemapの表示部分である。

小ボス：googlemap

googlemapはAPIなど叩いたことがあるので、やりやすいイメージはあった。しかし、今回はそれとは別種で、渡されたpdfファイルにgooglemapの表示するurlが書かれてあった。めちゃめちゃ長い文字列で、一部ランダムっぽかった。
さて、これを一つづつ見ながら打ち込むのか、と思ったがすぐに却下した。結局みんな大好きOCRを使うことに。最初は読み取り失敗したが、画面拡大して、なるべくきれいに画像をトリミングして読み込ませたらだいたい合っていた。違った部分は目でみて、修正していった。

中ボス：テーブルの装飾

これまでhtmlでtableは書いてきたことはあったものの、１行目だけ色つけたり、３列目を太字にしたり、列の結合などは初挑戦であった。
しかし、本当に危うさを感じたのは、テーブルデザインだった。テーブルの外側が２重線になっており、４隅の部分は、『みたいな表ではなく、カギカッコみたいな形だった。
いろいろ調べてみると、table要素のborder部分をdoubleにすれば二重線が引けるらしいが、その幅を変えることはできない、ということがわかり地団駄を踏む。結局それをissueしたのだが、「別に太線でいいよー」とのことだった。

順調かに見えた、その時

無理そうに見えたテーブルのデザインも結局別のデザインとなり、なんとかなりそうだったため、比較的順調に進んだ。初心者がつまづきやすい横並びも、float,flexbox,inline-blockを使い、なんなくこなしていった。

デザインの位置合わせも、PerfectPixelというchrome extensionで合わせていった。デュアルディスプレイ使えばもっと生産性あがっただろう。

さて、chromeではデザインOK、ということで、ブラウザ表示確認した。FireFoxは一部ダメだったが、Firefox対応のcss当ててOK。あと、idの指定のままだったところをクラスに変更。なぜchromeではidをクラスでも読み込めてしまっていたのか。Googleさんのやさしさなのだろうか。
次にsafariもOK。よしあとはIE、Edgeだ。ん？Edge？とはなんだ。。。どうやら、IEの後継ブラウザで、Win10から使えるブラウザらしい。Win7だとダメらしい。いかにもMSっぽい仕様。
Macしかなく、強引になんとかMSブラウザを使おうといくつか調べると、どうやらVirtualBoxなるツールを使うと、Macでも仮想環境上でMSOSが使えるらしい。しかし、実際それをやろうとしたら、パソコンのスペックオーバーでフリーズした。再起動かけてトライしてもダメだった。
調べたらSafariでメニューで開発を使うと別ブラウザでの表示ができる、とのことだった。嬉々として、これを使ってよっしゃーって思ったら、どうやらこれはUser Agentを別ブラウザとして設定したときの表示であり、別にブラウザでの表示ではないことがわかった。つまり、そのブラウザで表示した場合と違うのだ。。。
仕方なく友達のWindows機を借りることに。なかなかやるじゃないの・・・

Edge,IE、君らさえいなければ・・・

ファイルを表示しようとしたら、早速くずれる。文字が小さい、横並びできてないで、もう見るに忍びない姿に。どうして？
どうやらIEはremが効かないらしい。そして横並びの権化であるflexboxもIEは対応してない。ここでぼくの心は折れた。寝た。

Edge,IEハックへの挑戦

寝て起きたら頭すっきりしていた。やはり人間もデフラグが有効か。
さて、気を取り直して、Edge,IEへと取り掛かる。案件によっては、IEの昔のバージョンもサポートする場合もあるらしいが、今回は最新のみでいいとのこと。唯一の救いか。
さて、やることは簡単である。Edge,IEのcssハックをすればいい。以前、Firefoxでうまくいくのだから、簡単に行くであろう。Edgeはなんなくできた。

@supports (-ms-accelerator:true) {
    セレクタ {
        プロパティ : 値 ;
    }

    .hoge {
        color:red;
    } 
}

楽勝か〜、と思った矢先、最後の砦であるIE。やはり手こずった。最初に調べたところだと次のような書き方だったが、

@media all and (-ms-high-contrast:none) {  
header {  
line-height:15px;
vertical-align:bottom;
}  
}

どうも上手くいかなかった。いろいろ探した結果、次の書き方でなんとかすることが出来た。

@media all and (-ms-high-contrast:none) {  
*::-ms-backdrop, header {  
line-height:15px;
vertical-align:bottom;
}  
}

単純なコピペ房とみなされても構わない。IEの怖さを思い知った。
崩れている部分、flexが聞いてないところは、display:inline-blockを使っていった。

あと、今回のサイト作成でのフォントは小塚ゴシックを使ったのだが、IEだとこれが反映されないらしい。なので、別途MS P明朝を導入した。

SEOチェック

IEという大敵を倒し、安心しきっていたところ、中間報告した際に、SEO設定することを指摘された。
これまで、学校の課題でサイトのデザインはやったことがあるのだが、SEOは初である。そう、SEO対策DTである。
最初にもらったマークアップガイドラインを見ながら、SEO対策について学んでいく。
head部分に書くmeta要素は、descriptionには、検索した時の小見出し、keywordsには、そのサイトのキーワードを長くならない程度にカンマで区切っていくつか記述する、など。
これを見て、いやいやdescriptionのサイトの説明とか、まったくの素人の自分が書いて良いのか？と思ったけど、ぼくのチェック担当の人も何も言わなかったため、いくつか別の法律事務所のものを参考にし、簡素に書き上げた。
あとは、imgタグではaltを記述すること。幸い、エディターにいれてるemmetには、勝手にimgタグにaltを記述してくれているので、作業量的にはそこまで多くない。ただ、これまでalt要素には、空にしかしてないので、ここに記述するのは初めてだ。これも初心者なりにどんなものがいいのか調べた。どうやら、altはSEOには本質的には効果はなく、ただ画像が表示されなかったときに、代わりに画像の説明するものとして表示したり、クローリングするときの補助的な役割にとどまる、ということだった。これもどうせ後で直しがはいると思い、シンプルなものにした。
SEOはこんな感じだったが、一番たいへんだったのは、最初のmetaの部分だ。
** meta name hogehoge はまだいいが、 meta property="og:hoge" みたいなのは初見だったので、どう書くのか戸惑った。しかもog:tyep**とかタイプって何？って感じだった。恐らくSEOに仕事で携わってる人は深く知ってるのだろうが、おれは一応さっと調べて埋めていった感じだ。だからhead要素のtitleとmetaタグのtitleの違いが謎である。

おわりに

はじめて請け負ったマークアップの仕事。正直言って大変だった。あがってきたデザインが結構抜けてるところが多くて、文字のpx単位もまったく書いてなかったので、見よう見まねでちまちま合わせていったりしていて、とても作業的だった。
良かった経験では、SEOについて多少なりとも学べたところがある。あとはブラウザチェックなど、これまでやってこなかったデザインのところで学ぶところが多かった。
基本的にChromeを使って、デザインを見ていったのだが、Developer toolや、live styleというコーディングしたものが非同期で反映されるツールなどを使っていって、だいぶ慣れていった。
この他にも、スマホ版も作ったりして、pythonでサーバー立てて、実機確認したりした。
今回のマークアップの案件はいい経験にはなったが、ずっとやりたいとは思わない。もともと単価が安く、多分時給換算したら、最低時給の半分もいかないかと思う。まぁ勉強も兼ねてるので、お金の大小はあまり関係ないが、割に合わないかな、と思う。
マークアップエンジニアの人、尊敬します(^O^)／

つまづいた・わからなかったところ

html5タグ

nav

主要なナビゲーションに使うタグであり、全部のナビゲーションに使うのは間違い。例えば、フッターやヘッダーの小さなナビには使わない。
nav要素が一つだけである必要はなく、グローバルナビゲーションとローカルナビゲーションがあれば、これは主要なナビとして、使うべき。

section

テーマを持つまとまりのこと。
内部にできるだけh1タグがはいることが推奨されている。

article

独立した記事であることを示す。
文章以外でも、コンテンツならばOK

おまけ：div

div要素はほかのどの要素も適当でないときに、最後の頼みの綱として使用することができる

単位

px

• みんな最初はこれから始める（？）単位
• length型
• 画面解像度(dpi)に依存する
• 本来は相対的な単位であるが、実際は絶対的な単位として使用されている。

%

• percentage型
• その要素の親要素の幅を基準とした割合となる。

rem

• htmlやbodyのフォントサイズを基準とした単位
• 親要素のフォントサイズが変わっても、html・bodyのフォントサイズが変わらなければ変化しない

em

• 親、祖先のフォントサイズを基準とした単位

vw,vh

• viewport widthとviewport height
• vw:ビューポートの幅に対する割合の単位
• vh:ビューポートの高さに対する割合の単位

display

displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用します。

inline

インライン要素とは、主に文章の一部として利用される要素でその前後は改行されません。
高さや幅などの指定ができない。（というかインラインには、長さという概念がない）

block

ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で 一般的なブラウザでは前後に改行が入って表示されます。

inline-block

インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。

inherit

親要素の値を継承する

http://www.htmq.com/style/display.shtml
http://postd.cc/how-well-do-you-know-display/