2012年01月29日

textareaのサイズを固定する

言語:HTML/CSS

複数行のテキストを入力してもらう際、textarea要素を使います。

デフォルトでは、右下の三角をマウスでドラッグすることで、サイズを変更できるようになっています。

一見便利そうですが、レイアウトが崩れたりといったことの要因にもなり、サイズを固定したい場合があります。

textareaのサイズを固定するにはCSSでresize属性noneを設定します。
textarea {
    resize: none;
}
こうすることで、右下の三角が消えてサイズ変更が出来なくなります。

2010年02月25日

ボックスの枠線の属性を設定するCSS - (HTML, CSS)

blog_2_2

Webサイトを作っていると、borderで始まる属性をCSSで設定することが多いと思います(私は多いです)。私は<DIV>タグで要素をグループ化して、その枠線の色や太さをCSSで設定したりすることが多いです。このような属性をボックスといいます。今回はボックスに関するCSSを紹介します。

1.枠線の種類を指定
枠線の種類を指定するCSSはborder-styleです。この属性の値と機能を以下の表に示します。

機能
noneなし
solid1本線
double2本線
groove溝のように見える
ridge盛り上がって見える

例えば、
border-style: solid;
のように記述します。

2.枠線の色を指定
枠線の色を指定するCSSはborder-colorです。RGBで指定する場合は、
border-color: #rrggbb;
となります。色の名前を指定することもできます。

3.枠線の太さを指定
枠線の太さを指定するCSSはborder-widthです。値はピクセル値を指定できます。ピクセル値以外にも属性の名前で指定できます。この属性の値と機能を以下の表に示します。

機能
thin細い線
medium中くらいの線
thick太い線


4.枠線それぞれに属性を設定
枠線は上下左右あります。それぞれの枠線に別々の色や種類を指定したい場合があります。その場合は、border-top/bottom/right/left-の後に属性を記述して、値を指定します。例えば、上側の線の種類のみを変えたい場合は
border-top-style: solid;
のようにします。

2010年02月05日

HTMLのテーブルの表のセルを連結する属性 - (HTML)

blog_2_1

言語:HTML

ついつい忘れてしまうタグの属性です。
今回は、<table>タグで作成する表のセルを連結するタグ属性を紹介します。私はたまに使うのですが、いつも忘れているので、Webで調べてしまいます。
使用する属性は、COLSPANとROWSPANです。これらは、<TD>タグや<TH>タグの属性です。
COLSPANには横方向に連結するセルの数を指定します。
ROWSPANには縦方向に連結するセルの数を指定します。
以下、使用例を示します。

1.COLSPANの例
<html>
    <head>
        <title>横のセルを連結</title>
    </head>

    <body>
        <table border="1">
            <tr>
                <td colspan="2">2つのセルを横に連結</td>
            </tr>
            <tr>
                <td>セル1</td><td>セル2</td>
            </tr>
        </table>
    </body>
</html>
次のように表示されます。
col


2.ROWSPANの例
<html>
    <head>
        <title>縦のセルを連結</title>
    </head>

    <body>
        <table border="1">
            <tr>
                <td rowspan="2">2つのセルを縦に連結</td>
                <td>セル1</td>
            </tr>
            <tr>
                <td>セル2</td>
            </tr>
        </table>
    </body>
</html>
次のように表示されます。
row


以上です。

2010年02月03日

テーブルの枠を重ねるCSS - (HTML, CSS)

CA3A0024

ついつい忘れてしまうCSSです。
HTMLで<table>タグをよく使用しますが、デフォルトのままだと枠線が表示されません(ブラウザによるのかな?)。「もっと、エクセルの表っぽくできないかな〜。」なんて思っている人には、今回のCSSがおすすめです。HTMLとCSSは以下のようになります。赤字の部分が枠を重ねるCSSです。
<html>
    <head>
        <title>枠線を重ねたテーブル</title>
        <style type="text/css">
        <!--
        table {
            border-collapse: collapse;
        }
        td {
            border: solid 1px;
        }
        -->
        </style>
    </head>

    <body>
        <table>
            <tr><td>AAA</td><td>BBB</td></tr>
            <tr><td>CCC</td><td>DDD</td></tr>
        </table>
    </body>
</html>


ブラウザで表示させると、以下のようになります(クリックで拡大します)。枠が重なっているのが判ります。
html_table2


2010年01月21日

HTMLのリンクの下線を消す方法-(Web, HTML)

プラットフォーム:Web
言語:HTML

□HTMLのリンク(<a>...</a>)の下線を消すCSS。

a {
  text-decoration: none;
}



□リンクにマウスが重なったときに、下線を表示するCSS。

a:hover {
  text-decoration: underline;
}