Created
April 7, 2014 11:42
-
-
Save yuitest/10018769 to your computer and use it in GitHub Desktop.
かなりシンプルな HTML のひな形。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ここにタイトルを入れる</title> | |
| <!-- <script src="http://code.jquery.com/jquery-latest.js"></script>--> | |
| <style> | |
| .simple { | |
| margin: 0 auto; | |
| font-family: "Courier New", monospace; | |
| width: 50%; min-width: 80em; | |
| border: solid 1px #ccc; | |
| } | |
| .simple h1 {text-align: center; } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="simple"> | |
| <h1>かなりシンプルなひな形</h1> | |
| <p>ここが本文だ。</p> | |
| </section> | |
| </body> | |
| </html> |
HTML でモックアップつくるときって、さくっと終わらせるつもりでも、
たいてい「 html があってー、body があってー、あー、別に表示だけだったらいらないけど、 title くらいはつけるかー、あ、文字化けしてる。 charset つけないと…。うーん、やっぱり中央に寄ってないと読みづらいなー、…」
ってやって延々と HTML を弄ることになる。ある種のこだわりが出てしまう。
20 行くらいの HTML を gist に載せると、まるで業界初心者みたいで面白い。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
(表示の見た目 + コードの可読性) / (保守の労力 + 行数) を最大にしたい。
「やったー、サーバの API かけたよー」
「うーん、概念実証として、ブラウザ上にまで表示したいなぁー」
「モックの用途だけど、この程度に Bootstrap (http://getbootstrap.com/) を使うのも大げさだ…」
という例に。
1 ファイル、可能な限り少ない行数でそこそこの見た目を実現します。