CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされていますCSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
朗報！ Google Fontsにかわいい日本語フォントが大量に追加されました -2023年5月
あおぼし -GitHub Aoboshi One -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Copperplate Gothicのような文字の太さが均一でセリフのある和文書体を目指してつくられたかなフォント。ひらがな・カタカナ・英数記号文字・ラテン文字が収録されています。 フリーフォントのダウンロードはページ上部の「Download Family」から、またはGitHubの「Code- Download Zip」から。 つきみ丸ゴかな -GitHub Tsukimi Rounded -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 東京築地活版製造所の3号かなの骨格にインスパイアされたかなフォント。筆の動きを残した丸ゴシックで、縦組みにぴったりです。ひらがな・カタカナ・一部の記号文字が収録されています。 フ
WordPressの今までの解説書は全部過去のものに、制作の仕様が大きく変わったブロックテーマの使い方がよく分かる解説書 -作って学ぶWordPressブロックテーマ
「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。 WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されてお
VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズできます。 Blockman -GitHub Blockmanの特徴 Blockmanのインストール Blockmanの使い方 Blockmanの特徴 Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。 サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift,
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
この本を読んだら簡単にできた！ 入門書に最適、Dockerで仮想サーバーを構築する方法がよく分かる良書 -Docker＆仮想サーバー完全入門
サーバー関連は苦手、でもWebサイトやアプリを理想的な環境で開発したい、Webサーバーや仮想サーバーの知識を身につけたい、そんな人に初心者でも始められるDockerの解説書を紹介します。 表紙に既視感を覚えた人は、大正解！ 本書は今年発売された「Visual Studio Code完全入門（紹介記事）」の姉妹書です。 私は本書で初めてDockerを使用してみたのですが、本当に驚くほど簡単にWebサーバーやWordPress用の仮想サーバーを構築できました。 正真正銘「完全入門」「ここから始めて、ずっと使える」一冊です！ Dockerとは、コンテナと呼ばれる仮想化技術を扱えるもので、一言で言うと、仮想サーバーを構築できるツールです。仮想サーバーはWindowsやmacOS上に異なるOSでサーバー構築ができます。 本書はDockerやコンテナ、仮想サーバーに高いハードルを感じてしまう人のために
CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！ CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。 画像: @bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいビューポート単位「lvh」「svh」「dvh」とは ブラウザのサポート状況 はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズ
分かると、実に、おもしろい！ QRコードの仕組み
少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに QRコードの仕組み 終わりに はじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか？ 控えめに言って、実に、おもしろい！ 注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード（Quick Response code）は自動車部
VS Codeの新機能「スティッキー スクロール」がさらに便利に！ 追従行数の変更、関数やクラスをリスト化できます
先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
貴重なKindleセールが開催！ 年に一度、翔泳社祭2023で人気のデザイン書・Web制作の解説書・イラスト本が超お買い得
商用利用無料、国内のフリーイラスト素材の総まとめ
3日間限定「Visual Studio Code完全入門」が全文無料公開されています！ Web制作とプログラミングに特化された解説書
