あなたは幸せを感じてますか？ 嫌われる勇気から学ぶ幸せになるためのメソッドです。 読んだけどよくわからなかった方や幸せになりたい方、要約したので見てみてください。
Teatree LIFEは楽しく豊かな人生を送るために必要な小技をたくさん盛り込んだ情報サイトです。 お金が貯まらないとか人間関係がうまくいっていないという方は必見です！ 実は人が悩んでいることの9割は偉人たちが解決済みなのです。
【本の要約】『精神科医が見つけた 3つの幸福』アドラーの「嫌われる勇気」の科学的な観点は？
あなたは幸せを感じてますか？ 嫌われる勇気から学ぶ幸せになるためのメソッドです。 読んだけどよくわからなかった方や幸せになりたい方、要約したので見てみてください。
【投資】歴10年の投資家が教える初心者が失敗しない資産運用の極意とは
投資をしてみたいけど怖いという方や資産運用を始めようと思っている方。 まずは投資のやり方や意義を確認してみてください。 資産を運用することは人生の命題でもあります。まずは基礎から始めましょう。
キャッシュレス生活って？ みなさん財布の中には何が入っているでしょうか？ もちろん紙幣に小銭,クレジットカード
ボディビルダーの減量メソッド ボディービルダーには増量期と減量期ががありこの減量期にやる行動は万人が痩せること
4種類の口座とは？ 真っ先に思い浮かべる銀行口座 我々が口座と聞いて真っ先に思い浮かべるのは銀行口座でしょう。
【ワーキングホリデーとは？】海外で暮らすためのビザの取得方法
海外で暮らすにはどうすればいいか 海外旅行とVISA まずはじめに、この方法は18歳以上30歳以下の日本国籍の
【ワーキングホリデーとは？】海外で暮らすためのビザの取得方法
海外で暮らすにはどうすればいいか 海外旅行とVISA まずはじめに、この方法は18歳以上30歳以下の日本国籍の
【メリット多数】成功するための筋トレ術。起業家や投資家はなぜ筋トレをするのか？
筋トレを始めたいがしっかり目的をはっきり目的をはっきりさせたくないですか？ 本記事は筋トレをはじめる動機づけのために筋トレで得ることができる効果を網羅的に書いてあります。 しっかりと目的を持つことで筋トレを習慣化できるようにしましょう。
【携帯代を安くしたい方必見】手間なく簡単に月3000円にする方法
携帯代を月3000円にする方法 毎月の携帯代が月1万円を超えるという方も多いのではないでしょうか？ 生活を少し
【携帯代を安くしたい方必見】手間なく簡単に月3000円にする方法
携帯代を月3000円にする方法 毎月の携帯代が月1万円を超えるという方も多いのではないでしょうか？ 生活を少し
楽天カードのことなら知ってるよと思う方も多いですが実は楽天カードには街や楽天市場以外にも様々な優待があります。 一つくらい知らなかったというものがあると思います。 これから作る人は前情報として、もう持っている人は今まで知らなかった楽天カードの真の力を開放していきましょう。
Intersection Observerで監視対象を増やす方法
監視対象となる要素を増やすためにコードを変えていきます。 要素の設置 コードの改変 要素の設置 ・前回は監視を
【本の要約】『バビロンの大富豪』大富豪が教えるお金持ちになるための黄金の7つ道具
【名著】バビロンの大富豪の教えについて要約し、その意味や真意いついて考えた記事です。 お金持ちの人はどういった考え方をしているのかがわかる内容です。 あなた自身もお金持ちになるための黄金の7つ道具まとめました。
【本の要約】『嫌われる勇気（アドラー心理学）』今をより充実させる成功法則
アドラー心理学を一躍有名にした名著『嫌われる勇気』を深堀りし解説したブログです。 心理学初心者でも意味が理解しやすいようになるべく専門用語を使わず解説してあります。 理解しやすいなっておりますのでご一読ください
【本の要約】『7つの習慣〜人格主義の回復／スティーブン・R・コヴィー』人生を成功に導く
7つの習慣 『7つの習慣』はスティーブン・R・コビィー著のビジネス本ですごく簡単にいうと成功するための方法を記
私について はじめまして わたくしこうへいと言います。 至って普通のサラリーマンですが好きな仕事をして時間にもある程度の余裕があり給料にも満足、平均的な給与で生活しております。 ちょうど1年前までオー
Intersection Observerでターゲットの監視の止め方
ターゲットの監視を止めるために、アンオブザーブメソッドを使っていきます。 callbackの第2引数 アンオブザーブメソッド ターゲットの止め方 前回まででターゲットの監視をエリアの指定について見てき
thresholdの他に指定することができる、rootMarginオプションについて見ていきます。 rootの指定 ロートマージン rootの指定 Rootの指定はこれまでthresholdで指定して
Intersection Observerで要素が交差したらふわっと表示させましょう。
JavaScriptで要素が交差したらクラスを付け外しすることで表示を制御していきます。 クラスの付け外し 早期リターン クラスの付け外し 前回Intersection Observerを使うためにC
Intersection Observerを使うためにCSSアニメーションの設定をしていく
交差した要素につけるアニメーションを設定していきます。 styles.cssの作成 CSSアニメーションの設定 styles.cssの作成 前回までで交差情報の取得を行ってきました。 詳しくは『Int
Intersection Observerで交差した要素の情報を取得する
交差した要素について取得できる情報について確認していきます。 情報を取得しよう デベロッパーツールで見ていこう 前回はIntersection Observerで処理をするタイミングを指定する方法につ
Intersection Observerで処理するタイミングを指定する方法
ターゲットが任意の割合だけ交差したときに、処理を実行する方法について見ていきます。 第2引数を渡す 複数の値の指定方法 第2引数を渡す 前回は『Intersection Observerで処理が実行さ
Intersection Observerで処理が実行されるタイミングについて
Intersection Observerに登録した処理が実行されるタイミングについて ターゲットの取得 オブザーバーの設定 ターゲットの監視 処理の実行タイミング ターゲットの取得 前回までで要素の
Intersection Observerで処理が実行されるタイミングについて
Intersection Observerに登録した処理が実行されるタイミングについて ターゲットの取得 オブザーバーの設定 ターゲットの監視 処理の実行タイミング ターゲットの取得 前回までで要素の
【画像あり】WordPressのアプリで記事を投稿する手順について
wordPressのアプリで記事を投稿する手順について見ていきましょう TOP画面を開き右下のアイコンをタップ。 『ブログ投稿』をタップ。 タイトルを入力していく。（記事のタイトルになります。） 記事
IntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこう
ページ内HTMLで見出し、段落、画像を配置し、main.jsを作成していきます。 要素の配置 main.jsの作成 要素の配置 前回で画像の準備とコンソールの使い方について見てきました。
IntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこう
ページ内HTMLで見出し、段落、画像を配置し、main.jsを作成していきます。 要素の配置 main.jsの作成 要素の配置 前回で画像の準備とコンソールの使い方について見てきました。
IntersectionObserver(インタレセクションオブザーバー)を扱うための素材の準備とコンソールの表示
写真や画像などの取り込みとコンソールの表示にについて学んで行きます。 素材の準備 コンソールの表示 素材の準備 ・前回まででVS CodeとChromeの準備とindex.htmlファイルの作成をして
intersectionObserverAPI(インタレセクションオブザーバー)を使うために VS CodeとChromeの準備をする
VS CodeとChromeを使ってindex.htmlファイルを作る。 VS Code Chrome index.html VS Code ・前回IntersectionObserverAPI(イン
IntersectionObserverAPI(インタレセクションオブザーバー・エーピーアイ)の使い方
JavaScriptを使ってIntersectionObserverAPI（インタレセクションオブザーバー・エーピーアイ）という要素の監視するシステムを使いこなしてみましょう Inter
ウィンドウの大きさを変えたときに画像がずれる不具合を修正していきます。 リサイズイベント リサイズイベント ・前回までで進む、戻るや下のボタンをクリックすると指定の位置に移動し、今どこの画像が表示され
進む、戻るボタンを押したときにもカレントクラスが移動するように修正していきます。 関数を作る 関数を配置する 関数を作る ・前回まででボタンにクリックイベントをつけてボタンを押すと指定の画像を表示する
ボタンにクリックイベントを設定し、画像が指定した位置に移動するようにしていきます。 クリックイベントの追加 カレントクラスの移動 クリックイベントの追加 ・前回まででボタンをJavaScript生成出
JavaScriptでボタンを動的に生成する方法について見ていきます。 関数を作ろう 余白の設定 関数を作ろう ・前回まででHTMLとCSSで丸いボタンを作ってい行きコメントで消しておきました。 ボタ
ボタンのスタイルを整え、ボタンを動的に生成するための準備をしていきます。 ボタンのスタイリング ボタンのコメント化 CSS コメント ボタンのスタイリング ・前回でHTMLを使ってボタンの配置をしてき
画像の下にボタンを配置しカルーセル全体をセクションでまとめておきます。 ボタンの配置 セクションの配置 navタグ ボタン body全体 ボタンの配置 ・前回までで戻る、進むボタンが出来て、重複してい
重複しているコードを一つの関数にまとめていきます。 関数を作ろう 関数の配置 関数を作ろう ・前回までで進むボタンと戻るボタンの動作を確認してきました。 ・今回は重複しているコードを関数で一つにまとめ
updateButtons()メソッドを呼び出し、ボタンの状態が更新されるか確認していきます。 関数のの呼び出し 進むボタン 戻るボタン updateButtons() の呼び出し ・前回まででボタン
ボタンの状態を更新することで、不具合を直していきます。 非表示 関数 通常時 非表示 ・前回までで進むボタンと戻るボタンをうまく機能させることに成功しました。 ・今回は進みすぎてしまったり戻り過ぎてし
ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。 戻るボタンの情報を取得 動作させる 戻るボタンの情報を取得 ・前回までで進むボタンを完成させて行きました。 ・今回は戻る
何番目のスライドを表示したいかを変数で管理していきます。 次の画像まで移動 Javascriptの書き方 次の画像まで移動 ・前回までで進むボタンを押すと次の画像が表示するようにJavaScriptで
画像が1枚分だけ横にスライドするように修正していきます。 ulの子要素を取得 スライドの情報を取得 テンプレートリテラル ulの子要素を取得 ・前回まででスライドをアニメションすることができるようにな
ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。 Id取得 イベントを追加 トランジションプロパティ Id取得 ・前回まででJavaScriptのファイルを作ってきました
ボタンにマウスを ホバーしたときのスタイルを付けたあとに、JavaScriptを書く準備をしていきます。 ホバー JavaScriptファイルの作成 ホバー ・前回まででボタンのスタイリングをやってき
新年あけましておめでとうございます。 みなさま健やかに新春をお迎えのこととお慶び申し上げます。 昨年は当ブログを見に来ていただきありがとうございました。 みなさまのお役に立てたことがとても幸せでした。
ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。 ボタンのスタイリング ボタン位置の修正 ボタンのスタイリング ・前回はボタンの配置をやってきました。 ボタンの配置
画像をスライドさせるためのボタンを配置していきます。 ボタンの配置 ボタン位置の設定 ボタンの配置 ・前回までで画像の配置が終わったと思います。 画像の調整 ・今回は画像をスライドさせるためのボタンを
object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。 画像の縦横比 フレックスボックスの指定 画像を縮まないようにする 画像の縦横比 ・前回までで領域内に画像を入れることが
画像がカルーセルの領域に収まるように修正していきます。 画像の大きさ調整 親要素の高さ指定 画像の大きさ調整 ・前回までで画像を配置し簡単なスタイリングめでしてきました。 画像の配置 ・ただ、まだ画像
リストのタグを使ってカルーセルで使う画像を配置していきます。 画像の配置 リストのスタイリング 画像の配置 ・前回までで領域を作っていきました。 画像を表示する領域 ・今回はその作った領域に画像を配置
カルーセルで画像を表示するための領域を作り、スタイリングをしていきます。 雛形コード 表示領域の作成 style.cssの作成 雛形コード ・前回まででHTMLのファイルの作成と必要な画像ファイルの作
JavaScriptでWEBサイトでよく見る横に画像などをスライドさせるカルーセルの作り方 完成版の確認 開発環境の確認 ファイルの作成 完成版の確認 ・今回からはJavaScriptを使ってのカルー
どのメニューにactiveクラスがついているかに応じて、表示するタブの内容を切り替える処理を完成させます。 Idの紐付け data属性の利用 Idの紐付け ・前回まででコンテンツのactiveクラスを
内容を切り替えるための処理として、まず全てのcontentからactiveクラスを削除します。 コンテンツからクラスを削除 コンテンツからクラスを削除 ・前回まででメニューを切り替えることができたので
activeクラスを追加する前に、元からついていたactiveクラスは外すことで、移動するようにします。 activeクラスの付け替え activeクラスの付け替え ・前回まででクリックをするとact
メニューのliにclickイベントを設定して、クリックされたらactiveクラスが追加されるようにしていきます。 イベントの設定 ページ遷移のキャンセル イベントの設定 ・前回まででCSSでの全体的な
細かい部分のスタイルを調整とホバー擬似クラスをつけていきます。 細かいスタイリング 擬似クラス 細かいスタイリング ・前回activeクラスをつけてそちらのスタイルを整えてきました。 ・今回はさらに見
activeクラスがついているメニューにスタイルをつけていきます。 メニューのスタイリング コンテンツのスタイリング displayプロパティの操作 メニューのスタイリング ・前回までで全体のスタイリ
CSSで、画面全体とメニューのスタイルを調整していきます。 全体のスタイリング コンテイナーのスタイリング メニューのスタイリング 全体のスタイリング ・前回まででHTMLでのマークアップを終えました
HTMLでマークアップをしていきます。 全体のマークアップ メニューのマークアップ 中身のコンテンツのマークアップ 全体のマークアップ ・前回まででCSSのファイルとJavaScriptのファイルを読
CSSファイルとJavaScriptをファイルを読み込んで行きます CSSファイル JavaScriptファイル CSSファイル ・前回まででタブメニューを作るための全体像の把握とHTMLファイルを作
「ブログリーダー」を活用して、こうへいさんをフォローしませんか？
あなたは幸せを感じてますか？ 嫌われる勇気から学ぶ幸せになるためのメソッドです。 読んだけどよくわからなかった方や幸せになりたい方、要約したので見てみてください。
投資をしてみたいけど怖いという方や資産運用を始めようと思っている方。 まずは投資のやり方や意義を確認してみてください。 資産を運用することは人生の命題でもあります。まずは基礎から始めましょう。
キャッシュレス生活って？ みなさん財布の中には何が入っているでしょうか？ もちろん紙幣に小銭,クレジットカード
ボディビルダーの減量メソッド ボディービルダーには増量期と減量期ががありこの減量期にやる行動は万人が痩せること
4種類の口座とは？ 真っ先に思い浮かべる銀行口座 我々が口座と聞いて真っ先に思い浮かべるのは銀行口座でしょう。
海外で暮らすにはどうすればいいか 海外旅行とVISA まずはじめに、この方法は18歳以上30歳以下の日本国籍の
海外で暮らすにはどうすればいいか 海外旅行とVISA まずはじめに、この方法は18歳以上30歳以下の日本国籍の
筋トレを始めたいがしっかり目的をはっきり目的をはっきりさせたくないですか？ 本記事は筋トレをはじめる動機づけのために筋トレで得ることができる効果を網羅的に書いてあります。 しっかりと目的を持つことで筋トレを習慣化できるようにしましょう。
携帯代を月3000円にする方法 毎月の携帯代が月1万円を超えるという方も多いのではないでしょうか？ 生活を少し
携帯代を月3000円にする方法 毎月の携帯代が月1万円を超えるという方も多いのではないでしょうか？ 生活を少し
楽天カードのことなら知ってるよと思う方も多いですが実は楽天カードには街や楽天市場以外にも様々な優待があります。 一つくらい知らなかったというものがあると思います。 これから作る人は前情報として、もう持っている人は今まで知らなかった楽天カードの真の力を開放していきましょう。
監視対象となる要素を増やすためにコードを変えていきます。 要素の設置 コードの改変 要素の設置 ・前回は監視を
【名著】バビロンの大富豪の教えについて要約し、その意味や真意いついて考えた記事です。 お金持ちの人はどういった考え方をしているのかがわかる内容です。 あなた自身もお金持ちになるための黄金の7つ道具まとめました。
アドラー心理学を一躍有名にした名著『嫌われる勇気』を深堀りし解説したブログです。 心理学初心者でも意味が理解しやすいようになるべく専門用語を使わず解説してあります。 理解しやすいなっておりますのでご一読ください
7つの習慣 『7つの習慣』はスティーブン・R・コビィー著のビジネス本ですごく簡単にいうと成功するための方法を記
私について はじめまして わたくしこうへいと言います。 至って普通のサラリーマンですが好きな仕事をして時間にもある程度の余裕があり給料にも満足、平均的な給与で生活しております。 ちょうど1年前までオー
ターゲットの監視を止めるために、アンオブザーブメソッドを使っていきます。 callbackの第2引数 アンオブザーブメソッド ターゲットの止め方 前回まででターゲットの監視をエリアの指定について見てき
thresholdの他に指定することができる、rootMarginオプションについて見ていきます。 rootの指定 ロートマージン rootの指定 Rootの指定はこれまでthresholdで指定して
JavaScriptで要素が交差したらクラスを付け外しすることで表示を制御していきます。 クラスの付け外し 早期リターン クラスの付け外し 前回Intersection Observerを使うためにC
交差した要素につけるアニメーションを設定していきます。 styles.cssの作成 CSSアニメーションの設定 styles.cssの作成 前回までで交差情報の取得を行ってきました。 詳しくは『Int
ウィンドウの大きさを変えたときに画像がずれる不具合を修正していきます。 リサイズイベント リサイズイベント ・前回までで進む、戻るや下のボタンをクリックすると指定の位置に移動し、今どこの画像が表示され
進む、戻るボタンを押したときにもカレントクラスが移動するように修正していきます。 関数を作る 関数を配置する 関数を作る ・前回まででボタンにクリックイベントをつけてボタンを押すと指定の画像を表示する
ボタンにクリックイベントを設定し、画像が指定した位置に移動するようにしていきます。 クリックイベントの追加 カレントクラスの移動 クリックイベントの追加 ・前回まででボタンをJavaScript生成出
JavaScriptでボタンを動的に生成する方法について見ていきます。 関数を作ろう 余白の設定 関数を作ろう ・前回まででHTMLとCSSで丸いボタンを作ってい行きコメントで消しておきました。 ボタ
ボタンのスタイルを整え、ボタンを動的に生成するための準備をしていきます。 ボタンのスタイリング ボタンのコメント化 CSS コメント ボタンのスタイリング ・前回でHTMLを使ってボタンの配置をしてき
画像の下にボタンを配置しカルーセル全体をセクションでまとめておきます。 ボタンの配置 セクションの配置 navタグ ボタン body全体 ボタンの配置 ・前回までで戻る、進むボタンが出来て、重複してい
重複しているコードを一つの関数にまとめていきます。 関数を作ろう 関数の配置 関数を作ろう ・前回までで進むボタンと戻るボタンの動作を確認してきました。 ・今回は重複しているコードを関数で一つにまとめ
updateButtons()メソッドを呼び出し、ボタンの状態が更新されるか確認していきます。 関数のの呼び出し 進むボタン 戻るボタン updateButtons() の呼び出し ・前回まででボタン
ボタンの状態を更新することで、不具合を直していきます。 非表示 関数 通常時 非表示 ・前回までで進むボタンと戻るボタンをうまく機能させることに成功しました。 ・今回は進みすぎてしまったり戻り過ぎてし
ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。 戻るボタンの情報を取得 動作させる 戻るボタンの情報を取得 ・前回までで進むボタンを完成させて行きました。 ・今回は戻る
何番目のスライドを表示したいかを変数で管理していきます。 次の画像まで移動 Javascriptの書き方 次の画像まで移動 ・前回までで進むボタンを押すと次の画像が表示するようにJavaScriptで
画像が1枚分だけ横にスライドするように修正していきます。 ulの子要素を取得 スライドの情報を取得 テンプレートリテラル ulの子要素を取得 ・前回まででスライドをアニメションすることができるようにな
ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。 Id取得 イベントを追加 トランジションプロパティ Id取得 ・前回まででJavaScriptのファイルを作ってきました
ボタンにマウスを ホバーしたときのスタイルを付けたあとに、JavaScriptを書く準備をしていきます。 ホバー JavaScriptファイルの作成 ホバー ・前回まででボタンのスタイリングをやってき
新年あけましておめでとうございます。 みなさま健やかに新春をお迎えのこととお慶び申し上げます。 昨年は当ブログを見に来ていただきありがとうございました。 みなさまのお役に立てたことがとても幸せでした。
ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。 ボタンのスタイリング ボタン位置の修正 ボタンのスタイリング ・前回はボタンの配置をやってきました。 ボタンの配置
画像をスライドさせるためのボタンを配置していきます。 ボタンの配置 ボタン位置の設定 ボタンの配置 ・前回までで画像の配置が終わったと思います。 画像の調整 ・今回は画像をスライドさせるためのボタンを
object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。 画像の縦横比 フレックスボックスの指定 画像を縮まないようにする 画像の縦横比 ・前回までで領域内に画像を入れることが
画像がカルーセルの領域に収まるように修正していきます。 画像の大きさ調整 親要素の高さ指定 画像の大きさ調整 ・前回までで画像を配置し簡単なスタイリングめでしてきました。 画像の配置 ・ただ、まだ画像
リストのタグを使ってカルーセルで使う画像を配置していきます。 画像の配置 リストのスタイリング 画像の配置 ・前回までで領域を作っていきました。 画像を表示する領域 ・今回はその作った領域に画像を配置
