EGUWEB

スキルアップを、ここから。

【CSS】画像を画面幅いっぱいに表示させるCSSテクニック

Webサイトやブログのデザインにおいて、画像を画面幅いっぱいに表示させることで視覚的なインパクトを強めることができます。最も基本的な方法は、CSSのwidthプロパティを使用することです。

画像を画面幅いっぱいに表示する基本的な方法
img {
  width: 100%;
  height: auto;
}


このシンプルなコードは、画像を親要素の幅いっぱいに広げます。heightをautoに設定することで、画像の縦横比が自動的に維持されるため、画像が歪むことがありません。

特定の画像だけを画面幅いっぱいにしたい場合は、クラスを使って指定するとより効果的です。

.full-width-image {
  width: 100%;
  height: auto;
}

 


ビューポート単位を活用した方法
より正確に画面幅いっぱいに表示させたい場合は、ビューポート単位（vw）を使用する方法が効果的です。

.viewport-width-image {
  width: 100vw;
  height: auto;
}

 

vw（viewport width）単位は表示画面の幅に対する割合を表し、100vwは画面幅の100%を意味します。

この方法を使用すると、親要素の幅に関係なく、ブラウザウィンドウの幅いっぱいに画像を表示することができます。

 

画像の最適化と最大幅の制限
高解像度の画像を扱う場合、単純に幅を100%にすると、必要以上に拡大されてしまうことがあります。そのような場合は、max-widthプロパティを使用すると効果的です。

img {
  max-width: 100%;
  height: auto;
}

 

このコードは画像が元のサイズより大きくならないようにしながら、必要に応じて縮小します。これにより画質の劣化を防ぎつつ、レスポンシブな表示を実現できます。

コンテナからのはみ出し対策
Webサイトが固定幅のコンテナ内にある場合でも、画像だけを画面幅いっぱいに表示させたいことがあります。このような場合は、負のマージンを活用する方法が効果的です。

