InDesignレイアウトとHTML5(CSS)レイアウトを比較作成。。。
みなさま
お疲れ様です。
大澤です。
紅葉の季節も終わってしまい、日増しに寒くなってきましたね。
「早く冬にならないかなぁ…。」
と以前のブログで書きましたが、やっぱり寒いのはヤダなぁ……w
風邪などひかないようにお過ごし下さい。
さて、休日には、趣味で訪れた山の写真を整理したり、それをInDesignやIllustratorなどでレイアウトしたりしております。
デザインは得意ではありませんが、プリントするもの、またはwebコンテンツにするものなど、色々と制作するのも楽しいものです。
下図をご覧下さい。
InDesignで作ってみました。
よく見かける(?)体裁ですが、これをHTML5、CSSで作成してみたいと思います。
※pixelで試作しましたが、どうも上手く出来ないのでpt指定にしてみました。
以前紹介した「Sublime Text」を起動し、File -> New File と新規ドキュメントを作成します。
過去記事はこちら→http://cteapp.blog.jp/archives/1037102016.html
右下のテキストタイプを「HTML」に設定します。
「Emmet」がインストールされていることを前提に「!」と入力しタブを押下します。
まずは<body>内をコーディングして行きます。
- <body>
- <article>
- <section>
- <h3>八ヶ岳 赤岳</h3>
- <h4>標高:2,899m</h4>
- <pre><p>最寄駅はJR茅野駅。登山口の美濃戸口まで茅野駅前よりバスでおよそ50分。美濃戸口よりおよそ1時間で南沢と北沢がある美濃戸分岐。□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□□□◆□□</p></pre>
- <figure>
- <img src="images/akadake.jpg">
- </figure>
- </section>
- </article>
- </body>
InDesignの段落スタイルで「見出し(h3)」「中見出し(h4)」「本文(p)」と設定したので、HTMLでもそれぞれ <h3>タグ、<h4>タグ、<p>タグと付与します。
<p>タグの前に<pre>タグを入れているのは訳があります。
<p>タグだけだとダミー文字「□□□□◆□□□□◆」で改行されてしまうという不可思議な現象が起こり、それを回避するためです。
どうも、ダミー文字の「□□□□◆□□□□◆」が悪さをしているみたいです…。
CSSの「text-align:justify;」を外すと右のような表示になります。
そこで打ち込んだ文字をそのまま表示するという<pre>で挟み込んだというわけです。
ですが、今度は「ジャステファイ」設定の「text-align:justify;」が効かなくなるし、表示フォントも変わってしまいました。
表示させているChromeの設定を確認してみました。
右クリックから表示されるプルダウンメニューから「要素の検証」を選択します。
下図のように表示されるので「Elements」からタグを辿って行き<pre>を選びます。
すると右側の「Styles」に<pre>要素のCSSが表示されます。
さらに右端には「user agent stylesheet」と表示されています。
「user agent stylesheet」とはブラウザに設定されているCSSであり、<pre>要素の「font-family」には「monospaces(等幅フォント)」が設定されているということです。
Macでいう等幅フォントとは「Osaka -レギュラー-等幅」なので、それで表示されてしまったということです。
※ダミー文字「□□□□◆□□□□◆」の改行問題は解決出来ず……。
時間のあるときに再検証してみます。
スミマセンm( _ _ )m
次にCSSを書いていきます。
/*◯◯◯*/はコメント文です。説明を書いておきました。
- /*一度ユーザーエージェントスタイルシートの
- marginとpaddingの設定をリセットします。
- リセットCSSと呼ばれるものです。*/
- *{
- margin:0; padding:0;
- }
- /*HTML5からの新要素「article」。
- それだけで完結できるセクションを表します。*/
- article{
- width:300pt;/*幅を設定*/
- height:415pt;/*高さを設定*/
- margin:5pt;/*画面のX:0 Y:0表示されてしまうので5pt右下に表示*/
- border:1pt solid #000000;/*線幅1pt、実線、黒の設定*/
- }
- /*見出し、中見出し、本文、画像を「section」として束ねてます。
- 「section」はHTML5からの新要素*/
- section{
- margin:10pt;/*articleで設定した罫線から左右天地10ptの余白を付ける*/
- }
- /*見出し(h3)の設定*/
- h3{
- font-size:30pt;/*フォントサイズ30pt*/
- line-height:35pt;/*行送り35pt*/
- }
- /*中見出し(h4)の設定*/
- h4{
- font-size:20pt;/*フォントサイズ20pt*/
- line-height:25pt;/*行送り25pt*/
- }
- /*本文(p)の設定*/
- p{
- word-wrap:break-word;/*行末での文字折り返しの設定*/
- text-align:justify;/*ジェスティファイ設定*/
- font-size:15pt;/*フォントサイズ15pt*/
- line-height:20pt;/*行送り20pt*/
- margin-bottom:10pt;/*下の画像との距離を設定*/
- }
というわけで、出来上がりました〜。
左がInDesign、右がHTML5。
今回、InDesignにはモリサワフォントを使用しました。
10月6日のAdobe Creative CloudのTypekitにモリサワフォントが追加というニュースは記憶に新しいと思います。
早速使ってみましたが、Typekitのモリサワフォントはwebフォントとしても使用することができます。
次回のブログでさらに作り込んでいきたいと思います。
To Be Continued
最後まで読んで下さり、ありがとうございましたm( _ _ )m