プロが教えるわが家の防犯対策術！

急いでいます！

HTML文について… 昨日習い始めたばかりで、困っています。 今、下記まで作成しています。 <ta

解決済

  • 質問者：nk.kn
  • 質問日時：
  • 回答数：5件

HTML文について…
昨日習い始めたばかりで、困っています。

今、下記まで作成しています。
<table class=”title”>
<tr>
<td nowrap>
<strong>
<font face=”メイリオ” color=”red”>あああ<
/font>
</a>
</strong>
</td>
</tr>

</table>

とあります。
あああという名前の行で、
cssから参照し行すべて背景色をシルバーにしているのですが、
背景色をグラデーションにしてほしいと言われています。
ちなみに、元々の作成者は別の人で、cssの置き場所が分かりません。時間の都合により、cssはなしにして、htmlだけで背景色をグラデーションにしたいのですが、ネットみても、それぞれ記述が違ったりでよくわかりません。。
backgroundを使うことは分かっていますが…
情けないですが、ご教示いただけたら嬉しいです。

質問者からの補足コメント

  • 回答ありがとうございます。実は勤務先で、HTMLは一通りパラ〜っと学んだのですが、
    スタイルシートはまだまだです。
    で、HP作成者に、HTMLで簡単な色変更とかやってみ〜って言われて。
    置き場所は、最終的に私の加工がオッケーでたら話があるんでしょうけど、とりあえず、ソースを自分のメモ帳に別名保存して、色々試していたんですよ。
    そしたら、HTMLとか全く知らない人が、ちゃちゃっとグラデーションにしといてよ、と笑
    cssの置き場所が分かればそこに記述できるんですが、、作成者がリフレッシュ休暇中で。
    だから、table class〜ってのを消して、HTMLでできないかなぁと思ってたんです。

      補足日時：2016/11/17 16:46
    通報する

  • bgcolorで指定するのは単色ですよね。。HTMLでグラデーションは、学んでいるサイトにも載ってないから、やっぱりcssでしかできないんですかね>_<

      補足日時：2016/11/17 16:51
    通報する
通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートは明日にでも・・

    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

学問に王道はない!!・・これはHTMLのような言語を学ぶ時も同じです。


★それはすべて間違いです。
　一つずつ説明します。
<table class=”title”>
　「ページレイアウトの目的で表を用い( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」てしなりません。
　「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　これは今から１６年前の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&#64;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では、&lt;section&gt;要素が追加され、そのの階層でレベルが判断されるので、それに準じて&lt;div class="section"&gt;で階層をしめしています。HTML5にするときは、&lt;section"&gt;とすればよい。</p>
＿＿＿<p>そうすることで、HTMLの作成もメンテナンスもとても楽になる。そして検索エンジン最適化(SEO)も完璧になる。</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li>１項</li>
＿＿＿＿<li>２項</li>
＿＿＿＿<li>３項</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： t_fumiaki
  • 回答日時：

行を示す<tr>に臨時のcssを書いて下さい（style以降です）



<tr style="background-image: linear-gradient(#c0c0c0,#ffff);">

linear-gradient(#c0c0c0,#ffff);　の部分がグラデーションです。
#c0c0c0　銀色
#ffff　白

銀色～白でグラデーションを掛けています。
色コードは「WEBセーフカラー」で検索すると解ります。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： zircon3
  • 回答日時：

昨日習い始めたばかりでいきなりCSSですか。

。。
「習い始めた」ということは学校か何かでしょうか？
でしたら教科書があるのではないですか？
ますはそれらをよく参照しましょう。
Webサーバー上のHTMLファイル等の配置場所もまだ現況されていないのでしたら、HTMLファイルのみでテーブル表現を学び、ご自身のPC上の適当なフォルダに作成したHTMLファイルを置いて、それをWebブラウザからfile://... と呼び出して表示してみられるとよいです。
いきなりCSSは敷居が高いです。

なお、独学されている場合は書店でHTMLの入門書を幾つか見て、ご自身が「この本が分かりやすい。読みやすい」と感じられるものを入手することをおすすめします。
ネットを使って勉強する場合は、Googleなどで「HTML　入門」とか「HTML 初心者」とかいった適当なキーワードで検索すると解説サイトが見つかります。あまり古そうなサイトは避けるのが賢明ですが、古くても分かりやすければそれでもよいです。
最新のHTMLとの差分は追々分かってくるはずですので。

参考まで。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報