モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
grid-templateでページレイアウトが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 04日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 04 日目 CSS グリッド、便利ですよね。grid-template だと人類にもわかりやすい書き方でレイアウトを組むことができます。 使い方 デモ：https://codepen.io/ginpei/pen/QWYJvdp .frame { display: grid; grid-template: "header header header" 32px "toolbar main aside" auto "toolbar footer footer" 16px / 32px auto 200px; } <div class="frame"> <div style="grid-area:header"></div> <div style="grid-area:main"></div> <div style="grid
【超初心者向け】スプレッドシートの効率化術と見やすい表の作り方を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デジタルハリウッドSTUDIO by LIGの運営担当の天（@10TEN10TAN10）です。 デジタルハリウッドSTUDIO by LIGとは 株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。現在、上野・池袋・大宮・北千住にて受講生を募集中。無料説明会は毎日開催中！ デジタルハリウッドSTUDIO by LIG（以下、デジLIG）では様々な情報をGoogleが提供する表計算アプリ、スプレッドシートで管理しています。 スプレッドシートは表計算もできるので、名簿やカリキュラム一覧の作成だけでなく、過去の数字を分析し目標数字を出すこともあれば、アンケートをもとにイベント参加率を出したりと、業務で一番触れているツールと言っても過言ではありません。 スプレッドシート
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる
Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています csstable { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; margin: 0; padding: 10px; position: relative; } th { background-color: #fff; } td:hover::before { background-color: red; content: ""; height: 100%; left: -5000px; position: absolute; top: 0
table内をテキスト検索して該当キーワードを持つ列を表示する
Result table内のすべてのテキストから検索し、該当箇所のある列を表示する、みたいなやつ ある程度の量を持つデータテーブルだけど超大量でもないから、重いスクリプトは使いたくない、みたいな中途半端な状況の時は少ないコードで済ませたいところですね vanillaなコードで動作します JavaScript(function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, funct
リストを自動で3列に分ける
Result リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。 リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。 CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・ →リストを任意のカラム数に分ける css.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/ column-count: 3; column-gap: 26px; list-style: none; margin: 0; padding: 0; }html<ul class="columns"> <li> <label> <input type="checkbox" />1 lorem ipsum </label> <
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
リストを任意のカラム数に分ける
Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えておけば何かと重宝すると思います。 jQuery$(function($) { var num_cols = 3, //対象のリスト container = $('.split-list'), listItem = 'li', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), //リストのチェックと分割 items = $(this).find(listItem), min_items_per_col = Math.floor(items.length
初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォトショップ(Photoshop)入門
flex-wrapプロパティはFlexコンテナ内のFlexアイテムを一行で表示するか、行を折り返して複数行で表示させるかを指定します。 wrap
Webページのグリッドを計算する時に便利！全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide
Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。 1px端数がでてしまうといった面倒な計算とは、これでさようならです。
CSSの新しいレイアウトモジュール「CSS Grid」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル
「CSS Grid」はCSSの新しいレイアウトモジュールで、まだEditor's Draftですが、手続き完了に近づいています。このモジュールは17個の新しいプロパティを持ち、今までとは異なる新しいコンセプトでCSSを記述します。 この新しい仕様がどのように機能し、どのように記述するか、レスポンシブ対応の3カラムレイアウトを使って紹介します。 CSS Gridの基本的な使い方は、下記ページをご覧ください。 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 The Holy Grail Layout with CSS Grid 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「Holy Grail Layout（聖杯レイアウト）」とは 「CSS Grid」で3カラムレイアウトを実装 実装の解説 「Holy G
[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。 Solved by Flexbox Solved by Flexbox -GitHub 各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ コードのライセンスはMITライセンスです。 「clearfix」「overflow: hidden」から卒業 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 レスポンシブ対応の3カラムをシンプルなコードで実装 Flexboxを使った柔軟なグリッド 入力フィールドとボタンの高さを揃えて、くっつけて配置 「clearfix」
![[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee61fe7384f341a2c6e8f8141198967ab8c04f2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016021702.png)
Excelで行と列を入れ替える方法
Excelで行と列を入れ替える方法を紹介します。 １．問題点 Excelシートに次のような5ヶ月間の数値データを入力しました。 このデータの行と列を入れ替えたいのですが方法が分かりません。 ということで、Excelで行と列を入れ替える方法を紹介します。 ２．行と列を入れ替える 行と列を入れ替えるには、まず入れ替えたい範囲を選択します。 選択した範囲を、「ホーム」タブのコピーアイコン等を使ってコピーします。 コピーすると、選択した範囲の枠が点線の状態になります。 この状態で、入れ替え後のデータを貼り付けるセルを選択します。ここではB8セルを選択します。 セルを選択したあと、「ホーム」タブの「貼り付け▼」の部分をクリックし、さらに行と列を入れ替えるアイコンをクリック。 これで行と列の入れ替えができました。 ３．注意事項 上の手順では「コピー」の代わりに「切り取り」を使えばできそうな気もしますが
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
ExcelのINDEX関数の使い方
ExcelのINDEX関数の基本的な使い方を紹介します。 １．はじめに INDEX関数は、指定した位置にあるセルの参照または値を求めるためのものです。 フォーマットは次のとおりで、指定した範囲の中で、指定した行と列が交差するセルの値を返却します。 INDEX(範囲, 行番号, 列番号[, 領域番号]) パラメータの意味は次のとおりです。 範囲：1つまたは複数のセルの参照を指定 行番号：指定した範囲の行番号を数値で指定 列番号：指定した範囲の列番号を数値で指定 領域番号：「範囲」に複数の領域を指定した場合に、選択したい数値を指定。最初に設定した範囲の領域が「1」、次の範囲の領域が「2」になります（省略可） ２．基本 次の表をサンプルにします。 この状態でD8セルに、 =INDEX(B4:D6,2,3) を入力すると「5（D5セルの値）」が表示されます。 つまり、「指定した範囲（B4:D6）の
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」を紹介します。 １．はじめに 本エントリーで紹介するjQueryプラグイン「Table Hover」は次のような機能があります。 選択したセルの行を反転 選択したセルの行と列を反転 colspan/rowspan設定されているセルを反転 サンプル ２．プラグインのダウンロード Table Hoverプラグインのページにアクセスして、Downloadをクリック。 ダウンロードしたアーカイブを展開し、中にあるjsファイルを利用します。 ３．基本設定 ざっくりですがプラグインの基本設定について解説します。 jQueryとTable Hoverプラグインを読み込ます。 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
Excel VBAで列の幅を自動調整する
Excel VBAで列の幅を自動調整する方法を紹介します。 １．問題点 次のようにExcelでA列のセルに文字を設定しています。 このセルの横幅を自動調整したいのですが方法が分かりません。 ということで、列や幅を自動調整する方法を紹介します。 ２．VBAで列や幅を自動調整する VBAで列や幅を自動調整するには、AutoFitというメソッドを利用します。 A列全体で一番長いものに合わせるのであれば、次のコードを標準モジュールに設定します。 Sub test() Columns("A").AutoFit End Sub 実行結果（A1セルの横幅にあわせる） 特定のセルの横幅に合わせるのであれば、次のコードを標準モジュールに設定します。 Sub test() Range("A2").Columns.AutoFit End Sub 実行結果（A2セルの横幅にあわせる）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
display: flex