- ベストアンサー
両端を開けたデザイン
ORUKA1951の回答
参考にされているマニュアルがとっても古いようです。 これには理由があります。 人の目で追いやすい一行の文字数は、横書きで、60文字程度でしょう。 最近は、テレビや1900pxのような幅広のものから、スマホのように横幅600px程度、携帯電話の480px程度まで、様々なディスプレイが存在するために、最大幅を指定することが多くなりました。 わざわざHTMLを使う理由は 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より これらを考えれば、幅広ウィンドウでも適当な幅で表示されるように作成するほうが良いでしょう。 ★なお、 ＞テーブルの横幅も100％にしているし、 tableはあくまで二次元以上のデータをマークアップするためのもので、デザインに使用すべきではありません。使用してはなりません。 ・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) と厳しい口調で指摘されていることです。1999年12月のHTML4.01の勧告以来!!!すでに13年経ってますから、さすがに今は、その形式で作成する人はないでしょう。 具体的には HTML5(まだ未勧告です) <body> <header>文書のヘッダ </header> <section> 本文 </section> <footer> フッタ(文書情報) </footer> </body> [HTML4.01] <body> <div class="header">文書のヘッダ </div> <div class="section"> 本文 </div> <div class="footer"> フッタ(文書情報) </div> </body> などになるでしょう。 その上で下記サンプルのように指定するだけで、ウィンドウ幅の90%だけど、最小640px,最大900pxで中央に配置されるようになります。 ★文字コードはShift_JISです。タブは＿に置換してあるので戻すこと。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strictです。右上のDATAタブでソースをチェックできます。 ★印刷プレビューで印刷の状況も確認すること。 ★ブラウザの表示メニューでスタイルシートなしにすると検索エンジンが見ている姿もわかる。 ★このようにHTMLにはデザイン的要素は何もないので、デザインはHTMLに手を加えることなく自由に変更できます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:90%;min-width:640px;max-width:860px;margin:0 auto;padding:10px 20px;} /* マージンや配置など */ h1,h2,h3,p{margin:0;line-height:1.6em;} div.section{position:relative;} div.section h2,div.section p{margin-left:200px;} div.section div.section{min-height:400px;width:auto;min-width:0;margin-left:200px;} div.section div.contentTable{position:absolute;top:10px;left:20px;width:190px;} div.section div.section p{margin-left:0;} /* わかりやすいように色づけ */ body{background-color:black;color:fuchsia;} div.header{background-color:green;} div.section{background-color:gray;} div.section div.section{background-color:blue;} div.footer{background-color:navy;} div.section div.contentTable{background-color:white;color:black;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- body{color:black;} div.section div.section{margin-left:5em;min-height:10cm;} div.header{page-break-after:always;} div.section div.contentTable{page-break-before:always;} div.section div.contentTable ol li{position:relative;line-height:2em;} div.contentTable a:after{position:absolute;right:1em;} div.contentTable a[href="#section1"]:after{content:"・・P.2";position:absolute;right:1em;} div.contentTable a[href="#section2"]:after{content:"・・P.2";} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section" id="SECTION1"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section"> ＿＿＿<h3>第一章</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="SECTION2"> ＿＿＿<h3>第二章</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<h3>本文目次</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#SECTION1">一章</a></li> ＿＿＿＿<li><a href="#SECTION2">ニ章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連するQ&A
- ホームページビルダー１５のサイトが開けない
ホームページビルダーのサイトが開けない ホームページビルダー１５のサイトが開けないようになってしまいました。 どうしたらサイトを開くことができるのでしょうか ホームページ・ビルダー15の製品ページ http://www.justsystems.com/jp/products/hpb_15/ ホームページ・ビルダー15のサポートページ http://support.justsystems.com/jp/app/servlet/pr … このサイトを見てもわからなかったのでわかりやすく教えてください。よろしくお願いします
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー14のCSS編集機能について。
ホームページビルダー14のCSS編集機能について。 これは実際のところ使いやすいのですか？ サイトにはとても改良されて初心者からベテランまでOKとのことです。 http://www.justsystems.com/jp/products/hpb/feature3.html
- ベストアンサー
- ホームページ作成ソフト
- スマートフォンのアプリを作るソフトは売っていないの
http://www.justsystems.com/jp/products/hpb/ ホームページビルダーは スマートフォンの画面は作れるようですが まだ、スマートフォンのアプリを作るソフトは発売されていないのでしょうか？ プログラムの知識がないとアプリは作れないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- ネットショップオーナー内にホームページビルダーが
昨日、http://okwave.jp/qa/q7857341.html で質問させていただいたものです。 殆ど素人ですがホームページを自分で作ろうと思い、また、いつかは通販サイト も作れたらいいな、と思い、昨日の質問を参考に ホームページビルダー１７ http://www.justsystems.com/jp/products/hpb/feature4.html を購入するつもりが ネットショップオーナー５ http://store.shopping.yahoo.co.jp/ebest/4988637155705.html を注文んしてしまいました。こちらにそもそもホームページビルダーの機能は ついておりますか？ついてなければ、そもそもＨＰ作れないのに 本末転倒です＞＜
- ベストアンサー
- インターネットビジネス
- テーブルレイアウトの外側
こんにちは。 現在テーブルレイアウトでホームページを作成しています。 http://www.shoshinsha.com/hp/ のようにテーブルレイアウト内側を白にして、何もないことがわかる様にテーブルレイアウトの外側を黒とか色を変えたいのです。 何かアドバイスをお願いします。
- ベストアンサー
- HTML
- 本当にホームページビルダーで
HPソフトの購入を考えています。 HPビルダーが簡単でイイかと思っており ビルダーのページを見ているのですが 本当にビルダーだけで、こんな見栄えのイイHPを作成出来るのでしょうか？ 例えば、ビルダーの紹介ページhttp://www.justsystems.com/jp/products/hpb/#h3_02 ホームページ・ビルダー16では、クオリティの高いデザインテンプレートを収録。テキストや画像を差し替えだけで、プロ顔負けのホームページを作れます。 との紹介があり6つのサンプルが表示できるようになっているのですが それの左下のサイトのようなHPを作成したいのですが それを作りたい場合、このビルダーを買ったら簡単に作れるのでしょうか？ それとも、このビルダーを購入して更に何か技術を身につける必要がありますか？ 現在使ってるソフトはビルダーの８とホームページZEROです。 どちらもイマイチな感じなので新しい物を買いたいと思っています。 ビルダー１６を買えばサンプル頁のようなサイトが簡単に出来るのであれば 是非購入したいと思いますが、実際にお持ちの方の感想など教えて下さい。 また、このサイトはビルダー16で作ってますよ。というサイトがあればご紹介下さい。
- ベストアンサー
- ホームページ作成ソフト
- 本当の初心者です、書かれている通りにやったのに・・・
http://www.shoshinsha.com/hp/1hour/1hour01.html を見ながらやっているんですが、最初からつまずいています・・・。 「フォルダとファイルを用意する。」という所で、 「「hp」フォルダの中で右クリック→新規作成→テキストドキュメント(テキスト文章)を選ぶ。新しく作ったファイルは「新規テキストドキュメント」という名前になっているので「index.html」に変更。名前の変更は「右クリック→名前の変更」で出来るぞ。」 となっているのでやってみましたが、この画像ではインターネットのものが出るみたいですが、私がやるとメモ帳しか出てきません。 ちなみに、 「「登録されているファイルの拡張子は表示しない」 のチェックをはずす。」 は、やりました。 どこが間違っているんでしょうか？
- ベストアンサー
- レンタルサーバ・ASP
- DreamweaverMX2004でのテーブルの縦横中央配置について
失礼します。 以前、Dreamweaver MXを使っていて、縦横100％のテーブルの中に中央配置したテーブルを置くことによって、ブラウザ上でのＨＰの中央配置が可能だったのですが、MX 2004にしてから、同じように作業をしても左右は中央配置になるのですが、縦だけがどうしても上詰め配置になってしまします。 これはMX 2004のバグなのでしょうか？ もしこれを解決する方法があれば、教えてください。よろしくお願いいたします。 ちなみに7.01のアップデータもあててあります。
- ベストアンサー
- CSS
- KIS2009で約45分に1回更新されない
KIS2009の試用版をインストールしてみました。 http://www.justsystems.com/jp/products/kaspersky/ 更新は「自動開始」にしています。 しかしHPに載っているように約45分に1回の更新が行われません。 ずっと様子を見ていますが、3時間に1回くらいです。 これは誇大広告ではないでしょうか？
- 締切済み
- ウィルス・マルウェア
- 凝ったHPを作りたい
アイドルサイトを作るために凝ったHPを つくりたいと思っています。 お金をかけずにwww.tsujikago.comや www.puchikomi.netやhttp://haromoni.com的な HPを作りたいのですが・・・(HPB6.0ならもっています。) なるべくJava等を覚えるよな事はしたくありません。
- 締切済み
- HTML
お礼
ご回答ありがとうございます。