- 締切済み
書き出し
Webサイト制作初心者です（勉強中） PC用のWebサイト作ったときにスマホ、パッドに書き出す方法は 皆さんはどうされていますか？ 何かソフトでスマホやパッドに最適に書き出す方法がありますか？ それとも地道にタグでレイアウトを設定しなおしていますか？ 何か簡単でいい方法があれば教えてください。 よろしくお願いします
- leftydog
- お礼率88% (40/45)
- ホームページ作成ソフト
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートです。 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";}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 様々なユーザーエージェントでの利用を想定する場合はHTMLを使いますが、そのサンプルです。 ★すべてのユーザーエージェントに対応しています。 ★screeメディアに対してはPC,スマホ共通です。必要に応じてmediaqueryを使って適用スタイルシートを分けても良い ★印刷時には表紙、本文、資料、フッタが別ページに印刷されます。 ★検索エンジンにも対処しています。Lynxで確認済み サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。( https://support.google.com/webmasters/answer/35769?hl=ja#2 ) ★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-html401j/intro/intro.html#h-2.4.1 )」 こんな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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそも、HTMLでウェブページを作るのは！！！！ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より ですよ。言い換えれば、たったひとつ!!「HTMLをひとつ書けば、どんな環境からも・・利用できる」ためにHTMLを使うのです。 そのためには、「文書の構造をプレゼンテーションと切り離すこと」が必要で『それによって「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」のです。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 そもそも、ウェブを利用するのは、PCやスマホなどの視覚系ブラウザだけではありません。検索エンジンのようなものもありますし、携帯電話も点字端末もスクリーンリーダーもテレビでさえあります。印刷(プリンター)もありますし、スマホにしても毎年のように新しい機種が登場する。 その対象ごとにページを作成するなんて非現実的です。 だからHTMLを使うのですよ。 ですから、そもそも別のHTMLなんて書きません。
関連するQ&A
- WEBレイアウトについて。
MicrowordのＷＥＢレイアウトでHPを作りました。 FFFTPを使い、忍者サーバーにて制作したのですが・・・ WEBレイアウトでタグを使うにはどうしたらいいんでしょうか。 普通に＜HTML＞等を打つとそのまま出てきます。 先生は出来ると言っていたのですが・・・ 詳しいやり方は判らなかったようなのです。 ご存知の方は是非教えて下さい。 PC初心者の為、判りやすく教えて下さると とても嬉しいです。
- ベストアンサー
- レンタルサーバ・ASP
- Web制作 レイアウトの決め方について
Web制作 レイアウトの決め方について HTML、CSSでWebサイト制作をしているWeb業界未経験のものです。 実際サイトを作る時に、何をどこに配置するといったレイアウトを決めると思うのですが、皆さんは綺麗に見せるためのレイアウト方法や、何か型や、テンプレートのようなものを参考にしながら作っているのでしょうか？ 私は未経験からWebデザイナーへの転職用の作品を作っている最中なのですが、レイアウトはなんとなく自分の勘で決めて作っていたので、それだとあまり作品の完成度としてはイマイチになってしまう気がするのですが、何かアドバイス頂けると幸いです。 ちなみにお皿のブランドサイトを作っています。
- 締切済み
- デザイナー・クリエイティブ職
- FireworksでのHTML書き出しについて
HTML、CSSを勉強中の初心者です。 初歩的な質問ですが、お答えいただけると幸いです。 Webページ制作について自分なりに色々調べていたところ、一般的にWebページを作る場合、FireworksでHPをレイアウトし、スライス→書き出しをした後に、書き出した画像を一つ一つ（手打ち、もしくはDreamweaverなどで）配置する、というのが主流のようです。 しかし、実際にFireworks CS6を使ってみたところ、書き出し時に「HTMLと画像の書き出し」、「CSSと画像の書き出し」というものがありました。 「HTMLと画像の書き出し」では、テーブルが使用されているため、現在は推奨されないと思いますので、使用されないのはわかるのですが、「CSSと画像の書き出し」では、現在主流となっているCSSでのレイアウトになっているようでした。 書き出されたHTMLを確認してみたところ、表示・ソースも一見問題ないように見えたのですが、この機能があまり使われていないのはなぜでしょうか。 ※もちろん、この書き出しはただ一枚のページを作っただけで、そこから様々な動作をつけるのは自分でやらなければいけないのは理解しています。
- ベストアンサー
- その他Adobe製品
- スマホ向けのウェブサイトはどう思いますか？
趣味でウェブ製作をしている者です。 さて、最近スマホからウェブを見る機会が皆さん増えているかと思います。 一般的にウェブサイトはパソコンからアクセスをすることが前提で作られてきましたが、スマホの普及により、スマホ向けのレイアウトで作られたサイトも増えてきました。 あくまで私の個人的な意見ですが、スマホからアクセスする場合であっても、パソコン向けにサイトを表示するほうが、情報量が多く、文字は細かくはなってしまいますが利便性は高いと感じています。 そこで質問なのですが、みなさんはスマホからウェブページを見る際、パソコン向けの画面がいいか、スマホ向けの画面が良いか、ご意見をお願いします。 ＊私の運営しているサイトではありませんが、丁度いいサイトがありましたのでイメージは以下のような感じです こちらがスマホ向けのレイアウト http://www.d-navi.info/dq4/ こちらがＰＣ向けのレイアウト http://www.d-navi.info/dq6/ 是非参考にさせてください。よろしくお願いします。
- ベストアンサー
- アンケート
- web制作 レイアウトの崩れ Chromeです。
web 制作初心者です。 ブラウザでのレイアウト崩れについて質問させて下さい。 制作に使った MacbookAir からChrome で表示させた際、 http://horihime0310.com ではレイアウトが崩れ http://www.horihime0310.com ではレイアウトが崩れません。 検証の為、別PCの windows7から Chromeを使って調べた結果、 どちらの URLでも崩れませんでした。 Chromeのキャッシュとクッキーはメニューの設定から 観覧履歴のデータ消去で行いましたが解決できませんでした。 これは何が原因でしょうか？そしてどう対応すればレイアウトが崩れないか、 どなたか教えて頂ければ幸いです。
- ベストアンサー
- その他([技術者向] コンピューター)
- アノニマスFTPについて
WEBを最近制作し始めた初心者です｡ 私が困っていることは、よく見かけるWEB上で画像や、資料、オンラインソフトなどをダウンロードするための設定方法を教えて欲しいのです｡ アノニマスFTPや、テレネット等耳にはしますが、どういった意味かがわかりません。 是非、ダウンロードサイトの作り方をお教えください｡
- ベストアンサー
- その他（インターネット・Webサービス）
- HP制作ソフトと動画の載せ方
サイトを作ってみようと考えているのですが、タグの知識がほとんどないのでタグをあまり使わないでHPが制作できるソフトを探しています。 お店に行ったり、ネトショを見ても種類が多すぎてどれがいいのかさっぱりです。 皆さんのお薦めや使いやすいソフトを教えて下さい！ それと動画を載せたいので、載せ方の方法も教えて下さい。 よろしくお願いします
- ベストアンサー
- ホームページ作成ソフト
- WEB用画像の書き出しはどれを使いますか？
はじめまして。 現在、WEB製作を勉強しているものですが、バナーやメニュー等のパーツをWEB用の画像書き出しを する際には、photoshop、illustrator、fireworksのどのソフトを使うのが良いのでしょうか。 操作自体は、３つとも、同じくらいできるのですが、fireworksでは画像が綺麗ではないとか、 photoshopは、操作性がいまひとつ等。。。いろいろ聞くのですが、どれが一番効率がよいのでしょうか。 現在は、photoshopで全体のレイアウトも画像の書き出しをやっていたのですが、レイアウトだけでしたら、fireworks、illustratorの方が使いやすいかと思い、fireworksを試しております。 また、illustratorでは、アンチエイリアスがきいて、ピクセルがずれたりしてしまい、手間が かかってしまいます。 どのソフトでもできることは、理解しているのですが、クオリティを一番高く保ちながら、効率よいやり方がありましたら、ぜひともご教示頂けましたら幸いです。 有識者の方、よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- クックパッドのようなウェブサイトはどう作る？
クックパッドのようなウェブサイトを作ってみたいなと思っているのですが、 どうやったら、あんなサイトは作れるのでしょうか？ どんなソフトならできるのか？ 制作費用はどれぐらいかかるものでしょうか？ 外注するなら、どんなことが得意な会社に頼めばいいのか？ ウェブのことは全く詳しくなくて、分からないことだらけなのですが、 どうぞよろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- htmlでのサイト作り、スマホでの表示
初めてhtmlでサイトを作りました。 金銭的に厳しく、タグもそこそこ勉強してメモ張だけで制作したのですが、 かなり自分の思ったように作ることが出来て満足していました。 そして今日fc2ホームページでサーバーをお借りし、初めてスマートフォンで 閲覧してみました。 するとパソコンで見ていたものと異なり、 大きな画像・テーブルは正常に表示されたのですが、 小さな画像・文字が変なところで改行されてしまい、見栄えが非常に悪く困っています。 スマホのページ自動調節機能を外せばパソコンで見た通りに表示されるので サイトマップに注釈を付けたのですが 見に来てくださった方々皆様にそのようなことを命令してしまうのは失礼だと思うんです。 なので、出来れば改善方法を教えてください。 どんなタグを追加すればいい等を知りたいです。 パソコンでの見栄えを悪くしたくないのでテーブルのサイズや文字一行の幅を削りたくありません。 全くの初心者なのでお手柔らかにお願いいたします。 また、スマホはAndloid、バージョン4.1.2を使用しています。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
お礼
ORUKA1951さん、早々のご回答ありがとうございます。 またご丁寧な長文にわたるご解説、心より感謝いたします。 書き出しをもの凄く安易に考えていました。 なにせ初心者でございますので、まだ理解できない部分もありますので、 これからプリントアウトしてじっくり勉強させていただきます。 誠にありがとうございました。