改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita
はじめに HTMLタグの要素内容として、改行コードを含む文字列を埋め込んだ場合に改行の見せ方をブラウザ側で調整する方法がわかりました。 vue.jsを使用したプロジェクトなのでVue.jsのコンポーネントを使用していますが、vue.jsとかmustache記法は関係ありません。 困っていること 何もしないと、こんな感じになります。 エラーメッセージとはいえ、美しく表示させたいのでエラーメッセージ毎に改行表示させたい。 JS側のコードになるべくHTMLタグを入れ込みたくない。 実行結果 サンプルコード <template> ... <strong>Error: {{message}}</strong> ... </template> <script> export default { data() { return { message: `User nameは必須項目です。 E-m
HTML / CSS を検証（チェック）できる無料サービス一覧 - Naifix
ブログをカスタマイズするときあちこちのコードをいじりますが、ある程度適当なコードでもブラウザが自動補正して表示してくれます。 でも、自分の環境では思ったとおり反映されているのに、ブラウザやバージョンの違いで意図しないエラーが吐き出されていることもあります。 そうしたエラーを防ぐために、HTML や CSS をチェックしてくれるサービスを活用しましょう。 WordPress の一般的なエラーや不具合への対応方法まとめ HTMLをチェックしてくれるツール HTML にはいろいろなバージョンがありますが、現在は「HTML Living Standard」が標準仕様となっています。 HTML Conformance Checkers — WHATWG HTML Conformance Checkers — WHATWG 調べたいページの URL を入力し、「Check」をクリックするだけで検証して
jQueryプラグインでオリジナルのダイアログを表示する方法 - Qiita
デフォルトで表示 特にカスタマイズせず、confirm()で表示すると下記のような表示になります。 OK/キャンセルの2択だけ選択させたい場合であれば、初期ダイアログで事足りますが、 ボタンや選択肢を追加したい場合、カスタマイズする必要があります。 あと、個人的に初期デフォルトだとIPが表示されてかっこ悪い印象を持ちます このあと、カスタマイズする方法を説明します。 準備 オリジナルのダイアログを表示するにはjQuery UIのDialogプラグインを用います。 jQuery UIに必要なファイルは下記3つになります。 jQueryのJavaScriptライブラリ jQuery UIのJavaScriptライブラリ jQuery UI用のCSSテーマファイル <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs
オブジェクトのプロトタイプ - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
朗報！ これでCSSネストの記述方法がより簡単になります
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relaxed syntax update by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 要素タグのネスト このネストを可能にするために何が変更されたのか はじめに CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされています。
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
「Google Chrome 118」安定版リリース、CSSのスタイルルールの適用範囲を限定できる「@scope」をサポート
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン118.0.5993.71がリリースされました。CSSにおいて特定範囲のみにルールを適用できる「@scope」がサポートされたほか、「scripting」と「prefers-reduced-transparency」という2つのメディア特性の追加や開発者ツールの機能向上などのアップデートが行われています。 New in Chrome 118 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-118/ New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! - YouTube ◆CSSで
古いリセット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の解説
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
React Bootstrap | React Bootstrap
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation. Built with compatibility in mind, we embrace our bootstrap core and strive to be compatibl
RGBとHSLの相互変換ツールと変換計算式
ツールの使い方 色を赤・緑・青の3つで表現する「RGB」と、色を色相・彩度・輝度の3つで表現する「HSL」を相互変換するツールです。HTMLなどで使う16進数カラーコードとの変換も可能。 Webブラウザ上で動作するので手軽に利用できます。 ■ [関連項目] HSL色空間とは RGB値をHSL値に変換したい場合は、RGB値の欄に変換する値を入力してください。 HSL値をRGB値に変換したい場合は、HSL値の欄に変換する値を入力してください。 値を入力すると、変換後の値が自動的にセットされます。 RGBの各パラメータは0～255の値で表示されます。 HSLはデフォルト設定だとHが0～360、SとLは0～100で表示されますが、Hを0～100、SとLを0～255の範囲に変更することもできます。 HSLとHSV・HSBの違いについて 「HSL」は、色を色相(Hue)・彩度(Saturation)・
CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
Visual Studio CodeをProxy配下で利用しているときにExtensionがインストールできないときの対処方法 - Qiita
Visual Studio CodeをProxy配下で利用しているときにExtensionがインストールできないときの対処方法VisualStudioCode 現在問題が再発している模様 上記を参考にしていただくとよいかと思われます。 問題 Visual Studio CodeをWindowsかつProxy配下で利用しているときにExtensionがインストールできない 新対策 インストール後以下を設定すればOK Proxyそのものの設定についてはPreferences→User Settingsにて設定してください。 以下は現状の私の設定状況です。 // Place your settings in this file to overwrite the default settings { //-------- HTTP configuration -------- // The pro
HTMLのタグちゃんと使おう
初めに Team DELTA の三浦です。 昨年のアドベントカレンダーでweb 制作から開発領域に足を踏み出している話を書きました。 React で書かれたスマートクリニックシステムの UI 調整をメインでやっています。 アドベントカレンダー以降も Team DELTA として情報発信していくぞ！ということで、今週は、自分が UI 調整をする中で気づいた、マークアップで気をつけたいことの記事を書きました。 どんな人に読んでほしいか まずは自分（戒めも込めて） そして、どちらかというとサーバー側をメインで書いていて、あまりマークアップに触れてこなかったという方にも、参考になる部分があれば幸いです。 どんな内容か なるべく適切なタグを使おうというテーマです。WAI-ARIA のようなアクセシビリティには細かく踏み込んでいません。 誤っている内容があれば、（優しめに）ご指摘いただきたいです！ H
【CSS/html】tableのヘッダを固定してスクロールさせる方法
タイトル1-1 タイトル1-2 タイトル1-3 タイトル1-4 タイトル1-5 タイトル1-6 タイトル1-7 タイトル1-8 タイトル1-9 タイトル1-10 タイトル1-11 タイトル1-12 タイトル1-13 タイトル1-14 タイトル1-15 タイトル1-16 タイトル2
スクロールテーブルを実装する際の注意点
前回ヘッダー・フッター・列固定可能なテーブルを実現するためのjQueryプラグインを作ってみたので，その際に気がついた点についてまとめてみた．すこしづつ増えてる・・・ 2011/02/14更新． 2011/03/01更新． 2011/05/30更新． 2013/12/24更新． 2018/01/24更新. (position:sticky法を追加…素晴らしい) 2018/04/27更新. display:grid+position:stickyによる実装例を追加 スクロール可能なテーブルを実現する手段としてはだいたい次の6つの方法が挙げらる．まあここらへんはアイディアの問題なので細かく考えていけばもっとあるかもしれない． テーブル分割法 テーブル要素を複数のテーブルに分割して対処する方法 いろいろな場所で公開されている． pushpin header法 cssのposition設定を利用す
Document: querySelectorAll() メソッド - Web API | MDN
Document Object ModelDocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColorallanchorsappletsbgColorbodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomainembedsfeaturePolicyfgColorfirstElementChildfontsformsfragmentDirectivefullscreenfullscreenElementfullscreenEnabledheadhiddenimagesimp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