.breakout-image {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

 

このテクニックは、画像を親コンテナから「脱出」させ、画面幅いっぱいに表示させるものです。画像を中央に配置したまま、両側に均等に広げることができます。

object-fitプロパティの活用
高さと幅の両方を指定したい場合は、object-fitプロパティが非常に役立ちます。

.cover-image {
  width: 100%;
  height: 50vh; /* 画面高さの50%に設定 */
  object-fit: cover;
}

 

object-fit: coverを使用すると、指定したサイズの範囲内で画像を拡大・縮小しながら、縦横比を維持したまま領域を埋めることができます。これはヒーローイメージやバナーに最適です。

モバイル対応のための追加テクニック
モバイルデバイスでは、画面幅いっぱいの画像が表示領域を圧迫することがあります。メディアクエリを使用して、デバイスサイズに応じたスタイルを適用すると良いでしょう。

.responsive-full-width {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .responsive-full-width {
    width: 95%;
    margin: 0 auto;
  }
}

 

このコードは、小さい画面サイズになった場合に画像の幅を少し狭め、両側に余白を作ることで読みやすさを向上させます。

パフォーマンス最適化のポイント
画面幅いっぱいの大きな画像はページの読み込み速度に影響を与える可能性があります。次のポイントを意識することでパフォーマンスを最適化できます。

画像の圧縮を行い、ファイルサイズを最小限に抑えましょう。WebP形式の採用も検討してください。

srcset属性を使用して、デバイスの解像度に応じた適切なサイズの画像を提供することも効果的です。

<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 600w, image-medium.jpg 1200w, image-large.jpg 2000w" 
  sizes="100vw" 
  alt="画面幅いっぱいの画像"
  class="full-width-image"
>

 

遅延読み込み（lazy loading）を実装して、画面に表示される直前まで画像の読み込みを遅らせることで、初期表示の速度を向上させることができます。

 

まとめ

画像を画面幅いっぱいに表示させるためのCSSテクニックには様々な方法があります。基本的な100%指定から、ビューポート単位の活用、object-fitプロパティの使用まで、目的や状況に応じて最適な方法を選択することが大切です。

さらに、レスポンシブ対応やパフォーマンス最適化も考慮することで、あらゆるデバイスで美しく効果的な全幅画像を実現できるでしょう。これらのテクニックを活用して、より視覚的にインパクトのあるウェブサイトやブログを作成してください。

 

eguweb.jp

 

 

 

WordPressのファイル概念・アーキテクチャについて

 

WordPressのファイル構造とアーキテクチャは、効率的な開発と管理を可能にする設計になっています。以下に詳細を説明します。

コアの構造

WordPressの基本的なディレクトリ構造は以下の通りです。この構造により、コアファイル、テーマ、プラグイン、そしてユーザーコンテンツが明確に分離されています。

wordpress/
├── wp-admin/         # 管理画面関連のファイル
├── wp-content/       # テーマ、プラグイン、アップロードファイル
│   ├── themes/       # テーマファイル
│   ├── plugins/      # プラグインファイル
│   └── uploads/      # アップロードされたメディアファイル
├── wp-includes/      # コアのPHPライブラリファイル
└── wp-config.php     # 設定ファイル

この構造により、開発者はコアファイルに触れることなく、テーマやプラグインを通じてサイトをカスタマイズできます。

主要なコンポーネント

WordPressの主要なコンポーネントは、テーマシステム、プラグインシステム、そしてデータベース構造に分けられます。これらが連携することで、柔軟性の高いコンテンツ管理システムを実現しています。

主要なコンポーネント・ファイルは以下のように分かれます。

テーマシステム

テーマシステムは、サイトの見た目と機能を定義する重要な部分です。主要ファイルには以下があります。

  • 主要ファイル:
    • functions.php: テーマの機能を定義
    • index.php: メインテンプレート
    • header.php, footer.php: 共通パーツ
    • single.php: 個別投稿ページ
    • archive.php: アーカイブページ

これらのファイルを適切に使用することで、一貫性のあるデザインと機能を実現できます。

プラグインシステム

プラグインシステムは、WordPressの機能を拡張するための仕組みです。

主な特徴：

これにより、コアファイルを変更することなく、サイトに新しい機能を追加できます。

データベース構造

WordPressのデータベースは、以下の主要なテーブルで構成されています。

主要なテーブル：

  • wp_posts: 投稿、ページ、カスタム投稿タイプ
  • wp_users: ユーザー情報
  • wp_options: サイト設定
  • wp_terms: カテゴリー、タグ
  • wp_postmeta: カスタムフィールド

この構造により、コンテンツとメタデータを効率的に管理できます。

主要な処理フロー

WordPressの処理フローは、リクエストの受信からコンテンツの表示まで、一連の手順を経て行われます。

リクエスト処理の流れ

  • index.php → wp-blog-header.php → wp-load.php → wp-config.php

この流れにより、必要なファイルが順番に読み込まれ、適切な処理が行われます。

テンプレート階層

WordPressは以下の順序でテンプレートを探します：

  1. single-{post-type}-{slug}.php
  2. single-{post-type}.php
  3. single.php
  4. index.php

この階層構造により、特定のコンテンツタイプに対して柔軟なテンプレート設定が可能になります。

重要なAPI

WordPressには、開発を効率化するための多くのAPIが用意されています。

Query API

Query APIは、データベースからコンテンツを取得するための主要な方法です。

主要関数には以下があります。

  • 主要関数:
    • WP_Query
    • get_posts()
    • query_posts()

プラグインAPI

プラグインAPIは、WordPressの機能を拡張するための主要な手段です。

  • アクションフック:
    • add_action() / do_action()
  • フィルターフック:
    • add_filter() / apply_filters()

これらのフックを使用することで、WordPressの動作をカスタマイズできます。

オプションAPI

  • オプション操作:
    • get_option(), update_option(), add_option()

これらの関数を使用することで、サイトの設定を効率的に管理できます。

5. セキュリティ機能

  • 認証システムとユーザーロール管理
  • セキュリティトークン（Nonce）
  • サニタイズ/エスケープ関数:
    • sanitize_text_field(), esc_html(), esc_url()

6. 開発のベストプラクティス

  1. コーディング規約:
    • PSR準拠やWordPress固有の規約に従う。
  2. デバッグ:
    • 定数:
      • WP_DEBUG（デバッグモード）
      • WP_DEBUG_LOG（ログ出力）
      • WP_DEBUG_DISPLAY（エラー表示）

これらの機能を活用することで、問題の早期発見と解決が可能になります。

 

 

eguweb.jp

【WordPress】テキストにリンクを設定する方法

WordPressでテキストにリンクを設定する方法です。

目次

  1. 基本的な手順

  2. 詳細設定

  3. リンクの編集・削除

  4. ページ内リンク（アンカーリンク）の設定

  5. まとめ

基本的な手順

  1. リンクを設定したいテキストを選択します。

  2. ツールバーにある「リンク」ボタン（チェーンのアイコン）をクリックします。

  3. 表示されたボックスにリンク先のURLを入力します。

  4. 「適用」ボタンをクリックして設定を完了します。

画像

画像

詳細設定

  • リンクを新しいタブで開きたい場合は、「リンク設定」（歯車アイコン）をクリックし、「リンクを新しいタブで開く」にチェックを入れます。

  • リンクのテキスト（アンカーテキスト）を変更したい場合は、「リンク設定」から「リンク文字列」を編集します。

リンクの編集・削除

  • 既存のリンクを編集するには、リンクされたテキストをクリックし、表示される編集メニューから「編集」を選択します。

  • リンクを削除するには、同じく編集メニューから「リンクの削除」を選択します。

ページ内リンク（アンカーリンク）の設定

  1. リンク先となるブロック（見出しなど）を選択し、右側パネルの「高度な設定」からHTMLアンカーにIDを設定します。

  2. リンクを設置したい箇所で、「#」に続けて設定したIDを入力します（例：#section1）。

eguweb.jp

【PremierePro】謹賀新年（年始）ごあいさつ動画を作る（ソーシャルメディアサイズ）

あけましておめでとうございます。
本年も宜しくお願いいたします。

 

 

チャンネル登録はこちら
https://eguweb.jp/youtube

--
BGM
氷ノ河 written by TOGA
https://dova-s.jp/bgm/play8437.html

【CSS】flexboxレイアウトを使用して要素を右側に配置する方法

目次

  1. flexboxを使って要素を右寄せする方法

  2. 基本的なHTML構造

  3. CSSでflexboxを適用する

  4. 結果と解説

  5. 追加のスタイリング

  6. レスポンシブデザインへの対応

  7. まとめ

 

flexboxを使って要素を右寄せする方法

ウェブデザインにおいて、要素を特定の位置に配置することは重要です。

今回は、flexboxを使って要素を右側に配置する方法を詳しく解説します。

基本的なHTML構造

まず、以下のようなHTML構造を想定しましょう。

<div class="container">
  <select id="sortOrder">
    <option value="desc">最新順</option>
    <option value="asc">古い順</option>
  </select>
</div>


画像

 






CSSでflexboxを適用する


この構造に対して、以下のようなCSSを適用します。


.container {
  display: flex;
  justify-content: flex-end;
}




このCSSの各プロパティの役割は以下の通りです。


    

  • 

    display: flex;: コンテナをflexコンテナにします。
    

    • 

  • 

    justify-content: flex-end;: 主軸（横方向）で要素を右端に配置します。
    

    • 



 


 


結果と解説


このようにスタイルを適用すると、select要素がコンテナの右側に配置されます。


画像

 




合は要素）が主軸の終端（右側）に寄せられます。


追加のスタイリング


さらに見た目を整えるために、以下のようなスタイルを追加することもできます：


#sortOrder {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
}




