• 締切済み

HP初心者です。

今月３日頃、勤めている会社の上司から 『会社のHPを作ってくれ』と頼まれました。 経験もなく初心者なので、一度は断ったのですが、 他の社員も年配が多いので僕しかいないとのこと。。。 会社からホームページビルダーを支給されたのですが、 それらしきものは出来上がるんですが、 いまいちピンときません。 ホームページに http://www.niva-fa.com/top.html にあるような縦線を両サイドに入れたいのですが そのタグがわかりません。 HP作成に便利なソフト（特にフリーソフト）があれば 教えてください。 最近、部長にそろそろ試作品だけでも見せてほしいとプレッシャーかけられています。 試作品の期限は今年いっぱいなんです；； 小さな会社で、毎日社長が楽しみにしてるのを近くで見ているんです。 期待には答えたくて・・・・ だれか助けてください。。。。

  • CSS
  • 回答数9
  • ありがとう数0

みんなの回答

回答No.9

最新版ならホームページビルダーについてくるテンプレートをお勧めします。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.8

スタイルシートチェックしたら色々ミスがあったので 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;}

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.7

ちょっと忘れてました。 border:solid 2px gry; の次に、 border-width: 0 3px; を追加する。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

なぜ引き受ける前に相談しなかったのですか？？ ＞ホームページに http://www.niva-fa.com/top.html にあるような縦線を両サイドに入れたいのですがそのタグがわかりません。 　そのレベルでは、正直に、はっきり言って無理です。今から15年前に勧告されたHTML4.01にて、『注意。 HTML文書作成の際に、整形目的で表を用いるオーサリングツールもあるが、これはすぐにアクセス性問題に突き当たる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.3 )』『単に文書内容を整形する目的だけで表を用いるべきでない。( 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 )』と、明確に否定されています。それすら知らないということは致命的です。 ★そのタグがわかりません。 　も違います。HTMLはHyper Text Markup Languageの略で、文字通り<h1>ここは見出し</h1><p>ここは段落</p>と言う風に、文章の構造をタグを使ってマークアップするもので、デザインとは別です。すなわち「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」で、表現はスタイルシートで行います。文書構造を示すタグが足りないときは、idやclass名をつけて文書構造を示します。『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 　文書の内容を読み解き理解して最適なタグや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">&copy;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;}

回答No.5

HPを０から知識なしで美しく作るのはすごく大変ですよね^^; フリーでHPを作るソフト、よりもフリーでHPのテンプレートを探してくる方が手っ取り早くはあります。 既成のデザインを選択し、必要事項を書き換えるだけでそれらしいものが出来上がります^^ どこかで見たようなデザイン、になるのは否めませんが、メンテナンスなどを考えてもテンプレートを採用する利はあると思いますので、ご参考までに。 「HP　テンプレート　無料」などで検索を掛けられてご自分でご覧になるのが一番かとは思いますが、 いくつかリストアップしてみます。 どのサイトさんを利用されるにしても、そのサイトにある利用規約はしっかり目を通されてからご利用くださいませ。 http://tempnate.com/ http://nikukyu-punch.com/ http://f-tpl.com/

回答No.4

単純に線をつけたいなら、いくつか方法はありますが下記でできます。 --------------------------------------------------------- <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サイト　縦　線」でそれらしきものがヒットします。 ただ単に縦に線を引いても途中で途切れてしまうので、上のサンプルは少しややこしいかもしれません。

  • lv4u
  • ベストアンサー率27% (1862/6715)
回答No.3

>>『会社のHPを作ってくれ』と頼まれました。 社長は、貴方に「りっぱな仏像を作ってくれないか？私らは年配だからできないけど、若い君ならできるだろう？ほら、ノミやノコギリなど道具と材料は用意したぞ！」って言っているようなものですね。 やっぱり、りっぱな仏像を彫るには、道具を使いこなす技術や木の性質を理解して、さらに仏教についての知識も必要になります。このどれも持っていない人に「彫れ！」というのは無理なことです。「１０年早い！！」っていうところでしょう。 >>HP作成に便利なソフト（特にフリーソフト）があれば 教えてください。 そういう便利なソフトってのは、仏像の例でいえば、ノコギリやノミの代わりに、電動ノコや電動ルーターなどの工具をつかうということでしょうね。 そういうツールがあっても、使いこなす技術と知識が無ければどうしようもありません。 >>だれか助けてください。。。。 プロに頼むしかないでしょう。最近では、以下のような「HP制作　４８，０００円！」なんて業者の広告が出ています。いくつかのデザインパターンの中から好みのものを選んで、微調整するのだと思いますけど、それでも十分な出来栄えになると思いますよ。 http://www.chaco-web.com/

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.2

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

noname#209234
noname#209234
回答No.1

