チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ
エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フロントエンド開発者がコードの正しい構成と一貫性を保証するために使われます。ツールに関する最近の調査では、開発者の大多数がJavaScriptでLintツールを使っていると答えました。 CSSコーディングでは、コード品質管理ツールの使用に向けた動きはいくぶん緩やかで、同様の調査では開発者の大半がワークフローでCSSのLintツールを使っていないと答えました。 この記事では、スタイルシートにおけるli
Google Chromeでもfont-sizeを10px以下で表示させるCSS - 株式会社アップシェア ブログ
【2021年7月更新】 Webサイト制作で極小フォントサイズを使用したいときに厄介なのが Google Chrome。 Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。 ブラウザごとの表示の違い まずは Firefox、Chrome、IE、Safari での表示の違いをご覧ください。 Firefox Google Chrome Internet Explorer Safari 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。 transformプロパティでブロックごと縮小する [html] <span cla
変数名の命名規則/＊＊ケースの使い分け - Qiita
強そうな順番で コンスタントケース パスカルケース キャメルケース スネークケース ケバブケース プライベート変数（正式名募集中） コンスタントケース すべて大文字、単語をつなげる場合はアンダースコア。 APP GLOBAL_OBJECT ・用途 定数、グローバル変数、その他強い意味を持たせたい時。 ※アッパーケースと呼ばれているのも見たことがあります。 パスカルケース 文字の先頭を常に大文字。アッパーキャメルケースとも言う。 Animal CatTower ・用途 クラス （クラス以外で使ったら注意されました。） キャメルケース 最初の単語以外の文字の先頭を大文字。ローワーキャメルケースとも言う。 sleepyDog silentSea ・用途 インスタンス化した全ての変数、関数等。 スネークケース 文字の単語間にアンダーバー。大文字を使うのも有りみたい。 snake_road ・用途
[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。 この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Problem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近のWebでよく見かけるレイアウト 古典的な解決策: 外側と内側のコンテナ 単一の要素だけの場合 コントロールが可能なコンテナがある場合 親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？ 代わりに、端をフェイクする 最近のWebでよく見かけるレイアウト あなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo
![[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6f987f7d13c29854dde3dd496f6cdc6d3799c15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019060101.png)
Sassで使えるIE向けCSSハックまとめ - Qiita
Sassで使えるIE hack 皆さんはSassでIE hackを使ったことありますでしょうか？ 恐らくコンパイル時のエラーで使用できるCSSハック（以降、面倒なのでhack）が限定され、融通が効かないという理由で、以下のような条件付きコメント（conditional comments）に切り替えた方も多いんじゃないかと思います。 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js
cssfx.dev - このウェブサイトは販売用です！ - cssfx リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSボタンのデザインとホバーエフェクトのアイデア
.button01{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button01:hover{ background-color: #f9c500; /*ボタン色*/ }
brをdisplayで隠した時に空白ができる原因と対策
br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい！なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる！！と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝
cssnextから学ぶ次世代CSS - Qiita
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext（PostCSS）の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化（PostCSS） playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
あなたなら何を絞り込む？絞り込み検索に挑戦しよう！ | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 （東京・千代田区）
なぜ、WEB業界30年目の会社が「音楽エンタメ業界」特化の転職支援・人材育成を行うのか。 ワンゴジュウゴ×SNS×音楽エンタメ業界 「ワンゴジュウゴが、なぜ音楽エンタメ業界に特化した転職支援・人材育成を行っているのか」という質問をよくいただきます。 きっかけは、元大手音楽エンタメ企業に20年ほど勤めていたスタッフが参画したことで... その他ビジネスマーケティングライフハック人材育成・研修・人材紹介雑学・時事ネタ 2024年06月24日 【初めてのGA4導入】GA4の初期設定と簡単な使い方を丁寧に解説します！ GA4はすでに導入されていますか？本記事ではクライアントからよくご相談いただくGA4の初期設定について解説しており、最後まで読むとGA4の初期設定だけでなく基本的な内容も理解できるようになります。GA4の導入はしたけど、初期設定が完了してい... Webサービスビジネス 2024年0
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
スクロールバーを非表示にする｜GSblog｜Webで解決する小さな会社 株式会社 月虹製作
こんにちは、川口です。 先日、スクロール領域だけどスクロールバーを非表示にしたいことがあったため、CSSでの対応メモをば残しておきたいと思います。 webkit系の対応CSS Chrome、Safariなどで以下のような記述をすると、スクロール領域でもスクロールバーを非表示にすることができます。 スクロールバーを非表示にしたい領域のセレクタに、webkit系ベンダープレフィックスをつけたscrollbar擬似要素を指定するかんじですね！ .selector::-webkit-scrollbar{ display:none; } IE／Edgeの対応CSS IE/Edgeの場合は以下の記述で非表示にできます。 .selector { -ms-overflow-style:none; } 参考URL： 不要なスクロールバーをCSSで非表示にする(Windows) スクロールバーを非表示にした状
CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方
:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場合の使い方を紹介します。 CSS :not() with Multiple Classes 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :not()セレクタとは、特定のclassがない要素を選択する否定疑似クラスです。
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
超便利！2019年に注目したい最新CSSツール、リソースガイド100個まとめ
2019年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。 1. 新作CSSライブラリ 2. お役立ちCSSユーティリティ 3. CSS画像エフェクトツール 4. CSSレイアウトフレームワーク 5. CSS Flexbox フレームワーク 6. オンラインCSSツール&生成ツール 7. CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSBattle
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
