Grid by Example - Usage examples of CSS Grid Layout
The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification. They will not work in IE10 or 11. For page layout examples see a collection of page l
CSS Grid Layout を極める！（場面別編） - Qiita
0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
Reduce file size with CSS Sorting - Pete Schuster
Let me take you on a journey. In the beginning, I was using Sublime Text 2 (ST2) as my primary code editor. Then, Sublime Text 3 (ST3) came out and people at my company began to switch. They were raving about how much faster it was, the native image preview support, etc. So I decided to switch. Most of the packages that I used in ST2 were also supported in ST3, so I didn’t see much of an issue swi
Example config · stylelint
This example config lists all of the rules and their primary options. You can remove (or turn off) the rules you don't want and edit the primary option of each rule to your liking. You might want to learn a little about how rules are named and how they work together, to get a better idea of what each rule does. { "rules": { "at-rule-blacklist": string|[], "at-rule-empty-line-before": "always"|"nev
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()の基本的な使い方
Th-MakerX
概要 Th-MakerX は、画像サイズを変更した JPEG または PNG ファイルを作成します。大量の画像を一括して高速にリサイズすることができます。 受付可能な画像フォーマット：BMP, GIF, JP2, JPEG, MacPaint, PDF, Photoshop, PICT, PNG, QuickTimeイメージ, SGI, TGA, TIFF など Cocoa がサポートするフォーマット(OS X のバージョンにより異なります) 出力ファイルのフォーマット：JPEG または PNG リサイズ指定方法：幅、高さ、フィット、外接、切取り、面積、比率 余白、ウォータマーク付加機能 画像解像度の調整機能 サムネールファイル作成のほか、簡易画像サイズ変更ツール、簡易JPEG/PNG変換ツールとしても利用できます。 縮小画像／拡大画像が荒れてしまうことがあります (解像度が 72 dpi
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
CSSでヒラギノ角ゴシックのウェイトを指定する方法 - Ryusei’s Notes (a.k.a. M59のブログ)
※追記あります Mac OS X El Capitanのヒラギノ角ゴシック — Medium ヒラギノ角ゴシックは10ウェイトあるが、CSSでは9つ（100から900まで100間隔）でしか指定できない。しかも、具体的にどのウェイトで表示されるかが、ブラウザによって異なっているようだ。 font-weightと実際に使われるウェイトの対応の表: CSS font-weight Firefox Chrome 100 W0 W0 200 W2 W1 300 W3 W3 400 W4 W4 500 W5 W5 600 W6 W6 700 W7 W7 800 W8 W8 900 W9 W9 また、normalとboldはそれぞれ400と700を指定するのと同じなのだが、今までのヒラギノ角ゴではW3とW6を使ってきたのだから、これでは少し太いかもしれない。こういう時は、@font-faceを使って、ウ
El Capitanのヒラギノ問題 ／ ブログ by Kishin
Mac OS X El Capitanでは、標準搭載されているヒラギノ角ゴシックの種類が大幅に増えた。 それ自体は喜ばしいことなのだが、実用レベルでは残念ながら多くの問題を抱えてしまう結果に陥ってしまっている。ヒラギノフォントの製造元からもアナウンスが出ているが、CSSで指定して調べてみるとWebサイトで使用する場合にも注意が必要であることが分かった。 CSSでEl Capitan用にフォントファミリーを指定する場合には、下記のような記述で新しいヒラギノファミリーが使用可能となる。 【El Capitan】font-family: 'Hiragino Sans','ヒラギノ角ゴシック',… 一般的に、今まではW3かW6を使用していたが、El Capitanでは、上記に加えてfont-weightを指定することで、W1〜W9までの太さを任意に指定可能となった。例えば、W5を指定したい場合には
長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ
久しぶりにcssレイアウトでハマってしまった。 floatレイアウトは一般的なレイアウトとしていろいろとノウハウが溜まっているように思いますが、flex box layoutはまだまだ思いもよらない挙動をすることがありますね。 今回ハマったのは「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト」という一言にするとよくわからない感じですが… 要は２カラムレイアウトで、片方は固定幅、もう片方は可変幅の（幅いっぱいになるような）カラムレイアウトであり、可変幅の方の子要素として長いテキストを含んでいるもののレイアウトです。 単純に考えて↓こんな感じで書けば、１つ目の要素が幅100pxの固定になり２つ目の要素が残りをエリアの幅になると思うのですが、そうはなりません…。 <style type="text/css"> .flex { display: flex; wid
Google AdSenseのうっかりクリック防止！CSSで広告リンクを無効にする方法｜てとぶろ
自分のサイトに設置している広告を、うっかりクリックしてしまいそうになったことはありませんか？ 私はよくあります！ 不正に厳しいGoogle AdSenseでも、誤クリックと判断できる程度の回数なら問題ないようですが、それでもやはり不正認定されたらと思うと心配になりますよね。 というわけで、うっかりクリックを防止する対策を行いましょう。 対象となるサイト 今回対象とするサイトは以下の通りです。 WordPressで構築されたサイト ログインするのはサイトの運営・制作・管理者のみ 「ログインしている＝サイト運営者＝広告をクリックしてはダメな人」という前提で対策を行います。 会員制サイトの場合でも、ユーザー権限による条件分岐などを使えば対応できると思いますが、この記事では対象外とします。 下準備をしよう 広告を共通のclassで囲む Google AdSenseで取得した広告コードを囲むように、
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
How to lint your Sass/CSS properly with Stylelint
Last updated on the 27th February, 2016 . Stylesheet linting. Not many people do it. Many more people should—especially diverse teams that have a lot of hands touching the codebase. In this article I’m going to talk about why we should lint our stylesheets, and how to implement stylesheet linting into our build pipelines for both vanilla CSS and Sass. Table of contents: Introduction What is lintin
CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog
この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサー（またはメタ言語）とは、CSSとは異なる独自の構文で記述された文字列を入力とし、ブラウザが解釈可能なCSSコードを出力するもの。SassやLess、Stylus等がその実装に当たる。 次にCSSポストプロセッサーとは、CSSを入力とし、より効果的なCSSに変換し、最適化するもの。例えば、コードを圧縮したり、自動でベンダープリフィックスを付与したり、プロパティ宣言の順番を読みやすいように並び変えたりするもので、CSSWringやAutoprefixer、CSSCombがその実装。いわゆるオプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - stylelint/stylelint-config-standard: The standard shareable config for Stylelint
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
