一応、仕事で自社のホームページをいじってるのですが、1年半前に作成した更新情報が急に気に入らなくなりました。 現在、更新情報をインラインフレームで表示しています。
<iframe src="example.html" name="in" width="350" height="100" scrolling="auto" >
こうやって別のhtmlファイルを読み込みにいってるわけですが問題点が2つ。
①わざわざ別ファイルを修正するのがめんどくさい
②リンク貼る時に<target="blank_">忘れると↓みたいになってフレーム内でリンク先が開いちゃう。 忘れなかったとしても別タブで開くのが気に食わない。
では、どうするか。一番単純なのは<textarea>要素を使ってなんでしょうが、textarea要素の中には文字通りテキストしか入れられず、リンクしたり、文字を装飾したりできないので却下。
<textarea style="height: 40px; width: 121px; margin: 2px;">(textarea)要素の中には文字しか入れられません。リンクしたり、文字を装飾したりできません。</textarea>
そこで、検索していたところ出てきたのがこちらの記事。 表示面積を限定してスクロールバーを表示させるには [ホームページ作成] All About http://allabout.co.jp/gm/gc/23865/
ふむふむφ(ﾟДﾟ )ﾌﾑﾌﾑ… CSSでoverflowプロパティを使えばいい？そんだけ？ということで、まずhtmlの方にはinboxクラスのp要素の中に更新情報を記載しました。まぁ、クラス名は何でもいいんでしょうが。
<p class="inbox">ここに更新情報</p>
そしてCSSの方には
p.infobox {
height:8em;
width:40em;
overflow: auto;
border: #000 1px dashed;
text-align:left;
margin-right: auto;
margin-left: auto;
padding:10px;
line-height:1.8em }
なぜかalign=centerなはずなのに中央配置されなかったので、margin-rightとmargin-leftでをautoに。
これで無事、CSS更新情報をスタイリッシュに表示させることができました。 あぁ、お勉強が足りないわぁ。まぁ、素人だからしょうがないのですが。