古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Livewire | Livewire
Livewire v3 has been released! Go check it out on livewire.laravel.com! Building modern web apps is hard. Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer's workflow is insane. It doesn’t have to be this way... Ok, I'm listening... Say hello to Livewire. Hi Livewire! Livewire is a full-stack framework for Laravel that makes building dynamic int
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
プロセスをしょうもないErrorで落とさないように頑張る
Notes de l'éditeur* すでにQiitaや毛色の違うイベントで発表済みのネタなんでもしかしたら知っているかも * Node.jsでサーバやワーカをつくっている * 大量のコネクションをもつNode.jsサーバでのエラー処理が難しいということをここ1ヶ月くらいで考えていたので、自分なりにまとめてみたNede.jsはシングルプロセスシングルスレッドで稼働するイベントループモデルの実行環境となっています。 図のように、待ちが発生する処理をイベントループに積んでタスクを順次実行していくのでシングルスレッドでも遅くなることがないと言われています。 逆に待つ処理を入れてしまうのはよくないやり方です。エラー処理もJavaとかPythonと比べると異なるやり方をとっていて、非同期I/O処理時のエラーは図のようにイベントのコールバックとして受け取ったり、ライブラリだとエラーオブジェクトとして
ソース開く必要ナシ。Hタグをハイライトするブックマークレット「html-highlighter」を公開しました | 株式会社ZINE
ソース、どうやって確認していますか？ 正しいマークアップ、HTML構造化の観点から、hタグ（h1, h2, h3…）の使いどころが大事なのは、メディア運営に限った話ではないはず。 とりあえず、SEO関連記事やHTMLについて調べてみるんだけど、記事によって書いてることが違ったりして、どうしていいやら。結局のところ、他サイト、有名サイトではhタグをどうやって使ってるんだろう？ そこで、構造化がしっかりしてるサイトでhタグがどのように使われてるか参考にする、あると思います。 今まではどうやっていたのか １. HTMLソースを開いて確認する ブラウザで見ているWebページ上で、 Command + Option + u とする（Chromeの場合）と、HTMLソースが別タブで開く。さらに Command + f とやって、ページ内を「h1」などのキーワードで検索する。と、ハイライトされ「あぁ、こ
DockerがCloud Foundry Foundationへ参加表明。来月にもCloud FoundryがDocker正式サポート発表か
コンテナ型仮想化ソフトウェア「Docker」の開発元であるDockerは、オープンソースのPaaS基盤ソフトウェアである「Cloud Foundry」の開発団体となる「Cloud Foundry Foundation」へ参加することを発表しました。 Cloud Foundryは現在Pivotalが管理しており、Cloud Foundry Foundationは来月にもPivotalから移管を受けて発足予定。 Cloud FoundryがDockerサポートを6月9日に発表か？ Cloud Foundryの内部では、アプリケーションの実行基盤として独自のコンテナ技術である「Warden」（ウォードン）が使われており、基本的にはDockerはサポートされていません。 ただし、すでにCloud FoundryでDockerをサポートするActiveStateのStackatoなどの実装が存在して
Sass 3.3の新しいデータ型: マップ
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Another REST vs GraphQL comparison
DrawIt - Bohemian Coding
https://qiita.com/Dronetube/items/ac02a23eafe7d09f3b57