InDesignレイアウトとHTML5(CSS)レイアウトを比較作成。。。

みなさま
 
お疲れ様です。
大澤です。
 
紅葉の季節も終わってしまい、日増しに寒くなってきましたね。
「早く冬にならないかなぁ…。」
と以前のブログで書きましたが、やっぱり寒いのはヤダなぁ……w
風邪などひかないようにお過ごし下さい。
 
さて、休日には、趣味で訪れた山の写真を整理したり、それをInDesignやIllustratorなどでレイアウトしたりしております。
デザインは得意ではありませんが、プリントするもの、またはwebコンテンツにするものなど、色々と制作するのも楽しいものです。
 
下図をご覧下さい。
InDesignで作ってみました。
figure01
よく見かける(?)体裁ですが、これをHTML5、CSSで作成してみたいと思います。
※pixelで試作しましたが、どうも上手く出来ないのでpt指定にしてみました。
 
以前紹介した「Sublime Text」を起動し、File -> New File と新規ドキュメントを作成します。
過去記事はこちら→http://cteapp.blog.jp/archives/1037102016.html
01_SublimeText
右下のテキストタイプを「HTML」に設定します。
「Emmet」がインストールされていることを前提に「!」と入力しタブを押下します。
Web
まずは<body>内をコーディングして行きます。

  1. <body>
  2.   <article>
  3.     <section>
  4.       <h3>八ヶ岳 赤岳</h3>
  5.       <h4>標高:2,899m</h4>
  6.       <pre><p>最寄駅はJR茅野駅。登山口の美濃戸口まで茅野駅前よりバスでおよそ50分。美濃戸口よりおよそ1時間で南沢と北沢がある美濃戸分岐。□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□</p></pre>
  7.       <figure>
  8.         <img src="images/akadake.jpg">
  9.       </figure>
  10.     </section>
  11.   </article>
  12. </body>


InDesignの段落スタイルで「見出し(h3)」「中見出し(h4)」「本文(p)」と設定したので、HTMLでもそれぞれ <h3>タグ、<h4>タグ、<p>タグと付与します。
<p>タグの前に<pre>タグを入れているのは訳があります。
<p>タグだけだとダミー文字「□□□□◆□□□□◆」で改行されてしまうという不可思議な現象が起こり、それを回避するためです。
figure03
どうも、ダミー文字の「□□□□◆□□□□◆」が悪さをしているみたいです…。
CSSの「text-align:justify;」を外すと右のような表示になります。
そこで打ち込んだ文字をそのまま表示するという<pre>で挟み込んだというわけです。
figure05
ですが、今度は「ジャステファイ」設定の「text-align:justify;」が効かなくなるし、表示フォントも変わってしまいました。
表示させているChromeの設定を確認してみました。
 
右クリックから表示されるプルダウンメニューから「要素の検証」を選択します。
figure06
下図のように表示されるので「Elements」からタグを辿って行き<pre>を選びます。
すると右側の「Styles」に<pre>要素のCSSが表示されます。
さらに右端には「user agent stylesheet」と表示されています。
figure07
「user agent stylesheet」とはブラウザに設定されているCSSであり、<pre>要素の「font-family」には「monospaces(等幅フォント)」が設定されているということです。
Macでいう等幅フォントとは「Osaka -レギュラー-等幅」なので、それで表示されてしまったということです。
※ダミー文字「□□□□◆□□□□◆」の改行問題は解決出来ず……。
 時間のあるときに再検証してみます。
 スミマセンm( _ _ )m
 
次にCSSを書いていきます。
/*◯◯◯*/はコメント文です。説明を書いておきました。

  1. /*一度ユーザーエージェントスタイルシートの
  2. marginとpaddingの設定をリセットします。
  3. リセットCSSと呼ばれるものです。*/
  4. *{
  5.   margin:0; padding:0;
  6. }
  7. /*HTML5からの新要素「article」。
  8. それだけで完結できるセクションを表します。*/
  9. article{
  10.   width:300pt;/*幅を設定*/
  11.   height:415pt;/*高さを設定*/
  12.   margin:5pt;/*画面のX:0 Y:0表示されてしまうので5pt右下に表示*/
  13.   border:1pt solid #000000;/*線幅1pt、実線、黒の設定*/
  14. }
  15. /*見出し、中見出し、本文、画像を「section」として束ねてます。
  16. 「section」はHTML5からの新要素*/
  17. section{
  18.   margin:10pt;/*articleで設定した罫線から左右天地10ptの余白を付ける*/
  19. }
  20. /*見出し(h3)の設定*/
  21. h3{
  22.   font-size:30pt;/*フォントサイズ30pt*/
  23.   line-height:35pt;/*行送り35pt*/
  24. }
  25. /*中見出し(h4)の設定*/
  26. h4{
  27.   font-size:20pt;/*フォントサイズ20pt*/
  28.   line-height:25pt;/*行送り25pt*/
  29. }
  30. /*本文(p)の設定*/
  31. p{
  32.   word-wrap:break-word;/*行末での文字折り返しの設定*/
  33.   text-align:justify;/*ジェスティファイ設定*/
  34.   font-size:15pt;/*フォントサイズ15pt*/
  35.   line-height:20pt;/*行送り20pt*/
  36.   margin-bottom:10pt;/*下の画像との距離を設定*/
  37. }


というわけで、出来上がりました〜。
左がInDesign、右がHTML5。
figure09
今回、InDesignにはモリサワフォントを使用しました。
10月6日のAdobe Creative CloudのTypekitにモリサワフォントが追加というニュースは記憶に新しいと思います。
早速使ってみましたが、Typekitのモリサワフォントはwebフォントとしても使用することができます。
次回のブログでさらに作り込んでいきたいと思います。
To Be Continued
最後まで読んで下さり、ありがとうございましたm( _ _ )m