ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し
CSS Flexboxの勉強に最適！コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ
CSS Flexboxで何ができるのか、どういうことができるのか、基礎知識をはじめ、グリッドやレイアウトに使える実装コードやコンポーネントの実装コードなど、Flexboxの実装に役立つコンテンツをまとめて紹介します。
[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！ 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
![[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a99bb8a10dc67f32f5120a14ca9f4d9546de9b36/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016042601.png)
CSSだけで矢印を作ってみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
ワーキングマザーの池島です。 年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。 そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。 サポートブラウザは、基本的に最新のバージョンを想定しています。 ::before や ::after を使わず、別のオブジェクトとして扱えば、もっと古いバージョンでも使えると思います。 今回は、HTMLがシンプルにできる方法で考えました。 左から右のグラデーション矢印 まずは、スタンダードな矢印です。グラデーションを付けてみました。 ［IE8〜（グラデーションはIE10〜）］ HTML <div clas
[css] contentプロパティで挿入できるコンテンツ – WebTecNote
clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると３つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例：タイトルの前に★マークを
![[css] contentプロパティで挿入できるコンテンツ – WebTecNote](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。
![[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd5c987dfa0c56fe670b813b7f4c439c96db29a2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110701-01.png)
CSSで会話形式のフキダシデザインを作ってみる - AIUEO Lab2
CSSで対話形式のフキダシデザイン 今日はフキダシデザインの作り方を書きます あ。前にも使っておきながら説明しなかったやつですね？ あ、覚えてたか（笑）前に記事の中で使ったことあるね。 →みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2 ケチだなーと思いました（笑） 今日説明するから許して…。以下がCSSとHTMLです。 スポンサーリンク CSSとHTML CSS /*============================================================ フキダシデザイン ============================================================*/ .arrow_answer, .arrow_question { position: r
参考にしたいCSSでできるテーブルデザイン10選
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/learned-reading-the-flexbox-spec.html
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
イマドキCSS設計
Buttons Builder
https://qiita.com/debiru/items/4771e270902de7c5cc6e