これにより、セレクトボックスがより洗練された外観になります。


レスポンシブデザインへの対応


この場合、レスポンシブ対応は比較的簡単です。コンテナの幅を調整するだけで、セレクトボックスの位置が自動的に調整されます。必要に応じて以下のようなメディアクエリを追加することもできます。


@media (max-width: 600px) {
  .container {
    padding: 0 10px;
  }
  
  #sortOrder {
    width: 100%;
  }
}




この設定により、画面幅が600px以下になった場合、セレクトボックスが画面幅いっぱいに広がり、左右に少しパディングが追加されます。


 


eguweb.jp

    
    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  【WordPress】プラグインを使わずにWordPressの親ブロック全体にリンクを設定する



  
  


  

  




    


    

  
    


 


今回は、プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方法を考えてみます。




    

  1. グループブロックを活用する方法
    2. 

  2. カスタムCSSを使用する方法
    3. 

  3. ボタンブロックを活用する方法
    4. 

  4. まとめ
    5. 



グループブロックを活用する方法


まず、グループブロックを使用する方法です。


    

  1. 複数のブロックをグループ化します。
    2. 

  2. グループブロックを選択し、カスタムHTMLブロックに変換します。
    3. 

  3. 以下のようなHTMLコードを入力します：
    4. 



