最近の更新

読込中...
ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2016年10月31日月曜日

フォーカス行・セルに色をつける方法

【目的】
CSSを使用し、フォーカス行・セルに色を付けます。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
        <style>
            tr:hover {
                background-color: pink;
            }
            th:hover,td:hover {
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。































以上です。

投稿者 0 コメント
ラベル:

フォーカス行に色をつける方法

【目的】
CSSを使用し、フォーカス行に色を付けます。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
        <style>
            tr:hover {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。































以上です。

投稿者 0 コメント
ラベル:

フォーカスセルに色をつける方法

【目的】
CSSを使用し、フォーカスセルに色を付けます。



【手順】
１．「index.html」というファイルを作成。
２．「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
        <style>
            th:hover,td:hover {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>１</td>
                    <td>あああああ</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
                <tr>
                    <td>２</td>
                    <td>いいいいい</td>
                    <td>ＢＢＢＢＢ</td>
                </tr>
                <tr>
                    <td>３</td>
                    <td>ううううう</td>
                    <td>ＡＡＡＡＡ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

３．「index.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。































以上です。

投稿者 0 コメント
ラベル:

2012年9月19日水曜日

入力ボタンの文字の横位置を設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンの横位置を設定します。



【手順】
１．「044-InputButtonAlignCss.html」というファイルを作成。
２．「044-InputButtonAlignCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="width:100px; text-align:left;"><br />
    <input type="button" value="実行" style="width:100px; text-align:center;"><br />
    <input type="button" value="実行" style="width:100px; text-align:right;"><br />
</body>
</html>

３．「044-InputButtonAlignCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンの高さを設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンの高さを設定します。



【手順】
１．「043-InputButtonHeightCss.html」というファイルを作成。
２．「043-InputButtonHeightCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="height:100px;"><br />
    <input type="button" value="実行" style="height:200px;"><br />
    <input type="button" value="実行" style="height:300px;"><br />
</body>
</html>

３．「043-InputButtonHeightCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンの横幅を設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンの横幅を設定します。



【手順】
１．「042-InputButtonWidthCss.html」というファイルを作成。
２．「042-InputButtonWidthCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="width:100px;"><br />
    <input type="button" value="実行" style="width:200px;"><br />
    <input type="button" value="実行" style="width:300px;"><br />
</body>
</html>

３．「042-InputButtonWidthCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンのフォントの太さを設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンのフォントの太さ設定します。



【手順】
１．「041-InputButtonFontWeightCss.html」というファイルを作成。
２．「041-InputButtonFontWeightCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="font-weight:bold;">
</body>
</html>

３．「041-InputButtonFontWeightCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンのフォントサイズを設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンのフォントを設定します。



【手順】
１．「040-InputButtonFontSizeCss.html」というファイルを作成。
２．「040-InputButtonFontSizeCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="font-size:20px;">
</body>
</html>

３．「040-InputButtonFontSizeCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンのフォントを設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンのフォントを設定します。



【手順】
１．「036-InputButtonColorCss.html」というファイルを作成。
２．「036-InputButtonColorCss.html」を以下の様に入力。
<html>
<html>
<head>
</head>
<body>
    <input type="button" value="あいうえお" style="font-family:ＭＳ Pゴシック;"><br />
    <input type="button" value="あいうえお" style="font-family:ＭＳ ゴシック;">
</body>
</html>

３．「036-InputButtonColorCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンのボーダー(枠線)の色を設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンのボーダー(枠線)の色を設定します。



【手順】
１．「038-InputButtonBorderColorCss.html」というファイルを作成。
２．「038-InputButtonBorderColorCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="border-color:red;">
</body>
</html>

３．「038-InputButtonBorderColorCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンの背景色を設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンの背景色を設定します。



【手順】
１．「037-InputButtonBgcolorCss.html」というファイルを作成。
２．「037-InputButtonBgcolorCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="background-color:red;">
</body>
</html>

３．「037-InputButtonBgcolorCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力ボタンの文字色を設定する方法

【目的】
CSSを使用し、HTMLの入力ボタンの文字色を設定します。



【手順】
１．「036-InputButtonColorCss.html」というファイルを作成。
２．「036-InputButtonColorCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="button" value="実行" style="color:red;">
</body>
</html>

３．「036-InputButtonColorCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力テキストのIMEモードを設定する方法

【目的】
CSSを使用し、HTMLの入力テキストのIMEモードを設定します。



【手順】
１．「033-InputTextImeModeCss.html」というファイルを作成。
２．「033-InputTextImeModeCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" style="ime-mode:active;"><br />
    <input type="text" style="ime-mode:disabled;"><br />
</body>
</html>

３．「033-InputTextImeModeCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。








































以上です。

投稿者 0 コメント
ラベル:

入力チェックボックスの背景色を設定する方法

【目的】
CSSを使用し、HTMLの入力チェックボックスの背景色を設定します。



【手順】
１．「032-InputCheckboxBgcolorCss.html」というファイルを作成。
２．「032-InputCheckboxBgcolorCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="checkbox" style="background-color:red;">
</body>
</html>

３．「032-InputCheckboxBgcolorCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。








































以上です。
投稿者 0 コメント
ラベル:

入力チェックボックスのボーダー(枠線)を設定する方法

【目的】
CSSを使用し、HTMLの入力チェックボックスのボーダー(枠線)を設定します。



【手順】
１．「031-InputCheckboxBorderCss.html」というファイルを作成。
２．「031-InputCheckboxBorderCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="checkbox" style="border:1px solid red;">
</body>
</html>

３．「031-InputCheckboxBorderCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。








































以上です。

投稿者 0 コメント
ラベル:

入力テキストの高さを設定する方法

【目的】
CSSを使用し、HTMLの入力テキストの高さを設定します。



【手順】
１．「030-InputTextHeightCss.html」というファイルを作成。
２．「030-InputTextHeightCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" value="あいうえお" style="height:100px;"><br />
    <input type="text" value="あいうえお" style="height:200px;"><br />
    <input type="text" value="あいうえお" style="height:300px;"><br />
</body>
</html>

３．「030-InputTextHeightCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。











































以上です。

投稿者 0 コメント
ラベル:

入力テキストの横幅を設定する方法

【目的】
CSSを使用し、HTMLの入力テキストの横幅を設定します。



【手順】
１．「029-InputTextWidthCss.html」というファイルを作成。
２．「029-InputTextWidthCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" value="あいうえお" style="width:100px;"><br />
    <input type="text" value="あいうえお" style="width:200px;"><br />
    <input type="text" value="あいうえお" style="width:300px;"><br />
</body>
</html>

３．「029-InputTextWidthCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。











































以上です。

投稿者 0 コメント
ラベル:

2012年9月18日火曜日

入力テキストの文字の横位置を設定する方法

【目的】
CSSを使用し、HTMLの入力テキストの横位置を設定します。



【手順】
１．「028-InputTextAlignCss.html」というファイルを作成。
２．「028-InputTextAlignCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" value="あいうえお" style="text-align:left;"><br />
    <input type="text" value="あいうえお" style="text-align:center;"><br />
    <input type="text" value="あいうえお" style="text-align:right;"><br />
</body>
</html>

３．「028-InputTextAlignCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力テキストのフォントの太さを設定する方法

【目的】
CSSを使用し、HTMLの入力テキストのフォントの太さ設定します。



【手順】
１．「027-InputTextFontWeightCss.html」というファイルを作成。
２．「027-InputTextFontWeightCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" value="あいうえお" style="font-weight:bold;">
</body>
</html>

３．「027-InputTextFontWeightCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:

入力テキストのフォントサイズを設定する方法

【目的】
CSSを使用し、HTMLの入力テキストのフォントを設定します。



【手順】
１．「026-InputTextFontSizeCss.html」というファイルを作成。
２．「026-InputTextFontSizeCss.html」を以下の様に入力。
<html>
<head>
</head>
<body>
    <input type="text" value="あいうえお" style="font-size:20px;">
</body>
</html>

３．「026-InputTextFontSizeCss.html」をブラウザで開きます。
４．以下の様に表示されれば成功です。













































以上です。

投稿者 0 コメント
ラベル:
登録: 投稿 (Atom)

関連記事

loading..