メモ – ボタンをリンクのような外観にする

1月 1, 2003 · Posted in css · Comment 

ボタンとリンク

web系のシステム構築では、ボタンクリックで何らかのアクションを実行するような動作が基本となる。
しかし、画面設計・デザインによってリンクを用いなければならないようなケースも多々発生する。このリンクが純粋な画面遷移ではなく、何らかのアクションを伴う場合には、JavaScriptを用いてformをsubmitするなど、例外的な方法を用いなければならず、汎用性・保守性の低下を招いてしまう。
以下に示すように、スタイルシートによる見た目の設定で対応できる場合は、これを利用することをお勧めする。

サンプル

元。

↓スタイルを適用する

ソースコード

input.buttonlink{
    border:0px;
    background-color:#fff;
    text-decoration:underline;
    cursor:hand;
    color:#00f;
}

Tags: no tags

メモ – 指定サイズ内でスクロールするテーブル

1月 1, 2003 · Posted in css · Comment 

スクロールバー付きテーブル

見本

タイトル部 タイトル部
値１ 値１
値２ 値２

ソース

<div style="float:left; width:250px; overflow-x:scroll;">
    <table border="1" style="width:300px;">
    <tr><th>タイトル部</th><th>タイトル部</th></tr>
    <tr><td>値１</td><td>値１</td></tr>
    <tr><td>値２</td><td>値２</td></tr>
    </table>
</div>

Tags: no tags

メモ – セレクタ分類

1月 1, 2003 · Posted in css · Comment 

分類

タイプセレクタ

タグ名での指定

h1{}

子孫セレクタ

ネストを表現

div pre{}

クラスセレクタ

class属性を指定

h2.subtitle
.subtitle

一意セレクタ

id属性を指定

h2#subtitle

※id属性の値は一意とすること。

Tags: no tags

次ページへ »