<a href="リンク先URL">
  <!-- ここにグループ化したブロックの内容を貼り付け -->
</a>


この方法では、グループ全体がクリック可能なリンクになります。






ただし、元のブロックの編集がやや難しくなる点に注意が必要です。


カスタムCSSを使用する方法


次に、カスタムCSSを使用する方法です。


    

  1. 親ブロックにカスタムCSSクラスを追加します（例：「linkable-block」）。
    2. 

  2. テーマのカスタムCSS欄に以下のようなコードを追加します：
    3. 







.linkable-block {
  position: relative;
}

.linkable-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


    

  1. JavaScriptを使用して、クリックイベントを設定します。
    2. 



document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.location.href = 'リンク先URL';
  });
});


別タブで開く場合は、以下のようにwindow.open()メソッドを使用し、第2引数に’_blank’を指定します。


document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.open('リンク先URL', '_blank');
  });
});


 


この方法では、ブロックの編集性を保ちながら、全体をクリック可能にできます。




ボタンブロックを活用する方法


最後に、ボタンブロックを巧みに使う方法をご紹介します。


    

  1. 親ブロックの下部にボタンブロックを配置します。
    2. 

  2. ボタンのスタイルを以下のようにカスタマイズします：

      

    • 幅を100%に設定
      • 

    • 高さを親ブロックと同じに設定
      • 

    • 背景色を透明に設定
      • 

    • ボーダーを削除
      • 

    • パディングを0に設定
      • 

    

    3. 

  3. ボタンの位置を絶対位置指定で親ブロックの上に重ねます。
    4. 



 




CSSの例：


.parent-block {
  position: relative;
  /* 親ブロックの他のスタイル */
}

.parent-content {
  /* 親ブロックの内容のスタイル */
}

.button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}

.button-overlay:hover {
  /* ホバー時のスタイル（オプション） */
  background-color: rgba(0, 0, 0, 0.1);
}




この方法では、見た目上は親ブロック全体がリンクのように機能しますが、実際にはボタンがクリック可能な領域となります。




 







 




 

    
    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  【GAS】Googleスプレッドシートのデータを使ってHTMLメールを送信する方法



  
  


  

  




    


    

  
    


Googleスプレッドシートのデータを活用して、HTMLメールを作成し送信する方法をご紹介します。この方法を使えば、スプレッドシートの情報を基に、見栄えの良いメールを簡単に送ることができます。



はじめに


 


Google Apps Scriptを使えば、スプレッドシートのデータを基にHTMLメールを作成し、送信することができます。


今回は、週報などの報告をHTMLメールで送信する例を使って、その方法を詳しく解説していきます。


準備：スプレッドシートの作成


まずは、週報のデータを入力するスプレッドシートを作成しましょう。例えば、以下のような形式でデータを入力します：








A列（件名）
B列（名前）
C列（今週の成果）
D列（来週の目標）






週報（9/18-9/22）
山田太郎
プロジェクトAの完了
新規顧客獲得3件










Google Apps Scriptの作成


次に、Google Apps Scriptを作成します。


    

  1. スプレッドシートのメニューから「ツール」→「スクリプトエディタ」を選択します。
    2. 

  2. 新しいスクリプトファイルが開きます。ここに以下のようなコードを入力します。
    3. 



javascriptfunction sendWeeklyReportEmail() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var subject = sheet.getRange("A2").getValue();
  var name = sheet.getRange("B2").getValue();
  var achievements = sheet.getRange("C2").getValue();
  var goals = sheet.getRange("D2").getValue();
  
  var htmlBody = `
    <html>
      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
        <h1 style="color: #4A86E8;">週間レポート</h1>
        <p>こんにちは、${name}さん</p>
        <h2 style="color: #6AA84F;">今週の成果</h2>
        <p>${achievements}</p>
        <h2 style="color: #E69138;">来週の目標</h2>
        <p>${goals}</p>
        <p>今週もお疲れ様でした。来週も頑張りましょう！</p>
      </body>
    </html>
  `;
  
  MailApp.sendEmail({
    to: "boss@example.com",
    subject: subject,
    htmlBody: htmlBody
  });
}



コードの解説








このスクリプトは以下のような流れで動作します。


    

  1. アクティブなシートを取得します。
    2. 

  2. A2、B2、C2、D2セルからそれぞれ件名、名前、今週の成果、来週の目標を取得します。
    3. 

  3. 取得したデータを使って、HTMLメールの本文を作成します。
    4. 

  4. MailApp.sendEmail() メソッドを使って、作成したHTMLメールを送信します。
    5. 



