![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
今月3日頃、勤めている会社の上司から
『会社のHPを作ってくれ』と頼まれました。
経験もなく初心者なので、一度は断ったのですが、
他の社員も年配が多いので僕しかいないとのこと。。。
会社からホームページビルダーを支給されたのですが、
それらしきものは出来上がるんですが、
いまいちピンときません。
ホームページに
http://www.niva-fa.com/top.html
にあるような縦線を両サイドに入れたいのですが
そのタグがわかりません。
HP作成に便利なソフト(特にフリーソフト)があれば
教えてください。
最近、部長にそろそろ試作品だけでも見せてほしいとプレッシャーかけられています。
試作品の期限は今年いっぱいなんです;;
小さな会社で、毎日社長が楽しみにしてるのを近くで見ているんです。
期待には答えたくて・・・・
だれか助けてください。。。。
A 回答 (9件)
- 最新から表示
- 回答順に表示
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;}
No.6
- 回答日時:
なぜ引き受ける前に相談しなかったのですか??
>ホームページに 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;}
No.5
- 回答日時:
HPを0から知識なしで美しく作るのはすごく大変ですよね^^;
フリーで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サイト 縦 線」でそれらしきものがヒットします。
ただ単に縦に線を引いても途中で途切れてしまうので、上のサンプルは少しややこしいかもしれません。
No.3
- 回答日時:
>>『会社のHPを作ってくれ』と頼まれました。
社長は、貴方に「りっぱな仏像を作ってくれないか?私らは年配だからできないけど、若い君ならできるだろう?ほら、ノミやノコギリなど道具と材料は用意したぞ!」って言っているようなものですね。
やっぱり、りっぱな仏像を彫るには、道具を使いこなす技術や木の性質を理解して、さらに仏教についての知識も必要になります。このどれも持っていない人に「彫れ!」というのは無理なことです。「10年早い!!」っていうところでしょう。
>>HP作成に便利なソフト(特にフリーソフト)があれば
教えてください。
そういう便利なソフトってのは、仏像の例でいえば、ノコギリやノミの代わりに、電動ノコや電動ルーターなどの工具をつかうということでしょうね。
そういうツールがあっても、使いこなす技術と知識が無ければどうしようもありません。
>>だれか助けてください。。。。
プロに頼むしかないでしょう。最近では、以下のような「HP制作 48,000円!」なんて業者の広告が出ています。いくつかのデザインパターンの中から好みのものを選んで、微調整するのだと思いますけど、それでも十分な出来栄えになると思いますよ。
http://www.chaco-web.com/
No.2
- 回答日時:
あなたが参考にしたいページのソースを確認しました。
……うん、これは参考にしちゃいけないページだわ。
このページは現在ではやってはいけないパターンの一つ
「table タグによるレイアウト」
をやってしまっています。
たぶん詳しい人が後から来るでしょうから簡素に言うと、
「ページの文章構造『のみ』を HTML で記述し、そのページに対してレイアウトや見た目を CSS でつける」
というのが現在やるべき web ページの作り方となっています。
No.1
- 回答日時:
Tableタグで構成されております。
大雑把に解説しますと、列が3つあるテーブルです。
最初と最後の列は、すごく細くして線として見せてます。
真ん中の列の中に、表(table)を入れてコンテンツ(内容)をいれてます。
http://beginners.atompro.net/smpcss_vline00.html
こちらを参照するとご理解できるかと
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css&html テキストの前に三角...
-
css初心者 フレックスボックス...
-
<div>と<div>の間の10px程の...
-
widthやheightの数値に単位(px...
-
form input テキストを上下中央...
-
imgの下に点線が入るのを消したい
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
CSSで左右の中央配置
-
safariだけ、cssが効きません!
-
背景画像をセットしたh1にmargi...
-
スタイルシート a:activeで画像...
-
CSSでロールオーバーを作って中...
-
FireFoxでCSSのボーダーが反映...
-
テーブル内の画像をマウスオー...
-
【CSS】ヘッダーの高さが不明の...
-
HTMLのiframeの入れ子について
-
IEでmargin:autoが効かない
-
Media Queries 4 で 非推奨とな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報