書き出し

締切済

質問者：leftydog
質問日時：2013/12/01 15:13
回答数：3件

Webサイト制作初心者です（勉強中）

PC用のWebサイト作ったときにスマホ、パッドに書き出す方法は

皆さんはどうされていますか？

何かソフトでスマホやパッドに最適に書き出す方法がありますか？

それとも地道にタグでレイアウトを設定しなおしていますか？

何か簡単でいい方法があれば教えてください。

よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2013/12/02 11:39

スタイルシートです。

HTMLと同じ場所にstyleSheet/というフォルダーを作って、standard.css,print.cssを入れておく。HTMLもCSSもShift_JISにしてください。
　ヘタなサイトや参考書じゃなく、まず仕様書を通読することから始めましょう。脇道にそれなくてすみます。

★http:はhttp：に置換してあるので戻す。
[standard.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;background-color:gray;}
p{text-indent:1em;}
h1,h2,h3,h4,h5,h6,p,ol,ul,dl{margin:0;line-height:1.6em;}
h1{padding-top:40px;}
div.header,div.section,div.footer,div.header div.nav ol{width:80%;min-width:470px;max-width:840px;margin:0 auto;padding:0.5%;}
div.header div.nav{position:fixed;width:100%;top:0;left:0;}
div.header div.nav ol{list-style:none;text-align:center;position:relative;z-index:1000;}
div.header div.nav ol li{display:inline-block;width:5em;}
div.section{position:relative;}
div.section div.section{width:60%;min-width:0;min-height:300px;margin-bottom:20px;border-radius:0 0 5px 5px;
box-shadow: 20px 10px 10px 5px rgba(0,0,0,0.4);}
div.section h2{width:60%;margin:0 auto;}
div.section div.nav,div.section div.aside{width:19%;height:100%;font-size:0.9em;position:absolute;top:0;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
div.header,div.footer{background-color:lime;}
div.section{background-color:white;}
div.section div.section{background-color:rgb(225,225,225);}
div.section div.aside,div.section div.nav{background-color:silver;}
div.header div.nav ol{background-color:aqua;}

[print.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
p{text-indent:1em;}
div.header,div.section,div.footer,#ANSWER{page-break-after:always}
div.section div.section{page-break-after:auto;}
h1,h2,h3,h4,h5,h6,p,ol,ul,dl{margin:0;line-height:1.6em;}
a:after{content:"\A →http://www.hoge.com"attr(href);white-space:pre;}
div.section div.nav a{text-decoration:none;color:black;}
div.section div.nav a:after{content:"　-----------P2";}

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん、早々のご回答ありがとうございます。

またご丁寧な長文にわたるご解説、心より感謝いたします。

書き出しをもの凄く安易に考えていました。

なにせ初心者でございますので、まだ理解できない部分もありますので、

これからプリントアウトしてじっくり勉強させていただきます。

誠にありがとうございました。

通報する

お礼日時：2013/12/02 21:22

No.2

回答者： ORUKA1951
回答日時：2013/12/02 11:32

No.1です。

様々なユーザーエージェントでの利用を想定する場合はHTMLを使いますが、そのサンプルです。
★すべてのユーザーエージェントに対応しています。
★screeメディアに対してはPC,スマホ共通です。必要に応じてmediaqueryを使って適用スタイルシートを分けても良い
★印刷時には表紙、本文、資料、フッタが別ページに印刷されます。
★検索エンジンにも対処しています。Lynxで確認済み
　サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。( https://support.google.com/webmasters/answer/357 … )
★HTML4.01strictです。HTML5の場合は、<div class="header|section|nav|aside|footer"></div>などは、それぞれ<header></header><section></section><nav></nav><aside></aside><footer></footer>になります。

＞それとも地道にタグでレイアウトを設定しなおしていますか？
　HTMLには文書構造しか書かないので、逆にとっても簡単になります。このHTMLだと製作もメンテナンスも楽ですね。

★ウィンドウ幅を小さくしたり広くして表示を確認、ブラウザの表示メニューから[スタイルシートを使用しない]にするとガラケーの表示。印刷プレビューで印刷時も確認できます。

＞Webサイト制作初心者です（勉強中）
　文書構造とプレゼンテーションの分離・・それをまず学んでください。HTML4.01のstrictを徹底的に・・transitinalやframesetじゃない!!・・・デザイン/レイアウトはHTMLの分担じゃない!!
　HTMLが書けるようになったら、スタイルシートを学びましょう。HTMLの文書構造を利用します。HTMLにはサンプルのようにレイアウトやデザインに関することは一切書かれていないとデザインが自由に出来ます。

＞何か簡単でいい方法があれば教えてください。
　「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　こんなHTMLを提示されたら、あなただって内容を書き換えるのは簡単ですよね。

★タブは＿に置換してあるので戻す。
★http:はhttp：に置換してあるので戻す。

<!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">
＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
＿<link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/Top">トップ</a></li>
＿＿＿＿<li><a href="/Products">製品</a></li>
＿＿＿＿<li><a href="/future">将来</a></li>
＿＿＿＿<li><a href="/Support">サポート</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section" id="QUESTION">
＿＿＿<h3>質問</h3>
＿＿＿<p>
＿＿＿＿PC用のWebサイト作ったときにスマホ、パッドに書き出す方法は皆さんはどうされていますか？
＿＿＿</p>
＿＿</div>
＿＿<div class="section" id="ANSWER">
＿＿＿<h3>回答</h3>
＿＿＿<p>
＿＿＿＿パソコン用、スマホ用、ガラケー用、プリンター用とわけて作ることはしません。たったひとつのHTMLを作成し、必要ならそれぞれのユーザーエージェント用にスタイルシートを書きます。
＿＿＿</p>
＿＿＿<blockquote cite="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">
＿＿＿＿<p>
＿＿＿＿＿HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
＿＿＿＿</p>
＿＿＿＿<address>
＿＿＿＿＿<a href="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">HTML4.01仕様書(邦訳)2.2.1 HTMLの略歴より</a>
＿＿＿＿</address>
＿＿＿</blockquote>
＿＿</div>
＿＿<div class="section" id="DATA">
＿＿＿<h3>資料</h3>
＿＿</div>
＿＿<div class="aside" id="APPENDIX">
＿＿＿<h3>脚注</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML 4.01 仕様書邦訳</a></li>
＿＿＿＿<li><a href="http：//momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html">CSS2.1(邦訳)</a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="nav" id="tableContent">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="#QUESTION">質問</a></li>
＿＿＿＿<li><a href="#ANSWER">回答</a></li>
＿＿＿＿<li><a href="#DATA">資料</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-11-30</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2013-12-01 05:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/12/01 18:21

そもそも、HTMLでウェブページを作るのは！！！！

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　ですよ。言い換えれば、たったひとつ!!「HTMLをひとつ書けば、どんな環境からも・・利用できる」ためにHTMLを使うのです。
　そのためには、「文書の構造をプレゼンテーションと切り離すこと」が必要で『それによって「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」のです。
　http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

　そもそも、ウェブを利用するのは、PCやスマホなどの視覚系ブラウザだけではありません。検索エンジンのようなものもありますし、携帯電話も点字端末もスクリーンリーダーもテレビでさえあります。印刷(プリンター)もありますし、スマホにしても毎年のように新しい機種が登場する。

　その対象ごとにページを作成するなんて非現実的です。

　だからHTMLを使うのですよ。

ですから、そもそも別のHTMLなんて書きません。