HP初心者です。

締切済

質問者：tasukete1g
質問日時：2013/12/12 01:08
回答数：9件

今月３日頃、勤めている会社の上司から
『会社のHPを作ってくれ』と頼まれました。
経験もなく初心者なので、一度は断ったのですが、
他の社員も年配が多いので僕しかいないとのこと。。。

会社からホームページビルダーを支給されたのですが、
それらしきものは出来上がるんですが、
いまいちピンときません。

ホームページに
http://www.niva-fa.com/top.html
にあるような縦線を両サイドに入れたいのですが
そのタグがわかりません。

HP作成に便利なソフト（特にフリーソフト）があれば
教えてください。
最近、部長にそろそろ試作品だけでも見せてほしいとプレッシャーかけられています。
試作品の期限は今年いっぱいなんです；；
小さな会社で、毎日社長が楽しみにしてるのを近くで見ているんです。
期待には答えたくて・・・・
だれか助けてください。。。。

通報する

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

質問の本文を隠す

回答 (9件)

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

No.9

回答者： yu2kama
回答日時：2013/12/13 17:22

スタイルシートチェックしたら色々ミスがあったので

html,body{
margin:0;padding:0;
font-size:12px;
background-color:rgb(220,220,220);
}
h2{display:none;}
div.header,div.section,div.footer{
position:relative;
width:90%;min-width:480px;max-width:900px;
margin:0 auto;padding:5px;
border:ridge 5px gray;
border-width: 0 3px;background-color:white;
}
div.header{padding-top:60px;}
div.section div.section{
position:static;
width:auto;min-width:0;margin:0;
border:none;
}
h1{width:90%;margin:0 auto;}
h1 img{display:block;width:100%;height:auto;}
div.header div.nav{
position:absolute;top:0px;width:100%;
font-weight:bold;
font-family:sans-serif;
text-align:center;font-size:1.5em;
}
div.header div.nav ol{
list-style:none;
margin:0;padding:0;
line-height:60px;
}
div.header div.nav ol li{
display:inline-block;width:10%;
min-width:4em;
position:relative;
}
div.header div.nav ol li a{
color:black;text-decoration:none;
display:block;
width:100%;height:100%;
}
div.header div.nav ol li a:hover{background-color:yellow;}
dl,dt,dd{font-weight:normal;margin:0.5em;padding:0;}
#gyoutai dt:before,div.footer h3:before{content:"★";}
div.footer h3{font-size:12px;font-weight:normal;}
#gyoutai dd{display:inline;}

- 0
- 件

通報する

No.7

回答者： ORUKA1951
回答日時：2013/12/13 11:48

ちょっと忘れてました。

border:solid 2px gry;
の次に、
border-width: 0 3px;
を追加する。

- 0
- 件

通報する

No.6

回答者： ORUKA1951
回答日時：2013/12/12 16:45

なぜ引き受ける前に相談しなかったのですか？？

＞ホームページに http://www.niva-fa.com/top.html にあるような縦線を両サイドに入れたいのですがそのタグがわかりません。
　そのレベルでは、正直に、はっきり言って無理です。今から15年前に勧告されたHTML4.01にて、『注意。 HTML文書作成の際に、整形目的で表を用いるオーサリングツールもあるが、これはすぐにアクセス性問題に突き当たる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と、明確に否定されています。それすら知らないということは致命的です。

★そのタグがわかりません。
　も違います。HTMLはHyper Text Markup Languageの略で、文字通り<h1>ここは見出し</h1><p>ここは段落</p>と言う風に、文章の構造をタグを使ってマークアップするもので、デザインとは別です。すなわち「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」で、表現はスタイルシートで行います。文書構造を示すタグが足りないときは、idやclass名をつけて文書構造を示します。『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　文書の内容を読み解き理解して最適なタグやid名class名をつける事は、どんな高額なオーサリングツールでも不可能なのは、容易に理解できると思います。こればっかりはあなたがするしかない!!!。

