ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
Adobe Museで簡単にhtmlテーブルを作成する方法
こんにちは！ 今日は珍しく（笑）役に立ちそうなトピックをご紹介いたします！ Adobe Museは直感的にイラストを制作するように簡単にWEBサイトを制作できるとても便利なツールですが、コーディングを必要としない反面、様々な障害に直面する事もございます。 私がMuseを使い始めてまず困ったことは、 テーブルが作れない！！ ということでございました。 長方形を作って、その上にテキストを置いて、それをコピーして、また色を変えて… みたいな形でテーブルっぽいデザインを作成する事は可能なのですが、いかんせん面倒臭い。 ここはさくっとhtmlで編集しやすく作ってしまいたいですよね！？ そんなお悩みを解決するちょっと便利な小技を本日はご紹介いたします。 はい、こちらのサイトにご注目ください。 「Table Generator」というサイトでして、こちらブラウザでテーブルを自分で編集し、作ったテーブルの
【小ネタ】CSS だけで Table 要素をレスポンシブ対応させる方法 | Recruit Tech Blog
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
%25B5%25AD%25CB%25A1)
テーブル(表組み)記法 - Seesaa Wiki 簡単記法リファレンス
Seesaa Wiki 簡単記法リファレンス Seesaa Wikiの記法リファレンスです。 トップページページ一覧メンバー掲示板編集 テーブル(表組み)記法 最終更新： staff_wiki 2017年06月12日(月) 21:23:29履歴 Tweet 行頭から | で区切ると表組み(テーブル)になります。 |テキスト|テキスト|テキスト| |テキスト|テキスト|テキスト| テキストテキストテキストテキストテキストテキスト セルは、ヘッダ、表示位置、背景色、文字色、文字サイズなどが指定できます。記法名記法説明表組み(テーブル)|〜〜|〜〜|表組み(テーブル)を作成します属性の設定{|〜〜|}テーブルに属性を設定します右に結合(colspan)|>|〜〜|右のセルと結合します(colspan)上に結合(rowspan)|^|〜〜|上のセルと結合します(rowspan)セルの幅指定|w()
InDesign: オーバーフローした表セルに長体をかけるJavaScript - 文書遊戯
DITAでは食べていけず、仕事ではInDesignを使っています。「両極端だなぁ」と、自分でも思っています。 プリプレスの世界も作業の効率化は避けて通れない課題です。幸いにも、InDesignにはJavaScriptによる自動化の機能が備わっています。退屈なDTP作業の合間に、使えそうなJavaScriptを書いて楽しんでおります。 ここから本題。 Excelで入力した名簿などのデータをInDesignに配置することがしばしばあります。この作業で面倒なのが、表セルに収まりきらずにオーバーセットになるテキストが出ること。これを解決する手段は２つあります(これ以外にもあるかも!?)。 （１）InDesign CS4以降なら、正規表現スタイルを利用する 参考：市川せうぞーさんの記事 文字数によって自動的に長体をかける （２）JavaScriptを使ってオーバーセットのテキストに長体をかける CS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MuseThemes.com - Table Maker Widget | Adobe Muse Tutorial
Red Team Design
CSV HTML 変換。オンライン フリー — Convertio
ブログへの表挿入に。エクセル表からHTMLテーブルを作ってくれるツールが便利すぎる