ウェブサイト制作（主にHTML）で質問です

締切済

質問者：tkmo
質問日時：2016/09/21 21:56
回答数：6件

ウェブサイト制作で質問です。
簡単なHTMLしかわからず、スタイルシートはよく分かっていません。
そのような状態ですが、以下のような３つのことをやりたいと思っています。
可能でしょうか。
やり方を教えていただけないでしょうか。

（１）行間を調整する

例えば

AAAAAAAAA
BBBBBBBBB
CCCCCCCCC

という３行がある場合、
AとBの間の行間と、BとCの間の行間は、それぞれ任意の広さに変えられますか？
（現状では<BR>や<P>しかやり方を知りません）

（２）ウェブサイトのフォントを変える

上記のような３行の場合、
例えば
Aの行をゴシック体、
Bの行を明朝体、
Cの行をPOP体
のように、好きなフォントを指定できますか？

（３）１文字だけ頭を出す

例えば以下のように

♪AAAAAAAAA
　AAAAAAAAA
♪BBBBBBBBB
　BBBBBBBBB
♪CCCCCCCCC
　CCCCCCCCC

と「♪」１文字だけ、頭を出すことはできますか？

通報する

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

質問の本文を隠す

回答 (6件)

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

No.6

回答者： Ogre7077
回答日時：2016/09/23 11:03

(1)(2)(3) を同時に

- 0
- 件

通報する

No.5

回答者： ORUKA1951
回答日時：2016/09/22 20:18

そして、

＞（１）行間を調整する
＞（２）ウェブサイトのフォントを変える
＞（３）１文字だけ頭を出す
はスタイルシートで、自由自在にできます。

例えば、
<style media="screen">

</style>

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2016/09/22 20:16

HTMLの基礎も理解されていないようですね。

これで立腹して読まないなんてことはだめですよ。
　HTMLは、「SGMLをルーツに持っている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )。」
一度下記を読んでおくこと。
＿＿＿＿＿
そこで、プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( https://ja.wikipedia.org/wiki/Standard_Generaliz … )
￣￣￣￣￣
★デザインのためのものではなく、あくまで文書の（意味的な）構造をマークアップするものです。
[例]　各タグの後に意味を付しておきます。
<h2>下記の見出し</h2>
<p>HTMLの基礎も理解されていないようですね。これで立腹して読まないなんてことはだめですよ。</p>
　<p>HTMLは、<q>SGMLをルーツに持っている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )。</q></p>
<p><strong>一度下記を読んでおくこと。</strong></p>
<blockquote>
そこで、プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( https://ja.wikipedia.org/wiki/Standard_Generaliz … )

　これをブラウザで見ると、見出しは太字で、段落の間は間隔をあけて、行内引用分は""でくくられ、引用ブロックは左右が字下げされますね。
　視覚系ブラウザがそのように表示するのは、ブラウザが持つスタイルシートによるものです。★ あらかじめ用意されているスタイルシート
　一方、スクリーンリーダーで読むと、見出しは少し大きい声で、段落間は少し間をおいて読み上げますね。読み上げようのスタイルシートもリーダーは持っている。

・・HTMLとスタイルシートの役割を正確に理解してください。

　そのうえで、「スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」をご覧ください。

実例を上げておきます。HTMLに用意してある要素(Element)--タグ--は限られていますので、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」してあります。

★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>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<blockquote>
＿＿＿<p>とある女性がイタリアの会議に出張することになり、空港まで彼女の夫が車で送ってくれました。</p>
＿＿＿<p class="Words wife">ありがとう。ねえあなた、何かイタリアから持ち帰ってほしいものはある？</p>
＿＿＿<P>すると夫は笑いながらこう答えました。</p>
＿＿＿<p class="Words husband">イタリアの女の子を頼むよ</p>
＿＿＿<p>妻は飛び立っていきました。</p>
＿＿＿<p>会議は無事に終わり、夫は空港まで迎えに行きました。</p>
＿＿＿<p class="Words husband">おかえりハニー、出張はどうだったんだい？</p>
＿＿＿<p class="Words wife">とてもよかったわ</p>
＿＿＿<p class="Words husband">ところで、僕へのおみやげはどうなったんだい？</p>
＿＿＿<p class="Words wife">何のおみやげかしら？</p>
＿＿＿<p class="Words husband">ほら、イタリアの女の子を頼んだだろ？</p>
＿＿＿<p class="Words wife">ああ、そのことね……。私はできるだけのことはしたのよ。あとは9か月待って、実際に女の子かどうかを確かめるだけ</p>
＿＿＿<address cite="http://labaq.com/archives/51873721.html"><a href="http://labaq.com/archives/51873721.html">「イタリア出張する妻に、夫が無茶なおみやげを頼んだら…」と言うお話:らばQ</a></address>
＿＿</blockquote>
＿＿<p>文書構造をこのようにHTMLでマークアップしていきます。</p>
＿＿<p>プレゼンテーションは、その文書をどのように表現するかをメディアごとに記述していきます。今回は視覚系メディアのみ指定してみます。印刷など他のメディアではデフォルトで表現されますが、それらは、それぞれの端末のスタイルシートが適用されます。印刷するとわかる。</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： naokita
回答日時：2016/09/22 01:01

<style type="text/css"><!--

p.test{line-height: 1.6;}
p.test span.font1{ font-family: "ＭＳＰゴシック", sans-serif;}
p.test span.font2{ font-family: "ＭＳＰ明朝", serif;}
p.test span.font3{ font-family: "HGP創英丸ﾎﾟｯﾌﾟ体", "富士ポップ", "Comic Sans MS", fantasy;}
p.test span.onpu{ display: block; padding: 0 0 0.2em 1em;}
p.test span.onpu:before{ margin: 0 0.2em 0 -1.2em; content: "♪";}
--></style>

↑↑これを＜/head＞の上に入れる
---------------------------
↓↓これを＜body＞内に

<p class="test">
あいうえお<br>
かきくけこ<br>
さしすせそ
</p>

<p class="test">
<span class="font1">あいうえお</span><br>
<span class="font2">かきくけこ</span><br>
<span class="font3">さしすせそ</span>
</p>

<p class="test">
<span class="font1 onpu">あいうえお<br>あいうえお</span>
<span class="font2 onpu">かきくけこ<br>かきくけこ</span>
<span class="font3 onpu">さしすせそ<br>さしすせそ</span>
</p>

---------------------------
CSSを利用すれば、質問内容の再現ができますが、その他のプロパティや微調整など色々な仕様やルールがあります。
（※フォントはパソコンに依存するので、無意味に利用しない方が良い・・・）

これがCSSの初歩です。
これが理解できるようになったら、CSSファイルを使います。

- 0
- 件

通報する

No.2

回答者： t_fumiaki
回答日時：2016/09/21 22:16

スタイルシートを習得しないと説明もチンプンカンプンだと思う。

全てスタイルシートにidセレクタとプロパティ：値とか、クラスセレクタとプロパティ：値とかを記述して、そのセレクタをHTMLで引用する。

html記述
<p>AAAAAAAAA</p>
<p class="gyoukan1">BBBBBBBBB</p>
<p class="gyoukan2">CCCCCCCCC</p>

スタイルシート記述
.gyoukan1 {margin-top:10px;} 　意味：上の要素と10px空ける
.gyoukan2 {margin-top:20px;} 　意味：上の要素と20px空ける

てな具合。

他も同じ。
プロパティ：値は色々あるから、解説サイトで無く、教科書(本）で先ず練習した方が良いと思う。本は3000円位で売っている。

解説サイトは、用語や用語の意味は知っている前提で書かれているから、解らないと思う。