　上記のリンク先は必ず読んでください。そのうえで、簡単なサンプルを上げておきます。

※ウィンドウ幅を変えてテストすると幅広ディスプレイでもスマホでも利用できることがわかる。印刷もしてみて!!
※こんな簡単なHTMLですからメンテナンスも楽ですよ。テキストエディタだけで作ってます。
★:(半角)は、：(全角)に置換してあるので戻すこと
★タブは＿に置換してあるので戻すこと。
★HTMLと同じ場所にstyle.cssを置くこと。文字コードはShift_JISです。
[sample.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">
＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet.css">
</head>
<body>
＿<div class="header">
＿＿<h1><img src="http：//www.niva-fa.com/img/nfa-top.jpg" width="760" height="470" alt="Nivia"></h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">Home</a></a></li>
＿＿＿＿<li><a href="http：//www.niva-fa.com/fani.html">furniture</a></li>
＿＿＿＿<li><a href="http：//www.niva-fa.com/work.html">works</a></li>
＿＿＿＿<li><a href="http：//www.niva-fa.com/shop.html">showroom</a></li>
＿＿＿＿<li><a href="http：//www.niva-fa.com/access.html">map</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>業務内容</h2>
＿＿<div class="section">
＿＿＿<dl>
＿＿＿＿<dt>代表後藤明記</dt>
＿＿＿＿<dd>工務・デザイン担当</dd>
＿＿＿＿<dt>杉原功士</dt>
＿＿＿＿<dd>営業設計・プロデュース担当一級建築士インテリアプランナー</dd>
＿＿＿</dl>
＿＿</div>
＿＿<div class="section" id="gyoutai">
＿＿＿<dl>
＿＿＿＿<dt>業態</dt>
＿＿＿＿<dd>「家具から建築までを創造する」をコンセプトにオリジナル家具</dd>
＿＿＿＿<dd>オーダー家具</dd>
＿＿＿＿<dd>リフォーム</dd>
＿＿＿＿<dd>リノベーション</dd>
＿＿＿＿<dd>コンバージョン</dd>
＿＿＿＿<dd>建築企画設計・監理</dd>
＿＿＿＿<dt>一級建築設計事務所併設</dt>
＿＿＿</dl>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<h3>お問い合わせ先</h3>
＿＿<address><span class="zip-code">〒535-0003</span>＊＊＊市＊区＊＊4丁目3-5,<span class="tel">01-****-****</span>,<span class="fax">01-****-****</span>,<a href="mailt：---">------</a></address>
＿＿<p class="copyright">©Niva all rights reserved.</p>
＿</div>
</body>
</html>

[styleSheet.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;font-size:12px;}
h2{display:none;}
div.header,div.section,div.footer{position:relative;width:90%;min-width:480px;max-width:900px;margin:0 auto;border:solid 2px gry;}
h1{margin-top:80px;width:90%;margin:60px auto;}
h1 img{display:block;width:100%;height:auto;}
div.header div.nav{position:absolute;top:-60px;width:100%;font-weight:bold;font-family:sans-serif;text-align:center;font-size:1.2em;}
div.header div.nav ol{list-sytyle:none;margin:0;padding:0;line-height:60px;}
div.header div.nav ol li{display:inline-block;width:10%;min-width:4em;}
div.header div.nav ol li a{color:black;text-decoration:none;}
dl,dt,dd{font-weight:normal;margin:0.5em;padding:0;}
#gyoutai dt:before,div.footer h3:before{content:"★";}
div.footer h3{font-size:129x;font-weight:normal;}
#gyoutai dd{display:inline;}

- 0
- 件

通報する

No.5

回答者： hiyokophper
回答日時：2013/12/12 16:15

HPを０から知識なしで美しく作るのはすごく大変ですよね^^;

フリーでHPを作るソフト、よりもフリーでHPのテンプレートを探してくる方が手っ取り早くはあります。
既成のデザインを選択し、必要事項を書き換えるだけでそれらしいものが出来上がります^^
どこかで見たようなデザイン、になるのは否めませんが、メンテナンスなどを考えてもテンプレートを採用する利はあると思いますので、ご参考までに。

「HP　テンプレート　無料」などで検索を掛けられてご自分でご覧になるのが一番かとは思いますが、
いくつかリストアップしてみます。
どのサイトさんを利用されるにしても、そのサイトにある利用規約はしっかり目を通されてからご利用くださいませ。

http://tempnate.com/
http://nikukyu-punch.com/
http://f-tpl.com/

- 0
- 件

通報する

No.4

回答者： barusu0126
回答日時：2013/12/12 13:43

単純に線をつけたいなら、いくつか方法はありますが下記でできます。

---------------------------------------------------------
<style>
html , body {height:100%; margin:0; padding:0;}
body > #container {height:auto;}
#container {
height:100%;
min-height:100%;
background-color:#fff;
border:solid #666;
border-width:0 1px;
width:800px;
margin:0 auto;
}
</style>

