ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか



パソコントラブル解決・過去ログTOP  >  ログTOP

◇-?ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか-しん-08/07-10:04(89)-No.363683
　┗?!Re:ＣＳＳでＷｏｒｄのぶらさげ�...-テツヤ-08/07-10:42(88)-No.363687
　　┗?!?Re:ＣＳＳでＷｏｒｄのぶらさげ...-しん-08/07-11:48(87)-No.363707
　　　┗?!?!Re:ＣＳＳでＷｏｒｄのぶらさ�...-テツヤ-08/07-12:50(86)-No.363724
　　　　┗?!?!-Re:ＣＳＳでＷｏｒｄのぶらさ...-しん-08/07-13:29(85)-No.363733
　　　　　┗?!?!-!Re:ＣＳＳでＷｏｒｄのぶら�...-テツヤ-08/07-14:54(84)-No.363739
　　　　　　┗?!?!-!~Re:ＣＳＳでＷｏｒｄのぶら...-しん-08/07-17:04(82)-No.363773
　　　　　　　┗?!?!-!~!Re:ＣＳＳでＷｏｒｄのぶ�...-テツヤ-08/07-17:20(82)-No.363780
▲このページのトップに戻る
363683ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかしん 2006/08/07-10:04

メーカー名：東芝
ＯＳ名：WindowsXp HomeEdition
パソコン名：PAEX522PDE3
ソフト関連：ソフトの使い方がわからない
使用回線：ADSL
--
Ｗｏｒｄで良く使用する、

ぶらさげインデント・・・・文章の２行目以降をインデントする機能
をＣＳＳで表示するには、どの様にしたら良いでしょうか？

何方かおして下さい。

▲このページのトップに戻る
363687Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかテツヤ 2006/08/07-10:42

記事番号363683へのコメント
しんさんは No.363683「ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。
　こんな感じではどうですか？。
<DIV style="text-indent:-2em; padding-left:2em;
background-color:#FDD; width:20em; height:3mm">
DIV要素：1行目<BR>2行目。文字列文字列<BR>
</DIV>

▲このページのトップに戻る
363707Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかしん 2006/08/07-11:48

記事番号363687へのコメント
テツヤさんは No.363687「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。

テツヤさんありがとうございます。

もう少しお願いいたします。

<DIV style="text-indent:-2em; padding-left:2em;
background-color:#FDD; width:20em; height:3mm">
DIV要素：1行目文字列
</DIV>
2行目。文字列

１行目で段落、改行しないで長い文章を入れた場合、インデントされる事は確認しました。

希望はしている事は
２行目は１行目と同じ様に最初の位置から表示し、短ければそれで良し、長ければインデントされる。

この様な場合、全ての行に<div>～</div>を設定しなければなりませんか？

▲このページのトップに戻る
363724Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかテツヤ 2006/08/07-12:50

記事番号363707へのコメント
しんさんは No.363707「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。
>２行目は１行目と同じ様に最初の位置から表示し、短ければそれで良し、長ければインデントされる。
　そのような気まぐれは自動では難しいと思います。
　スクリプトで作っても…そだなー…ウィンドウサイズとか変えちゃうと2行が3行になったりしますし、それをどうするか？、見逃す？。構わない？。

<DIV style="
background-color:#FDD; width:20em; height:3mm">
DIV要素：1行目<BR>
2行目。文字列文字列<BR>
</DIV>
<DIV style="text-indent:-2em; padding-left:2em;
background-color:#FDD; width:20em; height:3mm">
DIV要素：1行目<BR>
2行目。文字列文字列<BR>
3行目。文字列文字列<BR>
</DIV>

　答えをもう一つ出してなかったかな…<DIV>～</DIV>と囲むのは、上の場合は、横幅と背景色を指定しているからです。何も指定していないなら囲む必要はないです。


▲このページのトップに戻る
363733Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかしん 2006/08/07-13:29

記事番号363724へのコメント
テツヤさんは No.363724「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。

テツヤさんありがとうございます。


１行目で段落、改行しないで長い文章を入れた場合、インデントされる事は確認しました。

