コンテンツがスクロール可能な場合にヒントを表示する ScrollHint の設定とカスタマイズ方法 | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテンツを含むページで課題を生じさせることがあります。 スマートフォンのような狭い画面では、重要な表データを見やすく表示させることが難しく、収まらない部分をスクロールさせることで解決できないかと考え、その際にスクロールできる事を気づいてもらうために、私たちが開発したのがユーザーに視覚的なヒントを提供するJavaScriptライブラリ「ScrollHint」を作りました。 2018年にリリースし、今では多くのサイトで「スクロールできます」を見かけるようになりました。ありがとうございます。また Google や X で ScrollHint を検索してみると、ブログの記事 や 感想の POST を見つけることができ、大
コピペ可！CSSだけでレスポンシブテーブルをつくろう
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html <table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</
CSSのみでレスポンシブ対応したテーブルデザインを作る３つの方法 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
レスポンシブにはtableではなく、dlを使おう | ogu-tec
ブラウザ上の表示 作者 ジョン ポール ジョージ リンゴ しかもhtml5からは一つのdtに複数のddを付与できます。 要するにdlはデータリスト環境だということです。 （このdlの使い方についてはかつて「小技集」25で紹介しました。） table表をdlに変更する 実は具体的な要求があります。さくらサーバーで提供されている問い合わせフォームをレスポンシブ化したいという要求です。以下がそのhtml部分です。 <table class="form" summary="問合せフォーム"> <tbody> <tr> <th>お名前</th> <td><input name="name" size="35" type="text" /></td> </tr> <tr> <th>メールアドレス</th> <td><input name="email" size="35" type="text" />
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
