Tmaeda13web Design Coding Operations Thrive

カテゴリー: sourcecode

CSS BEM コーディング

2024/10/8

CSS BEM コーディングとは、「Block, Element, Modifier」の略で、CSSクラス名の命名規則を指す手法の一つです。BEMは、コードの可読性を向上させ、CSSの構造を明確にし、大規模なプロジェクトやチーム開発において管理しやすくするために使われます。この方法は、再利用性が高く、コンポーネントベースの開発に非常に適しています。

BEMの3つの基本要素

  1. Block（ブロック）:
    • ページ内で独立して存在できる意味的に独立したコンポーネントです。ナビゲーションバー、ボタン、フォームなどが例です。
    • 例: nav, button, form
  2. Element（エレメント）:
    • ブロックの一部であり、ブロックと意味的に関連するものです。エレメントはブロックの一部として定義され、単独では意味を持ちません。
    • 例: button__icon, nav__item, form__input
  3. Modifier（モディファイア）:
    • ブロックやエレメントの外観や動作を変更するためのクラスです。たとえば、ボタンの色やサイズ、ナビゲーションバーの表示状態などを変更します。
    • 例: button--large, nav__item--active, form__input--error

BEMの命名規則

  • ブロック: block
  • エレメント: block__element
  • モディファイア: block--modifier または block__element--modifier

具体例

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Title</h2>
  </div>
  <div class="card__content">
    <p class="card__text">Some content here</p>
  </div>
  <button class="card__button card__button--primary">Click me</button>
</div>
  • card はブロック
  • card__header, card__title, card__content, card__button はエレメント
  • card__button--primary はモディファイア

まとめ

BEMは、このようにCSSクラスを構造化し、クラス名がその役割を説明するため、直感的で保守しやすいコードが書けるようになります。

Google Fonts の使い方

2024/06/24

Google Fontsを使うと、無料のウェブフォントを簡単にウェブサイトに組み込むことができます。
以下の手順でGoogle Fontsを使用する方法を説明します。

Google Fontsの使用方法

1. フォントの選択

  1. Google Fonts にアクセスします。
  2. フォント一覧から使用したいフォントを検索し、選択します。

2. フォントスタイルの選択

  1. フォントの詳細ページ で、フォントのスタイル（ウェイト、スタイルなど）を選択します。
  2. 右上の「Select this style」ボタンをクリックします。選択したスタイルが右側の「Selected family」に追加されます。

3. フォント埋め込みコードを取得

  1. 右側の「Selected family」 で「Embed」タブをクリックします。
  2. 「LINK」 または 「@IMPORT」 のコードが表示されます。これをHTMLまたはCSSにコピーして使用します。

4. HTMLまたはCSSにフォントを追加

HTMLに<link>タグを追加:

<head>セクションに埋め込みコードを追加します。

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

CSSにフォントを適用:

CSSファイルまたは<style>タグにフォントを適用するスタイルを追加します。

   body {
       font-family: 'Roboto', sans-serif;
   }

5. サンプルコード

以下にGoogle Fontsを使ったサンプルHTMLコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Sample</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Google Fontsを使用したサンプル</h1>
    <p>これはGoogle Fontsから読み込んだフォントを使ったサンプルです。</p>
</body>
</html>

詳細なガイド

まとめ

  • 選択: Google Fontsのサイトから使用したいフォントを選び、スタイルを選択します。
  • 埋め込みコード取得: linkタグや@importのコードを取得し、HTMLまたはCSSに追加します。
  • フォント適用: CSSでfont-familyを設定し、フォントを適用します。

注意点

  • フォント読み込み時間: 外部からフォントを読み込むため、ページの読み込み時間に影響を与える可能性があります。できるだけ軽量なフォントを選び、display=swapを使ってフォントの表示遅延を最小化します。
  • フォールバックフォント: フォントが読み込めなかった場合に備えて、フォールバックフォントを指定しておきます（例: sans-serif）。

この手順に従うことで、Google Fontsを簡単にウェブサイトに組み込むことができます。フォントの選定により、ウェブサイトのデザインや可読性を大幅に向上させることができます。

Adobe Fonts の使い方

2024/06/24

Adobe Web Fontsの使用方法について説明します。
Adobe Web Fontsを使うと、Adobeのフォントライブラリ「Adobe Fonts」（旧「Typekit」）からウェブサイトにフォントを簡単に追加できます。

Adobe Fontsの使用方法

以下のステップに従って、Adobe Fontsをウェブサイトに追加しましょう。

1. Adobe Fontsアカウントの作成

  1. Adobe Fonts にアクセスします。
  2. Adobe ID でサインインするか、アカウントを作成します。

2. フォントの選択とプロジェクトへの追加

  1. フォントを検索: Adobe Fontsのウェブサイトで好きなフォントを検索します。
  2. プロジェクトに追加:
  • フォントの詳細ページに行き、「Web Projectに追加」をクリックします。
  • 新しいプロジェクトを作成するか、既存のプロジェクトを選択してフォントを追加します。

3. プロジェクトのカスタマイズ

  1. プロジェクトの設定:
  • フォントスタイル、ウェイト、文字セットを選択できます。
  • 選択後、「Publish（公開）」ボタンを押して設定を反映させます。
  1. フォント埋め込みコードを取得:
  • プロジェクトの詳細ページで、<link>タグと@importステートメントの埋め込みコードが表示されます。これをHTMLファイルまたはCSSファイルにコピーします。

4. HTMLまたはCSSにフォントを追加

  1. HTMLに<link>タグを追加:
  • <head>セクションに埋め込みコードを追加します。
   <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

xxxxxxx はあなたのプロジェクトの固有のコードです。

  1. CSSにフォントを適用:
  • CSSファイルまたは<style>タグにフォントを適用するスタイルを追加します。
   body {
       font-family: "フォント名", sans-serif;
   }

例えば、Adobe Fontsのプロジェクトで「Source Sans Pro」を選んだ場合：

   body {
       font-family: "Source Sans Pro", sans-serif;
   }

5. サンプルコード

以下にAdobe Fontsを使ったサンプルHTMLコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adobe Fonts Sample</title>
    <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
    <style>
        body {
            font-family: "Source Sans Pro", sans-serif;
        }
    </style>
</head>
<body>
    <h1>Adobe Fontsを使用したサンプル</h1>
    <p>これはAdobe Fontsから読み込んだフォントを使ったサンプルです。</p>
</body>
</html>

詳細なガイド

Adobe Fontsのウェブサイトにはさらに詳細なガイドとヘルプが用意されています。必要に応じて以下のリンクを参照してください：

注意点

  • ライセンス: Adobe Fontsは商用使用も可能ですが、Adobeのサブスクリプションが必要です。ライセンスの詳細はAdobeの公式サイトで確認してください。
  • パフォーマンス: フォントの読み込みには時間がかかることがあります。ウェブフォントの使用がページの読み込み時間に与える影響を考慮して、適切にキャッシュ設定を行うなどの対策を検討しましょう。

これで、Adobe Fontsを使用してウェブサイトにフォントを追加できます。フォントの選定やプロジェクト設定は非常に柔軟で、簡単にウェブサイトに個性を持たせることができます。