HTML文について…
昨日習い始めたばかりで、困っています。
今、下記まで作成しています。
<table class=”title”>
<tr>
<td nowrap>
<strong>
<font face=”メイリオ” color=”red”>あああ<
/font>
</a>
</strong>
</td>
</tr>
</table>
とあります。
あああという名前の行で、
cssから参照し行すべて背景色をシルバーにしているのですが、
背景色をグラデーションにしてほしいと言われています。
ちなみに、元々の作成者は別の人で、cssの置き場所が分かりません。時間の都合により、cssはなしにして、htmlだけで背景色をグラデーションにしたいのですが、ネットみても、それぞれ記述が違ったりでよくわかりません。。
backgroundを使うことは分かっていますが…
情けないですが、ご教示いただけたら嬉しいです。
No.5ベストアンサー
- 回答日時:
HTMLは、SGMLを祖先に持ちますが、「プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせる(
https://ja.wikipedia.org/wiki/Standard_Generaliz … )」ものであって、それをどのように表示するかは、スタイルシートの仕事なのです。こうして、文書を構成する要素をタグで示すだけがHTMLの役目。
では、スタイルシートを<head></head>内に書いてみましょう。
★ヘッダー部はグラデーションにしています。
★ウィンドウ幅を狭くして御覧なさい。
★印刷プレビューで印刷の状態を確認してごらんなさい。
★HTMLはいっさい手を加えず、自在にデザインが変えられます。また携帯用に別のスタイルを指定したりすることもできる。
★サーバーに上げて、タブレットやスマホで本文やナビ部分をタップしてごらんなさい。その部分だけウィンド幅まで広がる。
これが、20年近く言われ続けてきた構造とプレゼンテーションの分離の意味なのですよ。せっかく学ぶなら、ウェブ標準なものを身につけないと役に立たない。
スタイルシートは慣れるまで大変かもしれませんが、片言の英語程度です。bgcolorよりはbackground-colorのほうがわかりやすいでしょ。
<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;font-size:0.9em;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
div.section div.section{width:auto;min-width:0;margin:5px 160px 10px 180px;min-height:10em;border:solid 1px gray;box-shadow: 10px 10px 10px rgba(0,0,0,0.4);border-radius:20px;}
div.section h2,div.section p{margin:0 160px;}
div.section div p{margin:0;}
/* 色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:transparent;}
div.section div.aside{background-color:lime;}
div.section div.nav{background-color:silver;}
div.footer{background-color:fuchsia;}
div.header p:after{content:"パソコンなど幅広い画面用を表示しています。";font-weight:bold;}
/* ヘッダをグラデーション */
div.header{background: linear-gradient(aqua,lime);}
-->
</style>
<style type="text/css" media="screen and (max-width: 640px)">
<!--
div.header,div.section,div.footer{width:98%;min-width:0;}
div.section div.aside{font-size:1em;position:static;width:auto;height:auto;margin:5px 5px 10px 180px;padding:0.5em 1em;}
div.section div.nav{left:0;}
div.section div.section{margin:5px 5px 10px 180px;}
div.section h2,div.section p{margin:0 0 0 160px;}
div.section div p{margin:0;}
div.header p:after{content:"縦置きスマホなど幅の狭い画面用を表示しています。";color:red;}
-->
</style>
No.3
- 回答日時:
学問に王道はない!!・・これはHTMLのような言語を学ぶ時も同じです。
★それはすべて間違いです。
一つずつ説明します。
<table class=”title”>
「ページレイアウトの目的で表を用い( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」てしなりません。
「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
これは今から16年前のHTML4.01の勧告以来
なお、HTML5以前のtable要素にはsummary要素が必須です。
<tr>
<td nowrap>
nowrap( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )は非推奨です。
<strong>
strong要素は、それが重要なときに使用します。むやみに使わない。検索エンジンはどこが重要かわからなくなる。
<font face=”メイリオ” color=”red”>あああ</font>
font要素は、非推奨です。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
</a>
開始タグがありません。
HTML/CSSを身に着けようと思ったら、まずはそれぞれの仕様書に目を通すのが、最も早く間違いが少ないです。
HTML5は膨大でむつかしいのですが、とりあえずは
HTMLは、HTML4.01strictを身に着けるのが良いです。
HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
CSSは、CSS2.2
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳( https://momdo.github.io/css2/Overview.html )
初心者が最初に始めるのに最も適しているのは、HTML4.01の翻訳者である内田さんがお子さんのために書かれた
はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
まだCSSが普及していないころの物ですが、とても分かりやすく書かれています。
ちょっと簡単なサンプルを書いてみましょう。
★タブは_に置換してあるので戻す。
それを
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
の右上のDATAをクリックして、フォームにコピペしてチェックしてごらんなさい。
これが、正しいHTML4.01strictです。
スタイルシートの書き方は、別途説明します。
<!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">
_<style type="text/css">
<!--
/*ここにスタイルシートを書く*/
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section" id="section1">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p><abbr titlE="Hyper Text Markup Language">HTML</abbr>には、<strong>文書構造しか書きません。</strong>デザイン、レイアウト--すなわちプレゼンテーションはスタイルシートで指定していきます。</p>
__</div>
__<div class="section" id="section2">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>HTML5では、<section>要素が追加され、そのの階層でレベルが判断されるので、それに準じて<div class="section">で階層をしめしています。HTML5にするときは、<section">とすればよい。</p>
___<p>そうすることで、HTMLの作成もメンテナンスもとても楽になる。そして検索エンジン最適化(SEO)も完璧になる。</p>
__</div>
__<div class="nav">
___<h3>目次</h3>
___<ol>
____<li>1項</li>
____<li>2項</li>
____<li>3項</li>
___</ol>
__</div>
__<div class="aside">
___<h3>補足記事</h3>
___<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事を書く</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2013-03-03 12:00:00 (JST)</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.2
- 回答日時:
行を示す<tr>に臨時のcssを書いて下さい(style以降です)
<tr style="background-image: linear-gradient(#c0c0c0,#ffff);">
linear-gradient(#c0c0c0,#ffff); の部分がグラデーションです。
#c0c0c0 銀色
#ffff 白
銀色~白でグラデーションを掛けています。
色コードは「WEBセーフカラー」で検索すると解ります。
No.1
- 回答日時:
昨日習い始めたばかりでいきなりCSSですか。
。。「習い始めた」ということは学校か何かでしょうか?
でしたら教科書があるのではないですか?
ますはそれらをよく参照しましょう。
Webサーバー上のHTMLファイル等の配置場所もまだ現況されていないのでしたら、HTMLファイルのみでテーブル表現を学び、ご自身のPC上の適当なフォルダに作成したHTMLファイルを置いて、それをWebブラウザからfile://... と呼び出して表示してみられるとよいです。
いきなりCSSは敷居が高いです。
なお、独学されている場合は書店でHTMLの入門書を幾つか見て、ご自身が「この本が分かりやすい。読みやすい」と感じられるものを入手することをおすすめします。
ネットを使って勉強する場合は、Googleなどで「HTML 入門」とか「HTML 初心者」とかいった適当なキーワードで検索すると解説サイトが見つかります。あまり古そうなサイトは避けるのが賢明ですが、古くても分かりやすければそれでもよいです。
最新のHTMLとの差分は追々分かってくるはずですので。
参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<!-- #BeginLibraryItemとは
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
ヘッダーを左右に二分割する方...
-
html リストのマークについて
-
HTML文について… 昨日習い始め...
-
h1のテキストサイズよりh2の方...
-
テーブルの隙間について
-
ローカルとWeb上で見え方が違う...
-
MySQL使用スレッド掲示板の仕組...
-
スペースを使わず文字位置を揃...
-
HTMLの禁則処理解除について
-
<div>で改行させない方法
-
CSSで、contentsがfooterに重な...
-
【CSS】HTML直書き→外部ファイ...
-
HTMLパーツとは何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報
回答ありがとうございます。実は勤務先で、HTMLは一通りパラ〜っと学んだのですが、
スタイルシートはまだまだです。
で、HP作成者に、HTMLで簡単な色変更とかやってみ〜って言われて。
置き場所は、最終的に私の加工がオッケーでたら話があるんでしょうけど、とりあえず、ソースを自分のメモ帳に別名保存して、色々試していたんですよ。
そしたら、HTMLとか全く知らない人が、ちゃちゃっとグラデーションにしといてよ、と笑
cssの置き場所が分かればそこに記述できるんですが、、作成者がリフレッシュ休暇中で。
だから、table class〜ってのを消して、HTMLでできないかなぁと思ってたんです。
bgcolorで指定するのは単色ですよね。。HTMLでグラデーションは、学んでいるサイトにも載ってないから、やっぱりcssでしかできないんですかね>_<