htmlタグ　詳しいかた

締切済

質問者：さらさらさら
質問日時：2016/10/26 17:42
回答数：6件

こんにちわ！
Hpを作成したいのですが
見出しタイトル？がうまく作れなくて
困っています。
詳しいかた教えてください。

画像のように
初めの文字は大きく、太めにしたくて
strong と使っていました。

見出しタイトルも
画像のように色を変えたいのですが
画像のように作れますか？

そしてタイトルの中の文字は
細めにしたくて。

その後の文章はまた太めにしたいのです。

strongと初めにつけてるので
見出しタイトルの文字も太くなってしまい困っています。

自力です。
見出しというか各タイトル？です
四角の中にはいってるやつです！
あの枠というかデザインは　どのように使うのかなと思いまして。

No.2の回答に寄せられた補足コメントです。補足日時：2016/10/26 19:50
通報する
なるほど！
先に決めるわけなんですね！
ですがcssに定義って
どこのページでやるのでしょうか？

No.3の回答に寄せられた補足コメントです。補足日時：2016/10/26 21:49
通報する

通報する

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

質問の本文を隠す

回答 (6件)

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

No.6

回答者： ORUKA1951
回答日時：2016/10/27 18:25

CSSは、

・タグ内に属性値として
・そのHTMLの<head></head>内
・他のファイルとして
の方法があります。
・タグ内に属性値として
　詳細度（優先度）が高く、優先されますが煩雑になる。
・そのHTMLの<head></head>内
　HTML本体は簡単です。同じ指定を複数の場所にするとき
・他のファイルとして
　外部ファイルとすることで、一つのスタイルシートを書き換えることで、すべてのページのデザインを依拠に変更できます。
　いちいちファイルを読まないで済むので、ネットワーク負荷もすくない。

詳しくは
HTMLへのスタイル付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

スタイルシートの実例
★先の<head></head>内に
★タブは＿に置換してあるので戻すこと。

<style media="screen">

</style>

- 0
- 件

通報する

No.5

回答者： ORUKA1951
回答日時：2016/10/27 09:37

HPではなくてウェブヘージのこと・・ホームページ(

https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )
　ウェブページをHTMLで作成するときに、絶対に理解しておかなければならないことを最初に説明します。・・どんなものでも、きちんと基礎から順序立てて身に着けないと、かえって間違えて自己流になったりして時間も手間もかかる。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLとは
　HTML(Hyper Text Markup Language)は、文字通り文書を構成するパーツ(要素)をタグでマークアップしていく言語です。
　SGML #歴史( https://ja.wikipedia.org/wiki/Standard_Generaliz … )に目を通すこと。
＞初めの文字は大きく、太めにしたくてstrong と使っていました。
　これは根本的な間違いです。
　strongは、ここは重要(strong)という意味で、タイトルに用いるものではありません。そのページ内で重要な語句に絞って<strong></strong>でマークアップします。
★それが太字に見えるのは、利用している視覚系ブラウザが、たまたま太字にしてｮ氏しているだけで、スクリーンリーダーで閲覧すると大き目な男声で読み上げてくれたりします。

＞見出しタイトルも画像のように色を変えたいのですが画像のように作れますか？
　ここも違う。見出しやタイトルのデザインを変えたいのですが・・・
★<font>も20年前は使われていましたが、今は使用されることはありません。
　1999年のHTML4.01の勧告以来、代表的な非推奨要素になっています。
　「FONT要素とBASEFONT要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　以上を一言でいうと「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　一度HTML4.01の仕様書を通して読んでおくことをお勧めします。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで

うえをHTMLで記述すると単純に下記のようになります。デザインの仕方は次で
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
の右上(DATA)で検証ずみのHTML5です。
★タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#HTML">HTMLとは</a></li>
＿＿＿＿<li><a href="#SeparateStructurePresentation">構造とプレゼンテーションの分離</a></li>
＿＿＿＿<li><a href="#footer">文書情報</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>HTMLとは</h2>
＿＿<section id="HTML">
＿＿＿<h3>HTMLの意味</h3>
＿＿＿<p>
＿＿＿＿<abbr title="Hyper Text Markup Language">HTML</abbr>は、文字通り文書を構成するパーツ(要素)を<strong>タグでマークアップしていく言語</strong>です。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿<a href="https://ja.wikipedia.org/wiki/Standard_Generaliz …の歴史</a>に目を通すこと。
＿＿＿</p>
＿＿</section>
＿＿<section id="SeparateStructurePresentation">
＿＿＿<h3>構造とプレゼンテーションの分離</h3>
＿＿＿<blockquote>
＿＿＿＿<p>
＿＿＿＿＿初めの文字は大きく、太めにしたくてstrong と使っていました。
＿＿＿＿</p>
＿＿＿</blockquote>
＿＿＿<p>
＿＿＿＿これは根本的な間違いです。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿strongは、ここは重要(strong)という意味で、<em>タイトルに用いるものではありません。</em>そのページ内で重要な語句に絞って<strong></strong>でマークアップします。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿それが太字に見えるのは、利用している視覚系ブラウザが、たまたま太字にして表示しているだけで、スクリーンリーダーで閲覧すると大き目な男声で読み上げてくれたりします。
＿＿＿</p>
＿＿＿<blockquote>
＿＿＿＿<p>
＿＿＿＿＿見出しタイトルも画像のように色を変えたいのですが画像のように作れますか？
＿＿＿＿</p>
＿＿＿</blockquote>
＿＿＿<p>
＿＿＿＿ここも違う。「HTML内の見出しやタイトルのデザインを変えたいのですが・・・」となります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿<font>も20年前は使われていましたが、今は使用されることはありません。HTML4.01strict(厳密型)、XHTML1.1、HTML5では存在しません。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿<font>は、1999年のHTML4.01の勧告以来、代表的な非推奨要素になっています。
＿＿＿</p>
＿＿＿<blockquote>
＿＿＿＿<p>
＿＿＿＿＿FONT要素とBASEFONT要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
＿＿＿＿</p>
＿＿＿</blockquote>
＿＿＿<p>
＿＿＿＿以上を一言でいうと、<q>構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )</q>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿一度HTML4.01の仕様書を通して読んでおくことをお勧めします。
＿＿＿</p>
＿＿</section>
＿</section>
＿<footer id="footer">
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： t_fumiaki
回答日時：2016/10/27 07:06

>>cssに定義ってどこのページでやるのでしょうか？

方法は２個
・html内で定義する方法
head内に以下記述
<style type="text/css">
ここに、必要なだけ複数行でcssの中身を記述
</style>

・外部ファイルとして定義
ファイル名.cssという外部ファイルを作る。
htmlのhead内に参照クエリを記述
<link rel="stylesheet" type="text/css" href="ファイル名.css" media="screen,tv" />

自力でＨＰ作ろうと思ったらcssは避けて通れないし、画像編集ソフトも必須。

- 0
- 件

通報する

No.3

回答者： t_fumiaki
回答日時：2016/10/26 21:28

>>四角の中にはいってるやつです！

例えば、h2見出しだとすると、四角の画像を背景としてcssに定義する。
h2
{
position: relative;
padding: 13px 10px 12px 20px;←上下位置、左右位置の調整
color: #333; ←文字色
font-size: 14px;←文字の大きさ
font-weight: bold;
line-height: 1.5;
text-align: left;
clear: both;
font-family:'ヒラギノ角ゴ Pro W3';
background: url(h2midashi.gif) no-repeat left;　←背景画像
}

html側では
<h2>ABCDE</h2>
とするわけ。

全てのレイアウトをcssで定義してhtmlでは文字コンテンツを書くだけ。

一度、本屋さんでデザインブックを買って、html&cssを学習するのが良いと思う。

ウェブサイトでも解説があるが、基本は知ってる前提で用語が使われているから、イキナリだと解らないと思う。