<div id="container">
HP内容
</div>
---------------------------------------------------------
ホームページビルダーもそうですが、変なソフト使うとソースが汚く、後々編集が大変なのでお勧めしません。

極端な話、メモ帳で書いた方がきれいです。

HTMLやCSSの解説やサンプルはネット上にたくさんありますので、必要な方法をその都度ググるほうが知識として身に付くと思います。

今回の場合ですと「webサイト　縦　線」でそれらしきものがヒットします。

ただ単に縦に線を引いても途中で途切れてしまうので、上のサンプルは少しややこしいかもしれません。

- 0
- 件

通報する

No.3

回答者： lv4u
回答日時：2013/12/12 10:26

>>『会社のHPを作ってくれ』と頼まれました。

社長は、貴方に「りっぱな仏像を作ってくれないか？私らは年配だからできないけど、若い君ならできるだろう？ほら、ノミやノコギリなど道具と材料は用意したぞ！」って言っているようなものですね。
やっぱり、りっぱな仏像を彫るには、道具を使いこなす技術や木の性質を理解して、さらに仏教についての知識も必要になります。このどれも持っていない人に「彫れ！」というのは無理なことです。「１０年早い！！」っていうところでしょう。

>>HP作成に便利なソフト（特にフリーソフト）があれば
教えてください。

そういう便利なソフトってのは、仏像の例でいえば、ノコギリやノミの代わりに、電動ノコや電動ルーターなどの工具をつかうということでしょうね。
そういうツールがあっても、使いこなす技術と知識が無ければどうしようもありません。

>>だれか助けてください。。。。

プロに頼むしかないでしょう。最近では、以下のような「HP制作　４８，０００円！」なんて業者の広告が出ています。いくつかのデザインパターンの中から好みのものを選んで、微調整するのだと思いますけど、それでも十分な出来栄えになると思いますよ。

http://www.chaco-web.com/

- 0
- 件

通報する

No.2

回答者： hitomura
回答日時：2013/12/12 01:33

あなたが参考にしたいページのソースを確認しました。

……うん、これは参考にしちゃいけないページだわ。

このページは現在ではやってはいけないパターンの一つ
「table タグによるレイアウト」
をやってしまっています。
たぶん詳しい人が後から来るでしょうから簡素に言うと、
「ページの文章構造『のみ』を HTML で記述し、そのページに対してレイアウトや見た目を CSS でつける」
というのが現在やるべき web ページの作り方となっています。

- 0
- 件

通報する

No.1

回答者： drtyug
回答日時：2013/12/12 01:24

Tableタグで構成されております。

大雑把に解説しますと、列が3つあるテーブルです。
最初と最後の列は、すごく細くして線として見せてます。
真ん中の列の中に、表(table)を入れてコンテンツ(内容)をいれてます。

http://beginners.atompro.net/smpcss_vline00.html
こちらを参照するとご理解できるかと