「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01

夏になると、しっかり調整したはずのサイトのコーディングで「ずれています」と連発して言われたことを思い出すもりさんです……。 Google Fontsにも日本語フォントがいくつか使えるようになり、ますますサイト制作しやすくなりました。 Google Fonts イントロダクション 夏のある時期、Google Fontsを利用したある案件を受けました。 さらに欧文や数字だけだったので、問題ないと考えてしました。 しかし…、何度調整しても「ずれている」と言われつづけることになったのです。 ずれる問題 問題は、文字の垂直の空きが違うことでした。 普通に使う分には、ほとんど分からないので問題ありません。 罫線で囲うなどを行うと、OSなどによってFontの垂直の値の違うが明確に出てしまうようです。 問題の表示を確認 Google Fontsで、Orbitronを利用したときにこんな感じになりました。

個人的な経験こそが個人ブログの強み 私たちが検索するとき、その背後には、解決したい問題や課題、解消したい悩みや困りごとが存在します。そして私たちは、自分のそれと似た問題や課題、悩みや困りごとを持った人の経験からヒントを得ようと検索します。私たちが検索で知りたいことは、例えば次のようなものです。 いま抱えている問題や課題や悩みの解決策にはどんな選択肢があるだろう？ それぞれの解決策の適合条件や、金銭的・労力的・時間的コストはどうだろう？ 自分に似た人はどんな条件で、どんな理由で、どんな解決策を選んだだろう？ その選択の結果はどれくらいうまくいき、どれくらい満足できただろう？ 私たちは自分の問題や課題、悩みや困りごとを解決していくにあたって、上記のような情報を収集しながら、自分に合いそうな解決策を模索していきます。このとき参考にするのは主に個人のブログであり、次のようなことがまとめられたブログ

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs

2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ

美しいサイトを作成するのに何百種類ものフォントを使う必要はありません。しかし、使用するフォントが全ての人にとって見やすいものであるように気をつける必要はあります。そこで便利なのがWebセーフなフォントです。 完全無料で利用でき、別途、ダウンロードしなくても問題なく訪問者に表示されるwebセーフフォントであれば完璧です。 今回は美しいwebセーフフォント31選をご紹介するとともに、WordPressサイトで使用する方法をご紹介します。 次のリンクから関心のある項目をお選びいただくか、直接webセーフフォント一覧にお進みください。 Webセーフなフォントとは 異体字も含めると、インターネット上には65万種類以上のフォントが存在します。その中でも、大半のウェブブラウザとOSが対応しているフォントはWebセーフとみなされています。フォントファイルがOSに含まれているため、サイト訪問者はサーバーから

多言語サイト制作の時に、デバイスフォントの指定って結構迷いませんか？ デバイスフォントとはOS環境に最初から搭載されているフォントで環境によって搭載されているフォントが異なります。 そしてウェブサイトでは様々な環境と言語に対応した、複数のフォント指定が必要になります。 指定したフォントは、ウェブサイト上のリード文などテキストとして表示させる箇所に反映されますが、少なくともRegular（400）とBold（700）2種類のウェイトがあり、シンプルな形状で読みやすいものが適しています。 今回はそんなデバイスフォントの設定の中でも、中国語サイト制作（繁体字・簡体字）と韓国語サイト制作の時に最低限何のフォントを指定すべきか、2020年7月現在までの私の事例を元にまとめてみました。 中国語（簡体字）sans-serifNoto Sans SC（Google Fonts）PingFang SC（Ma

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

anonymous default export? anonymous default export とは名前のとおり匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。 export default class { constructor(options) { this.options = options; } } export default function () { } export default 1 export default { a: 1 } export default [1, 2, 3]

PHPのコードスタイルをチェックしてくれるツール (Linter) といえば、PHP_CodeSnifferとPHP-CS-Fixerの2つが有名です。 2種類あるがゆえに、いざツールを導入しようとなると「どっちを選べばいいの！？」となりがちだと思います。というか自分が実際なりました。 というわけで、私が担当プロダクトへのLinter導入にあたって調査した、PHP_CodeSnifferとPHP-CS-Fixerの比較を紹介します。 使い方 いずれもComposerでインストールし、コマンドラインから実行できます。 特徴としては、PHP_CodeSnifferはチェックと自動修正でそれぞれphpcs,phpcbfという別コマンドに分かれているのに対し、PHP-CS-Fixerはphp-cs-fixer fixコマンドで自動修正、それに--dry-runオプションを付けるとチェックのみになる

modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。

htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :

Bitbucket の SSHホスト鍵を更新することが勧められています。 ※ Bitbucket は GitHub のようなサービスで、git レポジトリをホスティングしてくれます。 この記事の中で、新しいホスト鍵を ~/.ssh/known_hosts ファイルに追加するために、 curl https://bitbucket.org/site/ssh >> ~/.ssh/known_hostsというコマンドが説明されていました。 念のため、Webブラウザで直接 https://bitbucket.org/site/ssh にアクセスしたところ、 ssh-rsassh-dssecdsa-sha2-nistp256ssh-ed25519という4種類のホスト鍵が記述されていました。 ということは、先程のコマンドを実行すると、この4つ全てが ~/.ssh/known_hosts ファイルに書き込

※2023年5月29日に一部内容を更新しました 基本無料で使っている立場上、あまり文句は言えない気がしますが、急にサービスを立ち上げたり、リニューアルしたり、ある日突然サービスが終わっちゃったりと、いろいろな驚きをもたらしてくれる、Google。 この度、ある一つのサービスが急に終わってしまったんです。 そのサービス名は、Google翻訳の「Webサイト翻訳ツール」というもので、このサービス終了に伴いどんな影響が発生するのか、まとめてみました。 突然Google翻訳埋め込みサービスが終了 Googleアカウントさえあれば誰でも使えて誰でもサイトに埋め込みができる、「Google Webサイト翻訳ツール」が終了しました。これさえあればGoogle翻訳機能をサイトに埋め込み、サイトを移動せずに無料で100言語以上の翻訳が可能だったのに…。 ＜サイトでは以下のようにサービス終了を説明＞ http

Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？　コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです