CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされていますCSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート
超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 - Qiita
つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい
CSSのブラウザサポート状況を自動でチェックできるdoiuseが便利 - $shibayu36->blog;
最近書いているCSSがそもそも今サービスが推奨しているブラウザでサポートされているのかチェックするのだるいと思っていたら、doiuseという便利なツールを見つけた。 doiuseとは https://www.npmjs.com/package/doiuse CSSのブラウザサポートのチェックをしてくれるモジュール。caniuse のデータベースを利用して、ブラウザと自分が書いているCSSを指定して、サポートされていないCSSの書き方を見つけてくれる。 試す環境を用意する とりあえず試すための環境を用意する。適当なディレクトリを作って、必要なライブラリをインストールする。また、検証するためにbootstrapも入れておく。 $ mkdir try-doiuse $ cd try-doiuse $ npm install --save-dev doiuse $ npm install --sa
1度使うとやみつきになる！フロントエンジニア必見の Grunt プラグイン6選 | CodeCampus
Gruntfile.js のサンプル・ダウンロード grunt-text-replace ダウンロード ** npm install grunt-text-replace --save-dev** ドキュメント https://www.npmjs.com/package/grunt-text-replace html ファイル内のテキストやメモ帳などの文章を一括変更できるプラグインになります。 文章の構成や単位の変換など用途は、いろいろあります。 しかし、残念ながら CSS ファイル内のクラス名変更などはできない仕様となっています。 また HTML 内のタグの一括変更もできませんでした。 Gruntfile.js のサンプル・ダウンロード contrib-imagemin ダウンロード npm install grunt-contrib-imagemin --save-dev ドキュメント
Joel Spolsky氏の新サービス「HyperDev」ベータ公開。アカウント不要、Git不要、サーバ申込不要、OSやミドルウェア不要。超簡単なフルスタックのWebアプリ開発環境 － Publickey
Joel Spolsky氏の新サービス「HyperDev」ベータ公開。アカウント不要、Git不要、サーバ申込不要、OSやミドルウェア不要。超簡単なフルスタックのWebアプリ開発環境 元マイクロソフトのプログラマで、エンジニアのコミュニティStackOverflowを立ち上げたジョエル・スポルスキー（Joel Spolsky）氏が、新サービス「HyperDev」をベータ公開しました。 HyperDevはWebブラウザから使えるWebアプリケーションの統合開発環境です。バックエンドにはNode.jsも立ち上がっています。 スポルスキー氏はHyperDevの特長を次のように説明しています。 アカウント作成不要 Git不要、そのほかのバージョンコントロールも不要 ネームサーバなどの操作不要 ホスティングへの申し込み不要 サーバのプロビジョニング不要 OSやLAMPやNode.jsサーバなどあらゆる
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
Browsersyncを利用してお手軽ブラウザ確認環境をつくろう - メドピア開発者ブログ
皆様はじめまして。メドピアエンジニアの中村です。 好きなブラウザは Vivaldi です。 本記事ではWeb開発効率化の為のひとつの手段として、Browsersyncの利用方法と幾つかの機能をご紹介します。 Browsersyncとは Browsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。 Browsersync - Time-saving synchronised browser testing 同種のツールとしてLiveReloadが有名ですが、 ブラウザ側でExtentionや拡張が不要 複数ブラウザで操作の同期もできる その他の機能も豊富 などのメリットから、最近はBrowsersyncの方が人気のようです。 さっそくBrowsersyncを試してみよう まずはBrowsersyncをインストールしてみましょう。 nodeのパッケージマネージ
印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu
学ぶ、考える、書き出す。
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する 当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログ
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
レンダリングを意識したパフォーマンスチューニング
ブラウザにやさしいHTML/CSS