プログラミング ｢HTML･CSS｣ 一覧[9]
Tabキーを押下時のフォーカス移動させなくするにはどうしたらよいのか
令和4年 3月 11日
Tabキーを押した時、フォーカス可能な要素に対し順々に移動していくのが通常の仕様なのですが、そのTabフォーカスさせなくする…
手段 tabindex属性を指定する事により実現可能で、属性値が0以上の場合はフォーカス…
CSSを記述する3つのパターン
令和3年 3月 20日-
CSSを記述する場所は、HTMLのタグ内に直接書く「インライン形式」、ヘッダー内に<style>タグを書き込む「ヘッダー埋め込…
手順 下記実装方法欄に各形式の記述例を記載します。 CSSの適用優先順位は「インライ…
CSSにて tableのセル[th][td]に対して最小高さである「min-height」を設定するには
令和2年 6月 27日-
結論をから言えば「できません」。 しかし、別の方法で同様の効果を得る事はできます。
手段 擬似要素を使用し対応。 実装方法 対象のテーブルセルに対して下記CSSコードを…
liタグを隙間なく敷き詰める
平成30年 10月 8日-
liタグを隙間なく敷き詰めたい場面がでてきた為、その実現方法を調査する。
手段 liタグのrightとbottomに対してネガティブマージンを設定する事で可能。 実装方…
table内thとtdに高さ制限を設け、スクロールバーを表示させる
平成30年 9月 17日-
table内thとtdにcssにて高さ設定（height:値;）をしても文字数が多いと勝手に高さを調整してしまう。（高くなってしまう。） 設…
手段 <th>と<td>内に内包するdivタグを作り対応する。 実装方法 HTML &…
レスポンシブル対策（表示画面横幅調整）をCSSで行ってみる
平成30年 9月 14日-
PCの大画面での閲覧のみを想定としたwebデザインではスマホ・タブレットの表示時に問題が生じる場面が出てくるので、その対応を…
手段 画面の横幅によって表示方法を変更・適用させるCSS「Media Queries（@media scr…
フォントサイズ指定の単位を「rem」に統一してみる
平成30年 7月 25日-
CSSのフォントサイズ指定の単位には「px」・「%」・「em」・「rem」・「vw（vh）」と多々あり、今までは使いやすさから「px」指…
手段 特徴 「rem」は、ルート要素（html要素）に対して相対的なフォントサイズとなる…
横並びの為にfloatしたliタグを中央寄せにする
平成30年 6月 20日-
横並びの為にfloatしたliタグに対し 左右マージンの値を指定しないで中央寄せしたい場面がでてきた為、実現可否の確認・可であ…
手段 「position: relative;」を使った手法で実現可能。 実装方法 HTML <div id=…
独自データ属性を利用しツールチップ表示する
平成30年 5月 5日-
今まではツールチップを表示する際には「aタグ」内に「spanタグ」を入れ子にし、通常は「display: none;」にし、hover時「displ…
手段 HTML要素に接頭語「data-」で始まり属性値を付与しCSSにてコントロールするだけ…