BLUE B NOSE

月額定額制Webサイト制作サービス、BLUE B NOSEの運営スタッフです。 サービ…

BLUE B NOSE

月額定額制Webサイト制作サービス、BLUE B NOSEの運営スタッフです。 サービスの詳細はHP、その他SNSをご覧ください。 https://bbns.jp

CSS設計は、スタイルと構造の分離から

SNSで「Web制作」を検索してみると、チラホラ目につくのがCSS設計や命名規則のお悩み。「イケている」とされるWebサイトの誰かが書いたコードを写してみたり、知らなかったプロパティやコードを検索して学ぶことはあっても、体系的に学ぶのも簡単ではないCSSですが、この辺りで筆者の学び方や考え方を整理してみましょう。 現在の設計思想は、変則的なBEM + ユーティリティファースト過去に何度も触れているように、『Every Layout』の影響を強く受けつつ、我流解釈のBEMに、

BLUE B NOSE

    • CSS Color-mix Tips ~2024 spring~

      先日4月1日に配信したSubstackの記事の中で 新しい色空間や、Color-mix関数について簡単に取り上げましたが、Color-mix関数についてはまだまだご紹介できそうなテクニック、小ネタがいくつかありますので、2024年春のTipsとして改めてまとめてみましょう。我々の細やかな知見が、少しでも役に立てば良いのですが.....。 そもそも、Color-mix関数って？近年使えるようになったColor-mix関数ですが、まずは定義やサポート状況を確認してみましょう。

      BLUE B NOSE

      • Vite+Dart Sass+Vanilla JSな開発環境について

        オウンドメディアの方では、BLUE B NOSE（以下:BBN）で使用しているWordPressテーマについてザックリと解説したので、こちらではそこで用いるCSSやJS、画像を生成するための開発環境、ボイラープレートについても簡単に触れてみましょう。最新、最先端とは言い難い知見ですが、何かのお役に立てば幸いです。 詳細は、リポジトリへBBNのサンプル事例ページからもリンクさせていますが、例えば「BX-00」で用いているCSSやJSを生成するための開発環境は、こちら（http

        BLUE B NOSE

        • CSS比較関数を用いたレスポンシブについて

          近年主要なブラウザでサポートされるようになり、気軽に使えるようになったCSS比較関数、clamp()、min()、max()ですが、有効活用できていますか？ BLUE B NOSE(以下:BBN）では推奨とされていなさそうな使い方も含めて積極的に採用し、少しずつ知見を蓄積しています。筆者は『EVERY LAYOUT』に感化されて使い始めたCSS比較関数と、同関数を用いたレスポンシブについて、簡単にご紹介します。 黒船だった、『EVERY LAYOUT』筆者は別の記事 でも

          BLUE B NOSE

        CSS設計は、スタイルと構造の分離から

        BLUE B NOSE

          Usability is Pawn.

          BLUE B NOSE（以下:BBN）は「速くてリッチ」を掲げているけど、速いことってそんなに大事？ 一般のユーザー様、クライアント様のみならず、同業他社との情報交換でも言われることが多々あります。ビジネスのツールとして、役割を果たす、仕事をするという意味合いも込めた広義のパフォーマンスを高める意義はよく分かるけど、別に速くなくてもいいんじゃない、と。 BBNがなぜ高速表示や、PageSpeed Insightsの各項目でハイスコア獲得を目指すのか、そこに注力するのか。ユーザ

          BLUE B NOSE

          Usability is Pawn.

          BLUE B NOSE

          BLUE B NOSE流 SEOスターターガイドの受け取り方

          2024年2月2日、GoogleがSEOスターターガイドを刷新したとアナウンスしましたね。こちらが変更ポイントのサマリー（※英語版） 本体（※英語版）はこちら 日本語のスターターガイドはまだ古いバージョンらしいので、どうしても新しいものを読みたい場合は、今なら機械翻訳の精度もそれなりに高いので、英語を適度な分量でコピペしていけば、概要は掴めるでしょう。 今回は刷新されたガイドも踏まえつつ、「結局SEOって何だっけ？」に対して、BLUE B NOSE（以下:BBN）なりの解

          BLUE B NOSE

          BLUE B NOSE流 SEOスターターガイドの受け取り方

          BLUE B NOSE

          Contextは女王の叡智

          SEOの世界でよく耳にする表現、"Contents is King."。Webマーケティングに携わる人なら、その意味合いは何となく分かるでしょう。ただ、たまに耳にされることがあるかもしれない"Context is Queen."については、しっかり把握されている方は少ないのでは、という印象です。 「コンテキストは女王」で検索してみても、しっかり解説された記事はあまり見当たらない気がするので、今回はコンテキストについて、またなぜ「女王」なのかについて、独自の見解も交えて出来る

          BLUE B NOSE

          Contextは女王の叡智

          BLUE B NOSE

          Every Layout × デジタル庁の汎用性が高い件

          ノーコードツールや自動化ツール、SassやPugといったメタ言語に、grantやgulpから発展してきたタスクランナーなど、Webサイト制作、より正確に言えばHTMLやCSS（+Javascript）の構築、コーディング環境はお手頃になってきましたが、だからこそ、先々を考えて構築することが難しくなってきました。 BEMやOOCSS、アトミックデザインといったCSS設計、ダークモードも踏まえた配色、カラーマネジメント、更にはAMPやレイアウトシフト等も含んだパフォーマンス、複

          BLUE B NOSE

          Every Layout × デジタル庁の汎用性が高い件

          BLUE B NOSE