Tableタグで構成されております。 大雑把に解説しますと、列が3つあるテーブルです。 最初と最後の列は、すごく細くして線として見せてます。 真ん中の列の中に、表(table)を入れてコンテンツ(内容)をいれてます。 http://beginners.atompro.net/smpcss_vline00.html こちらを参照するとご理解できるかと

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 超初心者へのＨＰの作り方の説明方法について

    私自身、ＨＰは作成したことがあるのですが、学校でタグを使って作成した為、ソフトを使った事がありません。 友達に「ＨＰの作り方を教えて欲しい」と言われたのですが、 どうやって教えたらいいのか、悩んでいます。 友達は、インターネットも最近始めたばかりと言う状態です。 初心者でも簡単に出来る、『ホームページビルダー』での作成が無難ですよね？ この使い方が簡単に説明されているサイトなどご存知の方教えてください。 よろしくお願いします。

  • ＨＰ制作について教えてください。

    ＨＰ制作会社などはFlashなどで作ることは聞いたことはありますが、html タグだけで制作したりするんでしょうか？たとえばＨＰビルダーのような支援ソフトを混ぜながら制作していくのでしょうか？ またＨＰビルダーや簡単に使える支援ソフトだけしか使えないようなレベルでも会社として経営しているような会社ってあるのでしょうか？ すごく興味本位な疑問ですが宜しくお願いします。

  • (^。^)　ＨＰを作るなら、「ホームページビルダー」を買うのが一番かしこい？

    　自分のホームページを作りたいんですが、正式に作るには、ｈｔｍｌファイル、タグ、ＦＴＰなど、いろいろ難しいことをべんきょうする必要があるとか…… 　よく耳にする「ホームページビルダー」というソフトを買えば、そういう専門的なことをべんきょうしなくても、かんたんにＨＰができるんでしょうか？ 　ｈｔｍｌファイル、タグ、ＦＴＰなど、頭が痛くなるようなことにわずらわされることなく、さっさと「ビルダー」を買うほうがかしこいですか？

  • HP作成初心者です。

    　いつもお世話になります。 仕事でＨＰを作成を頼まれてしまいました。 まったくの初心者なのでホームページビルダーを使用するつもりですがどのバージョンが使いよいのかわかりません。（ソフト購入費用は会社が出してくれます）簡単なページを作成するだけなので一番操作が簡単なバージョンを教えてください。 　よろしくお願いします。

  • HP作成～初心者～

    皆さんに教えていただきたいのですが、ホームページビルダーなどを使わずに（ソフトを使わずに）HPを作成することって可能ですか？ 可能でしたら、どう行うのか是非教えてください。そのつくったものを掲載するやりかたや、料金がかかればそれはどれくらいなのか？などが全然わかりません。少し検索して調べましたが、自分にはわかりずらく、皆さんにおちからをお借りできればと思います。 　宜しくお願いいたします！！！！！！

  • メモ帳を使ってのHP作成

    今まではホームページビルダーでHPを作成していたのですが、 最近覚えた「HTMLタグ」を使ってHPを作りたいなと思い、 メモ帳を開いてタグを打ち込み、拡張子を「.htm」にして保存しました。 それをダブルクリックして開くとちゃんと表示されるのですが、 ホームページビルダーについていた「ファイル転送」のソフトを使ってアップロードすると、 ブラウザ上でちゃんと表示することができませんでした。 文章は表示されるのですが、壁紙やスクロールバーなどが全く見ることが出来ません。 ファイルをダブルクリックで開くと問題なく見れるので、タグを間違えているということはないと思うのですが・・・ アップロードするために必要なタグがあるんですか？ どうすれば表示できるようになりますか？教えてください。 壁紙として使っている画像（png）も一緒にアップロードしています。

  • HPのセキュリティについて

    会社でHPを立ち上げることになり管理を任されました。 現在は管理会社へ委託して更新している状態です。 何とか現状を変えたいと思っているのですが、 その際に企業としてのHPとは何か、と疑問になりました。 HPの内容を書き換えられた、情報が盗まれた、では困ります。 今回ご質問したいのはそういったものに耐えれるHPを作るにはどのようなことが必要なのか、ということです。 ・タグ打ち。 ・ビルダー等の市販ソフト。 ・業者で使っているソフト（？） 個人的にはタグ打ちで作りたいと思っています。

  • 一般HP→ホームページビルダーの移行について・・・

    一般のHP作成サイトでサイトを運営していますが、ホームページビルダーに乗り換えようと思っています。 そこで質問なのですが、一般のHPの内容（自分のHP）をホームページビルダーに移すことはできないんですか？ mobile spaceと言うところで作っていますが、そこのサイトはタグを入力して作ります。なので、そのタグを全部コピーして、ビルダーに貼り付ければ可能かと思ったのですが・・・ 分かる方がいましたら教えてください。

  • 初心者です。

    こんにちわ、お世話になります。 今度、会社のＨＰを管理することになったのですが 以前に作成したソフトがFrontPage 4.0なのですが これをビルダーの2000で今後やっていきたいと考えてますが、ソフト上で問題があるのでしょうか？ タグでの作成は経験があるのですが ソフトでの作成経験が少ないので困っています。 アドバイス宜しくお願いします。

  • HPに動画を差し込みたい

    HPに動画を差込みたいのですが、現在、IBMのホームページビルダーを使用して差し込んでみたものの、そのページが重くなってしまいます。見る方の接続環境がADSLなどならば良いのですが、まだまだナローバンドの方もいらっしゃるようなので、困っています。 以前、ライブドアのホームページで、堀江社長が動画でニュースを配信しているのをみたのですが、すごく画像もきれいですし、あのような動画をHPに指し込むにはどのようなソフトがおすすめでしょうか？教えてください

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する