HTMLメールの本文では、見やすさを考慮して以下のような工夫をしています。


    

  • <h1>、<h2> タグを使って、見出しを設定しています。
    • 

  • インラインCSSを使って、フォントやカラーを指定しています。
    • 

  • テンプレートリテラル（バッククォートで囲まれた部分）を使用して、動的にデータを挿入しています。
    • 



スクリプトの実行方法


スクリプトを実行するには、以下の手順を踏んでください。


    

  1. スクリプトエディタの「実行」ボタンをクリックします。
    2. 

  2. 初回実行時は、認証を求められます。画面の指示に従って、必要な権限を許可してください。
    3. 

  3. 実行が完了すると、指定したメールアドレス（この例では “boss@example.com”）にHTMLメールが送信されます。
    4. 







メールが送信されました。


eguweb.jp

    
    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  【WordPress】要素がふわっと現れるアニメーションの作り方



  
  


  

  




    


    

  
    


今回は、ウェブページにスクロールトリガーのアニメーション効果を追加する方法について、詳しく解説します。特に、ページをスクロールすると要素が下から滑らかに現れる効果の実装方法を、説明していきます。


目次


    

  1. 

    CSSでアニメーションの基礎を設定
    

    2. 

  2. 

    JavaScriptでスクロールトリガーを実装
    

    3. 

  3. 

    実装の結果
    

    4. 

  4. 

    まとめ
    

    5. 



 


 


CSSでアニメーションの基礎を設定


まず、CSSを使ってアニメーションの基本的な動作を定義します。


.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}




このCSSの各プロパティについて詳しく見ていきましょう。


    

  1. 

    .fade-up クラス：
    

      

    • 

      opacity: 0;: 要素の不透明度を0に設定し、完全に透明にします。
      

      • 

    • 

      transform: translateY(20px);: 要素をY軸方向（縦方向）に20ピクセル下に移動させます。
      

      • 

    • 

      transition: opacity 0.5s ease, transform 0.5s ease;: opacityとtransformプロパティの変化を0.5秒かけて行い、イージング関数としてeaseを使用します。これにより、滑らかな変化が実現されます。
      

      • 

    

    2. 

  2. 

    .fade-up.is-visible クラス：
    

      

    • 

      opacity: 1;: 要素の不透明度を1に設定し、完全に不透明にします。
      

      • 

    • 

      transform: translateY(0);: 要素を元の位置（Y軸方向に0ピクセル）に戻します。
      

      • 

    

    3. 



この設定により、.fade-up クラスを持つ要素は初期状態で透明かつ少し下にずれた位置にあり、.is-visible クラスが追加されると不透明になって元の位置に移動します。


JavaScriptでスクロールトリガーを実装


次に、JavaScriptを使用してスクロールイベントを検知し、要素が画面内に入ったタイミングでアニメーションを開始させます。


const fadeUpElements = document.querySelectorAll('.fade-up');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});

fadeUpElements.forEach(element => {
  observer.observe(element);
});


 


このJavaScriptコードの各部分を詳細に解説します：


    

  1. 

    const fadeUpElements = document.querySelectorAll('.fade-up');
    

      

    • 

      document.querySelectorAll() メソッドを使用して、ページ内の全ての .fade-up クラスを持つ要素を選択し、fadeUpElements 定数に格納します。
      

      • 

    

    2. 

  2. 

    const observer = new IntersectionObserver((entries) => { ... });
    

      

    • 

      IntersectionObserver APIを使用して新しいオブザーバーを作成します。このAPIは、指定された要素が画面内に入ったかどうかを監視します。
      

      • 

    

    3. 

  3. 

    entries.forEach(entry => { ... });
    

      

    • 

      オブザーバーが監視している全ての要素（entries）に対して処理を実行します。
      

      • 

    

    4. 

  4. 

    if (entry.isIntersecting) { ... }
    

      

    • 

      isIntersecting プロパティをチェックし、要素が画面内に入ったかどうかを判定します。
      

      • 

    

    5. 

  5. 

    entry.target.classList.add('is-visible');
    

      

    • 

      要素が画面内に入った場合、その要素（entry.target）に is-visible クラスを追加します。これにより、CSSで定義したアニメーションが開始されます。
      

      • 

    

    6. 

  6. 

    fadeUpElements.forEach(element => { observer.observe(element); });
    

      

    • 

      全ての .fade-up 要素に対してオブザーバーを設定します。これにより、各要素が個別に監視され、画面内に入ったタイミングでアニメーションが開始されます。
      

      • 

    

    7. 



 


