typography.md タイポグラフィ font-family フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。 Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。 Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。 Mac/iOS はヒラギノ角ゴ ProN が適用される。 アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で

はじめに こんにちは、和田です。いえらぶGROUPで開発部の執行役員を務めています。 弊社も例に漏れず、今年はAI活用に非常に注力してきました。Cursorを全エンジニアに導入し、テックリードにはClaude Codeを配布、業務効率化・実装スピード強化・精度向上を進めてきました。 そんな会社で、私はある新人エンジニアに対して「AIの使用を禁止する」という判断を下しました。 先日ちょっと話題になってましたね、こちらの彼の話です。 社内でも圧倒的なAI推進派の私がなぜそのような判断をしたのか。そして3ヶ月後、その新人はどう変わったのか。この記事では、私の目線からのある種答え合わせ的なつもりで経緯と結果をまとめてみました。 最初は「AIをどんどん使わせていた」 新人が入社した当初、私は彼にもCursorを使わせていました。なんならClaude Codeも使わせていました。理由はシンプルです。

リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。 ▼ 今回紹介する実装例一覧 サンプルを別ウインドウで開く 1. 横にアイコンが表示される サンプルを別ウインドウで開く コードを確認する ホバー時に、アイコンに指定しているCSSのscaleプロパティの値を0から1に変化させることで、拡大しながら現れるようにしています。初期状態でscale: 0に指定しておくことで、アイコンを非表示のように隠しておけます。 2. カーソルが変化する サンプルを別ウインドウで開く コードを確認する ホバー時に表示されるカーソルをオリジナル画像に変更しています。CSSを以下のように指定すると、カーソル位置やクリック範囲を細

(2022/4/28) フォローアップ記事となる、ジェイソンさんの記事の翻訳版を公開いたしました。 「HTML3.2のどこが「間違って」いるのか、そしてそれを見た目重視のクラスで再現するのがおかしいわけ」 先日投稿した「「阿部寛のホームページ」はHTML界のシーラカンスである」の続編として、MediumのHTML関連の記事でセマンティックではないHTML・CSS（特にTailwind CSS）に対し舌鋒鋭い批判をしていらっしゃるJason Knightさんに、英語版の記事を見ていただいた。しっかりコードを分析されているようで恐縮である。忌憚・忖度の無いセカンドオピニオン的知見としてご覧いただければ幸いである。 (2022/4/22) 上司から会社の名前を載せて書いているのに、表現が過激すぎるのではないかとお達しがあったため、表現をマイルドにして、原文を削除した。大変申し訳ありませんでした。

UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え

ほくほくデネブアルタイルベガ @dis_honest ヤリモクのいいねしかしません。　｜エンターテイメント／クリエイティブ（WEB制作・デザイン）伊野尾慧、アンゴラ村長、野呂佳代、スパイスカレー https://t.co/4pBXAykcxr ほっくん @dis_honest Twitterサ終で、個人サイトにもどるインターネット歴が長いアラサーたちへ。 <font>タグはもうありません。 <center>も<marquee>も廃止になりました。 <bgsound>はビックリするのでやめてください。 <table>でレイアウトする時代は終わりました。 CSSでやりましょう。 2022-11-18 16:42:34

この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に HTMLで構造化された文書に対してスタイルを与える「Cascading Style Sheet」（CSS）は「CSS 2」から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。 今回勧告になった「CSS Writing Modes Level 3」では、従来の横書きの左から右への記述（英語やヒンディ語など）、横書きの右から左への記述（ヘブライ語やアラビア語など）に加えて、日本語やモンゴル語などで使われるような縦書きなどを指定することができます。 また、縦書きでは、右から左への行送り（中国語、日本語、韓国語など）と、左から右への行送り（モンゴル語など）も指定可能。 これらは同一ページ上で混在でき、さらに双方向混在の記述における分離、字形の方向

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

All-in-one animation engine. A fast and versatile JavaScript library to animate the web.

エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla

ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=

Pure CSS Oil Painting - by Diana Smith aka cyanHarlow

ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。 これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き 動き出す前の傾きとバーの位置をtransformで調整をします。 こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;

今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプルをご紹介します。 ちなみに、レスポンシブ表示にも対応させています。 CSSのみでクリック開閉する3Dアニメーションメニュー このサンプルの最終的イメージがこちら。 デモ See the Pen 3D rotating hidden menu using only CSS by digistate (@digistate) on CodePen. HTML構造 メニューの開閉トリガーとなるinput, label要素 メニューが開閉するためのトリガーとなる右端にあるハンバーガーアイコンは、実際はlabel要素であり、ページ上は非表示にしているチェックボックス(input)要素

jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

Sass（※この記事ではSCSSを指します）やLESSといったCSSプリプロセッサがどんどんメジャー化しています。 しかし、私の実感としてまだまだ使っていない人も多いのではないか？と思っています。 導入が難しそう。書き方がわからない。CSS使えなくなってしまうの？ 色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません！ わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。 ※この記事では導入部やコンパイルの紹介はしません。 ※前提 Sassを書けば勝手にCSSをいい感じに書いてくれる！というものではありません。 まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。 どんな効率化ツールを使うときでも、根本となる基礎はきちんと理解しましょう。 (1).scssファイル内にCSSを書く まずはここか