ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

HTML文章の、一部文字サイズを縦長や横長にしたいです。

<html>
<head>
<style type="text/css">
<!--
p.test1 {transform: scale(1,2.5);}
p.test2 {transform: scale(1,4);}
-->
</style>
</head>
<body>
<p>普通サイズの文字</p>
<p class="test1">縦2.5倍文字</p>
<p class="test1">縦4倍文字</p>
</body>
</html>

のように、段落ごとに文字の縦サイズを変える方法は分かったのですが、
段落の中の一部だけ、サイズを変える方法はないのでしょうか。

また、上記方法で、x軸を1以外にすると、
横のサイズではなく、文字の横位置が変化してしまうのは
何が原因なのでしょうか。

CSSについての知識は皆無に等しく、
外部ファイルを読み込む方法なども見付けましたが、
よく理解できませんでした…。

ド素人でお恥ずかしい限りですが、どうぞご教示ください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>transform や font-stretch以外にも、何かご提案いただけるものがあれば是非ご指導くたさい。


 ないです。これは議論が続いていて、ひょっとするとひょっとしてCSS3 font に入るかも・・(他の段落との競合やブラウザ(OS)のフォント処理などの問題があって現状では難しい)

 一連の質問で、気になるのは「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」という基本部分。HTMLは文書構造を示すもの、プレゼンテーションはスタイルシートに任せる。その効果はリンク先に簡潔に書かれいている。
 すなわち「段落の中の一部だけ、サイズを変える方法はないのでしょうか。」の部分、例えば、本文はHTML5の場合<section>、それ以前のHTMLでは<div class="section">でマークアップしてきました。
 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

 その本文内で、重要な語句があれば・・
<section>
 ・・・・・・・
 <p><strong>文書の構造をプレゼンテーションと切り離すことで</strong>広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる。</p>

 のようにマークアップされていて、「本文(section)内の段落(paragraph)中の重要(strong)な語句は、普通の太さで赤文字で背景は黄色」としたければ
section p strong{color:red;font-weight:normal;background-color:yellow;}
とスタイルシートを書きます。伸縮したければ、本来の用途ではないが・・
section p strong{display:inline-block;font-weight:normal;transform:scaleY(1.6);}
で可能でしょう。
 ただ、transformはすべてのブラウザに対応していないので、
section p strong{display:inline-block;font-weight:normal;transform:scaleY(1.6);background-color:yellow;}
など他のスタイルも付け加えておいたら良いでしょう。
    • good
    • 0
この回答へのお礼

具体的な書き方だけでなく、参考ページまでご教示いただき、大変参考になります。

現在は伺った例に習い、色々手を加えている段階ですが、お陰さまで希望に近いページの作成ができそうです。
度々のご回答をいただきまして、ありがとうございました。

お礼日時:2014/09/08 23:44

ブロック要素にしか使えないのかな。


display:inline;を追加すれば横並びにはできますよ。
    • good
    • 0
この回答へのお礼

例として挙げたものに display:inline;を追加したところ、横並びにできました!
ありがとうございました!

お礼日時:2014/09/08 23:35

そもそも


>文字サイズを縦長や横長にしたいです。
 はtrasformじゃありません。font-stretchですが、対応ブラウザはほとんどないのじゃないかと・・
 ⇒font-stretch プロパティ - CSS リファレンス( http://www.marguerite.jp/Nihongo/WWW/RefCSS/font … )

 transfpremだと多分長い文章だとはみ出す。

この回答への補足

以下記事と、他にも似た解説サイトを見付けたため、
文字を縦長にできるものだと思っていたのですが…
CSS3のtransformで、文字を長体や平体で表示する方法
http://touch.allabout.co.jp/gm/gc/406308/

transform や font-stretch以外にも、何かご提案いただけるものがあれば是非ご指導くたさい。

補足日時:2014/09/07 20:26
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qyyyymmddからyyyy/mm/ddへの変換

いつもお世話になっております。
Aと言う変数にはyyyymmddの値が入っていて
Aをyyyy/mm/ddにしてBの変数に入れたい場合の処理がわかりません。
調べたところ、SimpleDateFormatクラスと言うものを使えばよいと言うことが判明しました。
しかし、今まで使ったことがないのでよくわかりません。
変数Aと変数BはどちらもString型です。
ご教授お願い致します。

Aベストアンサー

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.parse(a);
  formatter.applyPattern("yyyy/MM/dd");
  String b = formatter.format(date);
  System.out.println(b);
}
catch (ParseException ex) {
  System.out.println("解析失敗");
}

 こんな感じでいいんじゃないでしょうか。

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.p...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Q1ピクセルって何ミリですか?

1ピクセルって何ミリなのでしょう?
至急、お答えお待ちしております。
かなり急いでます。よろしくお願いいたします。

Aベストアンサー

1ピクセルが何ミリかという質問の答えになるかどうか分かりませんが、
WEB制作上に限って言えば、横100ピクセルの画像を作りたい場合、
Photoshop等では単位をピクセルで作れますが、Illustrator等の場合は、
100pointで作ります。
1pointは、0.35277ミリです。

Qフォーム上で押されたボタンによってサーブレットの処理を変えたい

Urizakaです。
さて、さっそく質問です。
JSPの同一フォーム上に「登録」「修正」「削除」のボタンを置き、その押された
ボタンによってサーブレット内での処理が切り替わる(具体的には、違う
SQL文を実行し、違うJSPページをgetRequestDispatcherメソッドで生成
する)ようにしたいのですが、どのようにすればよいのでしょうか?
もちろんそれぞれの処理に対して別々のサーブレットを作り、javaScript
でそれぞれのサーブレットへ飛ぶように制御するという処理も考えたことは
考えたのですが、できれば一つのサーブレットで済ませたいと考えたもので
…宜しくお願いします。

Aベストアンサー

お恥ずかしい限りです。
前述の例、動くわけがありませんね(汗)

2つめの例、書きなおします。

---------------------------------------------------

■JSPのフォーム

<form name=MyForm action="<<サーブレットのURL>>" method=post>
<input type=button name=MyClick value=登録 onClick="func('Toroku');">
<input type=button name=MyClick value=修正 onClick="func('Shusei');">
<input type=button name=MyClick value=削除 onClick="func('Sakujo');">
<input type=hidden name=MySubmit>
</form>

<script language="JavaScript">
function func(MyCommand){
document.MyForm.MySubmit.value=MyCommand;
document.MyForm.submit();
}
</script>

■Servletでの処理
// リクエストの取得
String MyAction = req.getParameter("MySubmit");

// 処理の実行
if (MyAction.equals("Toroku")){...}
if (MyAction.equals("Shusei")){...}
if (MyAction.equals("Sakujo")){...}



---------------------------------------------------

こんな感じでどうでしょうか。
ちなみにこうやって書いておくと、フォームのボタンからじゃなくても
アンカーをクリックすることで同じ効果が出せそうな……

<a href="JavaScript:func('Toroku')">登録</a>

あ、でもまたボロが出そうなのでこの辺で(^_^;)

お恥ずかしい限りです。
前述の例、動くわけがありませんね(汗)

2つめの例、書きなおします。

---------------------------------------------------

■JSPのフォーム

<form name=MyForm action="<<サーブレットのURL>>" method=post>
<input type=button name=MyClick value=登録 onClick="func('Toroku');">
<input type=button name=MyClick value=修正 onClick="func('Shusei');">
<input type=button name=MyClick value=削除 onClick="func('Sakujo');">
<input type=hidden name=M...続きを読む


人気Q&Aランキング