実装の結果


この実装により、以下のような動作が実現されます。


    

  1. 

    初期状態では、.fade-up クラスを持つ要素は不透明度0で、通常の位置より20ピクセル下に配置されています。
    

    2. 

  2. 

    ユーザーがページをスクロールし、該当要素が画面内に入ると、IntersectionObserverがそれを検知します。
    

    3. 

  3. 

    検知されると即座に .is-visible クラスが追加されます。
    

    4. 

  4. 

    CSSのtransitionプロパティにより、0.5秒かけて要素が徐々に不透明になり、同時に上方向に20ピクセル移動します。
    

    5. 



この手法を使用することで、ページスクロールに連動した滑らかな要素の出現エフェクトを実現できます。




 


【WordPress】要素がふわっと現れるアニメーションの作り方 | eguweb(エグウェブ)

    
    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  【Notion】Notionを使って年間スケジュールを作る



  
  


  

  




    


    

  
    


 


Notionを使って年間スケジュールを作る方法をご紹介します。仕事やプライベートでも便利ですので、ぜひご参考ください。


目次


    

  1. 

    カレンダーの作成
    

    2. 

  2. 

    年間スケジュールの設定
    

    3. 

  3. 

    年間スケジュールの設定
    

    4. 

  4. 

    タスク管理の統合（活用例）
    

    5. 

  5. 

    ビューのカスタマイズ（活用例）
    

    6. 

  6. 

    活用のコツ
    

    7. 

  7. 

    まとめ
    

    8. 



 


カレンダーの作成


    

  1. 

    Notionの左側メニューで「ページを追加」をクリックします。
    

    2. 

  2. 

    新しいページの名前を「年間スケジュール」などと入力します。
    

    3. 

  3. 

    ページ内で「/タイムライン」や「/data」といった内容で入力し、タイムラインビューを選択します。
    

    4. 





画像

 






画像

 




これで基本的なベースが完成します。


 


 


 


年間スケジュールの設定




画像

 






年間スケジュールの設定


    

  1. 

    タイムラインビューの設定で、表示期間を1年に変更します。
    

    2. 

  2. 

    必要に応じて、以下のようなプロパティを追加します:
    

      

    • 

      タイトル
      

      • 

    • 

      開始日
      

      • 

    • 

      終了日
      

      • 

    • 

      カテゴリー（セレクト型）
      

      • 

    • 

      進捗状況（セレクト型）
      

      • 

    • 

      メモ
      

      • 

    

    3. 

  3. 

    タイムライン上で予定を入力していきます。クリックして新しい予定を追加できます。
    

    4. 







画像

 








基本的に、タイトル・日付・終了日、を入れておくと、ガントチャートのような状態でスケジュールが表示されます。




画像

 






画像

 




タスク管理の統合（活用例）


    

  1. 

    年間スケジュールとは別に、日々のタスクを管理するデータベースを作成します。
    

    2. 

  2. 

    タスクデータベースに以下のプロパティを追加します:
    

      

    • 

      タイトル
      

      • 

    • 

      日付
      

      • 

    • 

      進捗状況（ToDo, Done など）
      

      • 

    • 

      関連する年間目標（リレーション型）
      

      • 

    

    3. 

  3. 

    年間スケジュールの各予定に、関連するタスクをリンクさせることで、大きな目標と日々のタスクを紐付けることができます。
    

    4. 



ビューのカスタマイズ（活用例）


    

  1. 

    カレンダービューの他に、タイムラインビューやガントチャートビューを追加すると、長期的な計画が視覚的に把握しやすくなります。
    

    2. 

  2. 

    フィルターやソート機能を使って、特定のカテゴリーや期間の予定だけを表示することもできます。
    

    3. 





画像

 






活用のコツ


    

  • 

    毎日または毎週、スケジュールを確認し、必要に応じて調整します。
    

    • 

  • 

    年間目標と月間・週間の計画を連携させることで、より効果的なスケジュール管理が可能になります。
    

    • 

  • 

    Googleカレンダーと連携させることで、外部のスケジュールとも統合できます。
    

    •