このエントリーをはてなブックマークに追加 mixiチェック

ライブドアブログの利用していて、ふとサイドメニューにテキストエリアを貼ろうと思いました。
しかし、HTMLタグのTEXTAREAを利用しようと思ったら、記入したタグが変換されませんでした。
TEXTAREAタグでは、入力した文字をそのまま表示してしまいます。
少し思惑と異なり困りました。
そこで、インターネットでTEXTAREAに代わる物が何かないかと色々と調べました。
そして、苦労して探し出しました。

スタイルシート(CSS)は少し苦手で忘れていました。
そこで、次回以降にも利用したいので、備忘録としてこのブログに掲載しておきます。
同様な悩みを抱えた方は、参考にしてみて下さい。


ライブドアブログ、サイドメニューを左寄せで自動スクロールバーを設置



　　
猿橋大、詳解HTMLタグ辞典 第2版
株式会社アンク、CSS辞典 第5版 [CSS2/3/4対応]
栗原明則、初めてでもできる! ブログカスタマイズリファレンス



ライブドアブログで役立つ情報集の一覧



ライブドアブログで役立つ情報集の一覧
　　・人が来ないブログを活性化する方法
　　・ライブドアブログ、サイドメニューを左寄せで自動スクロールバーを設置
　　・ライブドアブログで更新情報をメール配信送信
　　・ライブドアブログの中央下(ページの一番下)に広告を入れる
　　・ライブドアブログ、中央にプログパーツを配置



HTMLとは



ホームページ（Webページ)は、HTMLというマークアップ言語を使って作られています。
HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップランゲージ）の略で、タグというマーク（命令）を使って、HTML文書の構造（ここは見出しでここからは段落など）を指定したり、文字の大きさや色を変えるとか、画像を表示することなどが出来ます。
HTMLを使ってWebページを作る場合、メモ帳などのテキストエディタを使ってタグを記入していきますが、それをHTMLファイルとして保存しブラウザで開くと、タグの指定されたとおりにブラウザに表示されます。



スタイルシート(CSS)とは



スタイルシートとは、文書の見栄えに関する情報（字体や文字の大きさ、色、行間の幅、修飾など）をひとまとめにしたデータやファイルなどの事。
文書作成ソフトなどでは、あらかじめ複数のスタイルシートを作成しておくことにより、文書作成の度にいちいちレイアウトを編集しなくても、本文にスタイルシートを適用するだけで文書を作成することができる。
また、伝票などの定型文書を作成する際に、同じスタイルシートを使うことで見栄えを統一することができる。
最近はWebページでもスタイルシートの機能を使用することが可能で、インターネット上での「スタイルシート」の意味はむしろこちらが主流となっている。
インターネット上でのスタイルシートの利用は主にHTML文書に対して行われている。
HTML文書にスタイルシートを適用する際にはCSSという言語を使用し、複数のページから同じCSSファイルを参照することで、複数のページの見栄えを統一することができる。
HTML文書にスタイルシートを適用すると、HTML文書からレイアウト情報などを分離し、文書の構造だけをHTML文書本体に記述することが可能になる。
これによって、HTML文書の論理的な構造が把握しやすくなるほか、主に手書きでHTML文書を記述する際に、見栄えに関するデータを全部のページにいちいち記述する必要がなくなるというメリットがある。
なお、インターネット上では「スタイルシート」をCSSとまったく同じものとして取り扱っている例が多いが、厳密には「CSSはスタイルシート機能を実現するための言語のひとつ」という関係になっている。
例えば、HTML文書で使えるスタイルシートの言語はCSSのみだが、XMLではCSSのほかに、スタイルシート機能を実現する言語としてXSLが用意されている。



ライブドアブログのサイドメニューに左寄せで自動スクロールバーを設置



サンプル

実験用のデータです
あいうえお
表示確認用
aiueo
縦長、横長の表示にするための文字列
かきくけこ
サンプル文章
テストですよ
実験結果


サンプルのCSSタグ
「
<div style="background: #EFEFEF; width:170px; border: 1px solid #CC0000; height:100px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px; overflow: auto; text-align:left;">
実験用のデータです
あいうえお
表示確認用
aiueo
縦長、横長の表示にするための文字列
かきくけこ
サンプル文章
テストですよ
実験結果
</div>
」

CSSタグの簡単な説明
background、背景のカラー
width、横幅
height、縦幅
border、枠線
solid、枠線のカラー
padding-left、左パディング
padding-right、右パディング
padding-top、上パディング
padding-bottom、下パディング
overflow、スクロールバー
text-align、文字の左右中央に寄せる

padding(パディング)は内側の余白の事です。
ここでは使用していませんが、margin(マージン)は外側の余白となります。



口コミ評価評判感想



ブログを書き続けているとカスタマイズしたくなるという方も多いと思います。
最低限、「HTMLタグ」と「CSSタグ」の知識がないと難しいです。
興味がある方は、本を購入してみて下さい。
その際、中途半端な書籍を購入するよりも「辞典」の購入をおすすめします。
後々、凄く役立ちます。

「知って得する便利な機能」についても参考にして下さい。


タグ ：
#ライブドアブログ
#サイドメニュー
#スクロールバー
#テキストエリア
#スタイルシート