CSSでテーブル表の一部を固定してスクロールする方法 | 福岡のホームページ制作会社 | シンス株式会社
行（横軸）を固定してスクロールする 縦にスクロールしてください。 上部の「見出し」だけ固定され、他の要素だけスクロールしていることが確認できます。 ↓ HTMLコード <table> <tr> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>
Chromeアップデートによりクリック時に黒い太枠が。消す方法は？ | #ray_u
私は主にWindowsでChromeブラウザを愛用しています。 きょうブラウザを再起動したところ、突如自分の作ったサイトでリンクを押下した際に、太枠がつくようになったことに気が付きました。 リンクのほかにも、ボタンやテキストボックス等のフォーム部品にも同じように、フォーカスを当てたら黒くて太い枠が現れます。 どうやったら消すことができるのか、非表示にする術があるのか、そもそもコレは一体どういう現象なのか、調べてみたので少し紹介します。 突如現れた黒い太枠 これは当ブログのトップページのキャプチャです。 開設に向けて準備を進めるさなか、タイトルのリンクをクリックした際に違和感が。 a要素に対し、見慣れない黒い太枠が表示されました。 この間までこんなことなかったのに。スタイルシートでそんな指定をした覚えもなく、困惑しました。 何か情報はないものか…とYahoo!の検索窓に入力したところ… ここ
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
The State of CSS 2019
In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. But don't take things for granted: despite being over 20 years old, there'
Three Predictions From The State Of CSS 2019 Survey | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Running a developer survey like the State of CSS is a multi-stage process. First, you need to collect the data. Then, you process it into a usable shape. Finally, you come up with nifty ways to visualize it and release it to the world. But then, once the dust settles and the traffic dies dow
CSS Grid でテーブルを作る : (*x).b=z->a+y/c
◆ Grid で可変行数が作れる ◆ grid-template-rows: repeat(auto-fill, auto); ◆ table 使わなくて済む ◆ セルを WebComponents の好きなタグに置き換えれる table を Grid で置き換えたい」 です table って昔からある分扱いづらく融通が利かない仕様なんですよね できることなら使いたくないのですが table じゃないとやりたいことが簡単にできないので仕方なく table を使っています Grid が出たときに これで table 捨てれる と思ったのですが 先に定義しておかないといけないようで 全部の行の定義なんてやってられません それに 動的に行を追加削除するたびに CSS を書き換えなんてイヤです なので諦めていたのですが repeat と auto-fill を使えば簡単にできると聞いたのでやってみ
複数行の文末に「…」をつけるcssをMixin管理してみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですはやちです( ˇωˇ ) 今回はよく見かける複数行の文末に「…」をつける対応をcssで実装する方法と、それを管理しやすいようにMixin化をいたしました！ 実装方法 タイトルと文章がセットになったものを用意します。 ひとつのセクションのhtmlは、こんな感じです( ˇωˇ)☝ <section> <h2>Title1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse
Grid Garden - A game for learning CSS grid layout
A game for learning CSS grid layout
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
知っておきたいブラウザについての基礎入門
知っておきたいブラウザについての基礎入門 at サポーターズ京都勉強会 https://supporterz.connpass.com/event/51220/
アニメーション: CSS vs JavaScriptの議論 - ワザノバ | wazanova
http://greensock.com/css-performance 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 GreenSockが、「アニメーションのパフォーマンスは、CSSが常に優れているというわけでない。」という観点からベンチマーク調査した結果を公表。それに対して、GoogleのPaul Irishが反論。詳細やりとりはサイトを確認していただければと思いますが、ポイントはコメント欄で交わされている結論かと。 Paul Irish 独立したtransformコントロールを必要とする場合、CSSのみのアプローチではelementのカウントが膨れ上がるので、JavaScriptの方が相当よい結果を残す。それ以外のケースでは、理想的な実装がされているという前提に立てば、両者のパフォーマンスは同
iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)
スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Pseudo Commas: Exploring comma rules in nouns and verbs
CSS @ CDS
GitHub - thedaviddias/Front-End-Checklist: 🗂 The perfect Front-End Checklist for modern websites and meticulous developers
CSSやSVGで実装するローディングアニメーション - NxWorld
CSS minification benchmark results
CSS pseudo-element input-placeholder::after to show with or without value in text box
Animography
