技術情報

以前テーブルを分けてスクロールさせる方法をご紹介いたしました。今回はCSSでレスポンシブなテーブルを表示する方法をご紹介いたします。サンプルサンプルではPCで横に見出しがあるタイプのものを、400px以内の表示の時に「th」と「td」を縦に...

今回はリストタグで長さの違う要素を合わせる方法ご紹介いたします。サンプルリスト1～4とリスト5の両端をピッタリ合わせています。サンプルhtml今回はよくありそうなので、liの中にaタグを入れてみました。ポイントは「</li><!-- -->...

今回はCSSでのログインフォームデザインをご紹介いたします。サンプルユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。サンプルhtmlラベルを記述し各フィールドに対応させておくと、アイコンを...

今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。サンプル右端に矢印アイコンが表示されています。サンプルhtmlulにクラスがついてる普通のリストです。<ul class="cursor"> <li><a hr...

前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。サンプルサンプルでは右側のデータ部分が横スクロールします。サンプルhtmlテーブルをdivで切り、「float:...

今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。サンプルサンプルではテーブルの見出し下のデータ部分がスクロールします。サンプルhtml外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで切って分け...