希望している事は
２行目は１行目と同じ様に最初の位置から表示し、短ければそれで良し、長ければインデントされる。

背景色と縦は自由だが、横幅は定められています。

この様な場合、全ての行に<div>～</div>を設定しなければなりませんか？

又はリストは利用できないものでしょうか。

私も研究してみます。

▲このページのトップに戻る
363739Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかテツヤ 2006/08/07-14:54

記事番号363733へのコメント
しんさんは No.363733「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。
>背景色と縦は自由だが、横幅は定められています。
>この様な場合、全ての行に<div>～</div>を設定しなければなりませんか？
　必要です。

　「短い」「長い」でインデント制御ですが、手動でやるのですか？、それとも自動でやりたい？。
　あと、「短い」「長い」って行数でいいですか？
　作ってしまった。自動です。行数にわたる…つまり縦のドット数を検知して自動でインデントしてます。
　test4.htm《
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>test4</TITLE>
<STYLE>
#Docs DIV{border:1 black solid}
</STYLE>
</HEAD>
<BODY onload="test()">
<SPAN id=Docs>
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
</DIV>
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
</DIV>
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
</DIV>
</SPAN>

<SCRIPT>
function test(){
for(I=0; I<Docs.all.tags("DIV").length; I++){
if(Docs.all.tags("DIV")[I].scrollHeight>40){
Docs.all.tags("DIV")[I].style.textIndent="-2em";
Docs.all.tags("DIV")[I].style.paddingLeft="2em";
}
}
}
</SCRIPT>

</BODY>
</HTML>
》こんな感じでどうですか？。

>又はリストは利用できないものでしょうか。
　期待できず…。　　

▲このページのトップに戻る
363773Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかしん 2006/08/07-17:04

記事番号363739へのコメント
テツヤさんは No.363739「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。

テツヤさんありがとうございます.

技量不足で十分理解できません。

特に「javascript」が殆んど勉強不足です。

時間を下さい。

▲このページのトップに戻る
363780Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんかテツヤ 2006/08/07-17:20

記事番号363773へのコメント
しんさんは No.363773「Re:ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか」で書きました。
　了解。一応説明をつけときます。《
<BODY onload="test()">　<!--¶←これは、文書を読み終わってから処理をするということ。それがonloadイベント -->

<SPAN id=Docs>　<!--¶←ここは、Docs内にDIV要素を置くことで成り立っています。DIV要素を自由に追加できます。-->
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
</DIV>
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
</DIV>
<DIV style="background-color:yellow">
１２３４５６７８９０<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ<BR>
</DIV>
</SPAN>


<SCRIPT>
function test(){
for(I=0; I<Docs.all.tags("DIV").length; I++){　//¶←Docs内のDIV要素の分を処理する。
if(Docs.all.tags("DIV")[I].scrollHeight>40){　//¶←要素が持つ高さを40ピクセルと比較している
Docs.all.tags("DIV")[I].style.textIndent="-2em";　//¶ここの{ }内は「高さ>40」の時に処理をする。で、インデントと
Docs.all.tags("DIV")[I].style.paddingLeft="2em";　//¶パディングを指定。
}
}

パソコントラブル解決・過去ログTOP  >  ログTOP  >  ＣＳＳでＷｏｒｄのぶらさげインデントはで来ませんか

A1.本ページは参考になりましたか？　又はアドバイスがありますか？
解決　参考になった　参考にならなかった　アドバイスする

A2.何度目の訪問ですか？
初めて来た　　　数度目(２～４)　５回以上来ている　　 管理人:

A3.何か一言どうぞ(アドレスは書くことができません)

A4.アドレスがあればどうぞ(１つまで)


↑↑↑↑よろしければ押してください↑↑↑↑

何か一言(本ページで参考になったならないを含めて残してあります)
◎：解決　○：参考になった　×：参考にならなかった　！：アドバイスあり

参考回数投稿日時何か一言
(社)日本お助け隊
人間関係のトラブルの相談にのります。
電話相談無料。
和魂カウンセラー認定講座
和魂カウンセラー認定をしています。
全国イベントスケジュール
イベントが登録でき申込みできます。無料。