hamatakeBlog

MENU

【aタグ href】ボタン押したら画面を遷移する！【JavaScript入門】

プログラミング

JavaScriptサムネイル

おはようございます、hamatakBlogです！

 

今回は、HTML、Javascriptを使っての画面遷移についてご紹介していきます！

画像説明（ブログ内には見えないがSEO的意味がある）

ん。えっと、画面遷移ってなんですの？

画面遷移って簡単に言うと、Webページから別のWebページに移動することです！

 

この動作って、Webサイト上では実は当たり前のように使われている技術なんですよ！

これができるだけで、最低限のそれっぽいWebサイトを作ることができます！

 

また今回の記事は、はてなブログを利用している方にもおすすめで、ブログをカスタムしてみたいけど、やりかたがあんまりよくわかんない！って思ってるそこのあなた！

ぜひ本記事を参考にしていただけたら幸いです！！

 

それでは、学習スタート！！

HTMLを使ってリンクを作り画面遷移してみる

まずは、HTMLだけで画面遷移を行う方法をご紹介します！

HTML

<a href="https://hamatakeblog.hatenablog.com">画面遷移をします！</a>

 

イメージはこちら⇓

画面遷移をします！

 

皆さん、見たことがあるのではないでしょうか！

いわゆるリンクってやつです！！

この青文字をクリックすると、遷移するようになっています！！

  • <a></a>
    aタグ：href属性を付けることで、画面遷移リンクを作成する。
  • href="任意のURL"
    href属性：任意のURLを設定することで、クリック時にURLに画面遷移する。

JavaScriptを使って画面遷移してみる

HTMLだけでも、遷移することはできますが様々な条件がある状態で、画面遷移したい場合などはJavaScriptで処理を実装します！

HTML

<button type="button" id="btn">画面遷移をする</button>

function butotnClick(){

  // location.hrefにURLを代入することで画面遷移する
  location.href = "https://hamatakeblog.hatenablog.com";
}

let button = document.getElementById('btn');
button.onclick = butotnClick;

 

 

ボタンをクリックしたときに、画面遷移を行います。

JavaScript関数の書き方は、前の記事で紹介しているので、こちらからどうぞ！⇓

  • location
    表示しているWebページの位置情報を保持しているオブジェクト。
  • location.href
    表示しているWebページのURLを保持しているプロパティ。ここを変更することで画面遷移する。

たとえば、この関数内にチェックボックスがチェックされている場合に画面遷移をする、チェックされていない場合アラートを出すといった処理を実装することができます！

実用的な実装を考えると、JavaScriptを用いた方法を覚えたほうがいいですね！

はてなブログに画面遷移する処理を作る

今回ご紹介した処理は、実はhamatakeBlogの画面ヘッダー部分でも使用している処理なんです！

f:id:hamatakeBlog:20211026214438p:plain

実際にこのボタンをクリックするとちゃんと画面遷移していることが確認できると思います！

ちなみにここでは、URLにカテゴリーのURLを指定することで遷移を行っています！

 

はてなブログのカスタマイズについては、また別の記事でご紹介しますので、お楽しみに！

 

ということで以上、画面遷移の方法をご紹介しました！

これだけ簡単な処理とWebデザインだけそれっぽいWebサイトが作れます！

ぜひサンプルを模写して実装を試してみてください！

 

以上ご視聴ありがとうございました！

 


 

仕事で人間関係がつらいなら、いっそ自分を消せばいい【新卒 社会人】

人間関係 仕事術

f:id:hamatakeBlog:20211021221220p:plain

おはようございます、hamatakeBlogです。

画像説明（ブログ内には見えないがSEO的意味がある）

マジで頑張ってるのに、
上司や取引先とうまくいかなくてほんとに仕事がつらい！

っと思ってる人、めちゃくちゃ多いですよね。

 

上司のパワハラがきつい、取引先のあたりが強い、ってほんとに心をえぐられるんですよ！！

少し昔は、仕事ってのはしんどいものだよ、とかそんなの当たり前って言われてましたが、そんなの古い古い！！！

まだまだ人間関係とか職場のストレスが原因で仕事をやめる方は非常に多いですが、そんな皆さんにわざわざ仕事を辞めずとも、自分自身を守る方法をご紹介します！！

仕事をやっている自分と素の自分を分けて演じる

正直、仕事がうまくいくのがもちろんベストだけど、そんなの自分でコントロールできないことってあるんですよ！

例えば、まだ新人で仕事内容を把握できないまま現場でミスするとか、お客さんとの少しの認識の食い違いが後々判明して...とか！

だから仕事での失敗って避けられない場合もある！（新人とかに限らずチャレンジしての失敗とかもある...）

でもそんなのいちいちまともに受けていたら、メンタルボロボロ鬱ルートまっしぐら。。。

 

いやいや！ぶっちゃけたかだか仕事なんかで心と体壊して自分の好きなことすらできなくなるのは、ほんとにもったいないよ！！まじでアホくさいわ！！！笑

 

だからまずは大好きな自分自身を守るべきなんです！

その方法の一つとして、お勧めしたいのが素の自分と仕事の自分を演じ分ける！！これなんです！

実際、怒られることや失敗することってなんか自分を否定されてる気がしてくるんですよ！

 

たしかに失敗したのは自分、ミスしたのは自分。

でもそれって仕事上の自分なんだよって割り切るってあげることで案外気持ちが楽になるもんです！

もちろんこれは、反省しなくていいよとかそんなことを言っているわけではなく、正確には反省ではなく、次回同じことを失敗しないために修正を行うことだけ考えればいいんですよ！

 

これを切り替えるのは、ちょっと簡単じゃないかもしれないけれど、これができれば正直最強ですよ！

もし営業職をやっている人なら、めちゃくちゃできる営業マンを演じればいい、社交的な明るい自分を演じればいい！

もちろん最初はなれない自分で疲れちゃうかもしれないですが、大人なんてみんな社会人っていう仮面を被ってるんですよ！

社会人としての仮面さえできればもうあなたは最強です！

 

自分ができると過信しない

もう一つ紹介したいのが、自分を過信しすぎないってことです。

ちょっと前の項目と相反しているようですが、これも一つの方法です！

メンタルやられるときって、自分の理想と現実のギャップがあることによって自分はできないんだって思っちゃうんですよね。

 

じゃあもっと現実の自分と向き合ってあげれば、そのギャップは埋まっていくんじゃないですか？

 

これは、とある著名人の方の言葉で「もし失敗しても、自分はそんなもんだって割りきって次の仕事にまた真摯に取り組んでいる」というものがあります。

 

この言葉、実はその業界のトップの方が言っていたんです！

この言葉を聴いて、自分自身を見つめなおすとてもいい機会になりました！

 

あなたは、いつのまにか「失敗したらダメな奴、成功したら素晴らしい人」って勘違いしっちゃってないですか？

 

能力が高い人でも、失敗することがある。ってのを一つ心に留めておくのもいいかもしれないです！

 

ということで、以上仕事や人間関係で悩んでいる人への応援記事でした！

今回紹介した方法はあくまで、自分を守るための手段の一つってことを忘れないでください！

早々に退職すべきってことも当然あるので、しんどくてどうしようもない時はぜひhamatakeBlogのツイッターにDMください！！

 

ご愛読ありがとうございました！！

【JavaScript changeイベント】選択メニューが変更されたときの処理【JavaScript入門】

プログラミング

f:id:hamatakeBlog:20211020224807p:plain

おはようございます、hamatakeBlogです！

 

今回は

プルダウンメニューやラジオボタン、選択ボタンの選択項目が変更されたとき、またテキストボックスの内容が変更されたときにJavaScriptで処理を実行する方法

をご紹介します。

 

ＪＳ

そもそも、プルダウンとかがわからないんですけど...

 

そんな方のために、まずはどんな時に発火するイベントなのかをご紹介していきます！

（イベントってなんぞや、って人はこちらの記事を先に見ましょう！⇓）

 

hamatakeblog.hatenablog.com

changeイベントが発火するパターン

項目変更やテキストボックスの変更時に発火するイベントをchangeイベントといいます。まずは、そのchangeイベントがどんなもので発火するのかを紹介しましょう！

プルダウンメニュー

プルダウンメニューとは、項目選択で利用される要素の一つで、ドロップダウンともいわれます。イメージは下記のものとなります。

HTMLでは、このように記載します。

<label>あなたの出身は？

  <select class="from" name="from">
    <option value="">未回答</option>
    <option value="hokkaidou">北海道</option>
    <option value="honnsyuu">本州</option>
    <option value="sikoku">四国</option>
    <option value="kyuusyuu">九州</option>
  </select>

</label>

HTMLメモ

  • <select></select>
    セレクトタグ：セレクトボックスを作成する。初期値ではプルダウンメニューを作成。
  • <option></option>
    オプションタグ：selectタグの中に記載することで、セレクトボックス内の選択肢を作成する。

ラジオボタン

ラジオボタンは、選択項目の中から一つだけ選ばせたい場合に使用する入力フォームです。イメージは下記のような感じ。

 

 

<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性

HTMLメモ

  • <input>
    インプットタグ：typeの指定がない場合は、テキストボックスを作成。
  • type="radio"
    typeをradioに設定することで、inputタグをラジオボタンにする。

チェックボックス

チェックボックスは、先ほどのラジオボタンの複数選択可能バージョンです。

イメージは下記。

 

 

趣味：

<label><input type="checkbox" />飲む</label>

<label><input type="checkbox" />打つ</label>

<label><input type="checkbox" />買う</label>

HTMLメモ

テキストボックス

テキストボックスは、文字入力ができる入力フォームです。

イメージはこちら。

 

名前：

 

名前：<input type="text" />

HTMLメモ

  • type="text"
    typeをtextに設定することで、テキストボックスを作成。

 

ということで、ほかにもchangeイベントが発火するパターンはありますが、参考までのご紹介とさせていただきます。

changeイベントの書き方（ここからが本題だから、前のやつは飛ばしてもよしとする）

さてここからが、本題！

今回は、各項目の要素が変更されたときに、値を出力するような処理をJavaScriptで実装していきます！

 

ＪＳ

本題に入るまで長いな！

こればっかりは、しゃーないです笑

プログラミングの勉強あるあるで、わからないことの説明文にわからない文言がでてきて、無限ループか？ってぐらいに沼にはまるんよね笑

 

と無駄話はこの辺にして、、

では！先ほど作成した、プルダウンメニューをつかって処理を作っていきます！

HTML

<label>あなたの出身は？

  <select id="from" name="from">

    <!-- hiddenで未回答を選択されないように隠す -->

    <!-- selected="selected"で任意の項目を初期値に選択（未設定の場合は一番上の項目） -->
    <option  hidden selected="selected" value="">未回答</option>
    <option value="hokkaidou">北海道</option>
    <option value="honnsyuu">本州</option>
    <option value="sikoku">四国</option>
    <option value="kyuusyuu">九州</option>
  </select>

</label>

<div>私の出身は、<span class="output"></span></div>

JavaScript

// document.querySelector('セレクタ')で指定されたセレクタのElementを返す

// 今回は、idがfromのもの（JS上では、id要素は「#」、class要素は「.」）

const selectElement = document.querySelector('#from');

// clickイベントでも紹介したaddEventListenerを使用。第一引数にchange。第二引数にイベント発火時の処理。

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.output');

  // classがoutputのtextContentに選択された項目のvalue要素を代入。
  result.textContent = event.target.value;
});

 

私の出身は、○○です。
 
選択した、項目のvalueの値が取得できていればOKです！少々ややこしく思えますが、緑文字でコメントしているものを見てもらえればなんとなくわかんるじゃないかと思います！（なげやり笑）
 
以上、changeイベントの説明でした！そのほか紹介していないラジオボタンやチェックボックスでのchangeの記載方法は基本的に同じような感じでできます！
また別の記事で少しだけ紹介しようと思っているのでそちらもぜひ見てくださいね！

 

デバッグ手法: JavaScriptエラー解決方法のポイント

プログラミング

f:id:hamatakeBlog:20211012005413p:plain



おはようございます、hamatakeBlogです！

 

プログラミングに関する記事をすでに数回書いていますが、

【JavaScript Clickイベント】HTMLのボタンが押されたときの処理【JavaScript入門】 - hamatakeBlog

プログラミング初心者

おい！記事を真似して書いてみたけど、動かないぞ！どうなってんだ！😠

なんてことになっている方もいらっしゃるんじゃないでしょうか。

そんなプログラミングを始めたはいいものの一歩目からつまずきそうという方必見！

今回はソースコードに不具合がある場合のエラー解決方法をご紹介します。

デバッグ

ところでみなさん、デバッグという言葉を、聞いたことはありますか？

デバッグ（debug）とは、コンピュータプログラムや電気機器中のバグ・欠陥を発見および修正し、動作を仕様通りのものとするための作業である。

wiki参照

うん、かてーこと言ってっけど、平たく言うと、バグやエラーを探して修正する作業のことだな。

ということで今回は、JavaScriptのソースをデバッグしていこうと思います。

 

開発者ツール（ディベロッパーツール）

JavaScriptデバッグ方法には様々なものがありますが、今回はブラウザの開発者ツールを使ってのデバッグをやっていきます。また本記事では最も利用者が多いChromeブラウザを利用します。

 

それでは、まずは開発者ツールを開きます。開き方は簡単。下記の方法のいずれかで開くことができます！

  • F12キー
  • Ctrlキー + Shiftキー + iキー
  • 右上の設定メニュー → その他のツール → ディベロッパーツール

開くと下記のような画面が出てきます！

f:id:hamatakeBlog:20211011212813p:plain

 

Elements

f:id:hamatakeBlog:20211011213943p:plain

このElementsでは現在表示しているHTMLを確認することができます。

Elementsの一番左にある矢印マークを押します。

f:id:hamatakeBlog:20211011215155p:plain

この状態でサイト内のどこ部分でもいいのでクリックしてみてください。

f:id:hamatakeBlog:20211011215559p:plain

すると、HTML部分がこのように青くフォーカスされます。これは実際にクリックされた部分のHTML部分をフォーカスするようになっています。

さらにそのタグに指定されているスタイルも下部で確認することができます。

f:id:hamatakeBlog:20211011220013p:plain

もっというとこのa{ }の括弧の内部をダブルクリックするとスタイルを一時的に新規に指定することができます！ほんとこれ初めて見たとき感動しましたｗ

ただ注意してほしいのがあくまで一時的なので、ページの更新やブラウザを落とすと変更したものは消えてしまいます。あくまでこんな感じでデザインやったらどうかなーってやってみてよかったのをソースに反映するって感じで使いましょう！

Console

次にConsoleです。JSのログを出力します。

サンプルとして今回は以前使用したボタンをクリックしたときに出力されるJSの関数を使用します。

// ボタンクリック関数
function butotnClick(){

   console.log("デバッグを確認しました！");
    // alert()で、アラートを出力
    alert('ボタンがクリックされました');
}

JSではconsole.log()でこのConsoleに出力することができます。

ここで文字列を出力するだけでは、あまりメリットはないですが変数を出力するなどすれば非常に効率的にデバッグができます！

 

Sources

最後にJSデバッグには欠かせない部分を確認していきます。

先ほどのClonsoleと同じソースを使用します。

Saucesをクリックし、console～の部分の左側、３行目をクリックすると、下記の画像のようになります。

f:id:hamatakeBlog:20211011235511p:plain

これをブレークポイントといいます。ブレークポイントでは実行中の処理を一時停止し宣言中の変数や値の確認をすることができます。

 

仮にこのようなソースを作りましょう。

let test = 0;

function butotnClick(){

 if( test === 0 ){

  test ++;

 }

console.log( "ログ成功："  + test );

}

では実際にデバッグやっていきましょう！

ブレークポイントでとめた実行は「ステップオーバー」一行ずつ実行できます。

f:id:hamatakeBlog:20211012002634p:plain

これで一行ずつ確認していくことで、どこ部分でエラーが発生しているかわかりますね。この一時停止中はカーソルを合わせると変数などを値を確認することができます！！

さらに、ステップオーバーのほかにもステップインというものがあり、これは実行中の行の関数の処理の中にさらにはいっていけます！（実際にやってみたらわかるよ）

まとめと書籍紹介

ということで、デバッグのやり方を解説を終了します！

プログラミングというのは、実戦でやってこそ身につくものというのが理解していただければとてもうれしいです！！まさにトライアンドエラーってやつですね！

 

なんかうまくいかないーぬーーー、このエラーわからないーーって思う前にまずデバッグしてみましょう！

んで、デバッグしてもわからない（全然あるから安心しよｗ）というエラーも実際あります！そのときは、現場の先輩方やコミュニティの方々に質問してみましょう！それで解決しない問題であれば大前提が間違っている可能性があります!（まぁおそらく質問したらその大前提は間違ってるよっていまれますがねｗ）

 

最後になりますが、JavaScript初心者にお勧めの書籍をご紹介します！

もし独学で勉強して挫折してしまった！って人にもおすすめしたい本です！図解での解説が多く記載されており、わかりやすくまとまったソースサンプルも記載されています！

気になる方はこちらからどうぞ！⇓


 

【JavaScript Clickイベント】HTMLのボタンが押されたときの処理【JavaScript入門】

プログラミング

f:id:hamatakeBlog:20211007230248p:plain

おはようございます、hamatakeBlogです！

 

JavaScript入門！この記事は、JavaScriptの学習をすでに始めているかた向けの記事となっています。

超初心者編は、こちら⇓からどうぞ！

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

 

今回は

HTML内のボタンがクリックされたときにJavaScriptで処理を実行する方法

をご紹介します。

ウェブページ上で発生するあらゆるアクションことをイベントといいます。別に覚える必要はないけど、「へー、そうなん」ぐらいで聞いててください笑

つまり今回はクリックイベントってことですね。

他にも、chengeやkeydownなどさまざまなイベントハンドラがあるので別途紹介します！

ということで、今回はクリックした時、アラートがでるボタンを作っていきます！

完成イメージはこんな感じ⇓

 

それではやっていきましょう！

HTMLでボタンを作成

まずは、HTMLを準備します。

<body>

  <button type="button" id="btn">ボタンをクリック！</button>

  <script type="text/javascript" src="sample.js"></script>

</body>

※今回ボタンタグにフィーチャーするためheadタグなどは省略して記載しています。

詳しくは、こちら⇓の記事を参考にしてHTMLを作成してください。

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

f:id:hamatakeBlog:20211007215054p:plain

HTMLは上記のような画像ができてればOKです。

 

HTMLメモ

  • <button></button>
    ボタンタグ：HTMLにボタンを作成する。
  • type
    タイプ属性：様々な種別を指定する。

 

JavaScriptでクリックイベントを実装していく

それでは、次にJS（JavaScript）の実装に移ります。

一概にクリックイベントといっても実装のやり方が、複数ありまして今回は3つご紹介していきます！

onclickプロパティ

sample.js

// ボタンクリック関数
function butotnClick1(){
    // alert()で、アラートを出力
    alert('ボタンがクリックされました');
}

// document.getElementById()でHTMLの中でid属性がbtnの要素を取得し、変数buttonに代入する
let button1 = document.getElementById('btn');
// buttonのonclickプロパティに上記で宣言しているボタンクリック関数を代入
button1.onclick = butotnClick1;

 

プロパティを使用する場合は、無名関数やアロー関数式を使って実装することも可能です。（ちなみに下記のURLで作成したクリックイベントが無名関数を使ったやり方です）

初心者が3か月で案件デビューしたJavaScript勉強法【JavaScript★独学でも大丈夫★】その2 - hamatakeBlog

JavaScriptメモ

  • function 関数名(){ }
    関数：{ }の中に処理を記載する。
  • alert()
    アラート：( )の中に文字列を記載して、実行時にアラートに文字列を出力する。
  • // コメント
    コメントアウト：// を付けることで実行時には読み込まれない。
  • let 変数名
    変数：文字や数値など値を保持することができる。この変数に値を代入して使用する。
  • =
    代入：数学的な=ではなく、右辺を左辺に代入するという意味。ちなみに等しい場合に使われるのは===または==。

addEventListener メソッド【推奨】

sample.js

function butotnClick2(){
    alert('ボタンがクリックされました２');
}

let button2 = document.getElementById('btn');

// addEventListener( 'イベント', 処理)で要素にイベントが発火した際に処理を実行する
button2.addEventListener('click', butotnClick2);

addEventListenerは、第一引数にイベント、第二引数に処理を記載することで、クリックイベントを発火させます。

また、ほか2つのやり方は、一つのクリックイベントしか設定できませんが、このやり方であれば、複数処理を設定することができます。

onclick属性

sample.js

function butotnClick3(){
    alert('ボタンがクリックされました3');
}

sample.htmlのbuttonタグを修正

<button type="button" id="btn" onclick="buttonClick3()">ボタンをクリック！</button>

最後の方法は、buttonタグにonclick属性を付与するやり方です！

上記のよう記述することで、このボタンをクリックしたときに、" "で囲まれた文字と一致する関数を呼び出します。

まとめ

以上、ボタンクリックされたときの処理でした。今回3つの方法をご紹介しましたが、現在推奨されている方法は、2番目に紹介したaddEventListenerのやり方です。

クリックイベントは、使用頻度が非常に高いのでしっかりと学習していきましょう！

 

こちらの記事を見終わった方は次の記事をチェック！

hamatakeblog.hatenablog.com

hamatakeblog.hatenablog.com

hamatakeblog.hatenablog.com

【話題沸騰】ファミリーマート限定発売！！大注目の「雪見だいふくみたいなパン」がスゴイ！！

こんにちは。hamatakeBlogです！

突然ですが、かき氷を食べるとき「シロップって全部同じ味なんだって」と言われたことありませんか？

もはやみんなの豆知識であるシロップ問題を自分の手柄かのように語られる地獄の時間・・・

あれの良い返しがあれば教えて下さい。。。

 

と、言ったように、この世の中にはイチゴ味「風」シロップのような○○風、○○みたいな製品があふれています。

今回はファミリーマートで見つけた驚きの○○みたいな製品をご紹介します！！

（無理やりの導入お許しください。。。。。。。。。）

 

コチラの製品です！

 

 

どどん！

 

 

 

どっどどどん！！

 

 

 

 

ドドドドン！

 

 

 

 

どどどどどどどどん！！！

 

 

 

「雪見だいふくみたいなパン」です！！！

f:id:hamatakeBlog:20211003014426p:plain

皆さん気になっている方も多いのではないでしょうか。

残念ながら私も気になっているだけでまだ食べておりません・・・。

 

なんだコイツ食べてねぁのかよ！レビュー見てぇよ！と思った方ももう少し読んでください！

「本家、雪見だいふく」越えしたとの情報を仕入れております。

（本当に、本当に、本当にレビューを見たかった方はやっぱりこれ以上見ないでください。期待にお答えすることはできません。）

 

ここで、「本家、雪見だいふく」がちょっと楽しくなる豆知識をご紹介します。

知っていましたか？実は雪見だいふくのフォークには４種類のパターンがあるんです！

f:id:hamatakeBlog:20211003021547p:plain

こういった事を意識しながら食べるだけで楽しさが２倍、いや３倍、いやいや４倍にもなるでしょう。

ぜひ、全部集めてその辺の小学生にマウンティングしてください。

（泣いちゃっても保証は一切致しません。）

 

お待ちかねの「本家、雪見だいふく」越えしたとの情報ですがこちらの画像をご覧ください。

f:id:hamatakeBlog:20211003022727p:plain

ななんと！！アマゾンで１個112円で注文できる「本家雪見だいふく」に対し、「雪見だいふくみたいなパン」は１個135円です！！

これは間違いなくコラボ製品に自信をもって販売している証拠でしょう！！

（ちなみに「本家雪見だいふく」の定価は140円の様です）

これを見た瞬間、まだ食べずとも皆様に紹介出来る製品であると確信しました。

ちなみに給料日が来たら私も食べます。。。。

 

ぜひ、皆さんも食べて見て下さい！！

「雪見だいふくみたいなパン」食べたよ！って方はぜひ感想を聞かせて下さい！

 

あ、最後まで読んでくれた方限定にに今回だけ特別に「雪見だいふくみたいな湯たんぽ」を発見しましたので紹介します！

https://thumbnail.image.rakuten.co.jp/@0_mall/kouei2014/cabinet/enetanpo/et08/et-08_01.jpg?_ex=400x400

これからの寒い冬を乗り切る相棒としてご活用下さい！！！！！

湯たんぽライフを送ったことない方は特におすすめです！！！

⇓購入はこちらから⇓

item.rakuten.co.jp

 

 

【化粧水で差をつけろ！肌イケメン！】コスメ初心者に捧げる、男性おすすめメンズコスメ！

f:id:hamatakeBlog:20211002181436p:plain

おはようございます、hamatakeBlogです！

 

お肌でお悩みの皆々様！！お待たせしました、お待たせしすぎたのかもしれません！

「肌で悩んでいるけど、どれがいいのかわからない！」「そもそも男が化粧水なんて」と思っている方は非常に多いと思います！

 

事実、私自身も数か月前まではコスメなんてまったくわからない派閥でした！笑

しかし周りの人は、特に女性は男性の肌をよく見ているようで、とある調査でこんなものがありました！

女性が初対面の男性の見ている部分ランキング・1位：顔立ち
・2位：肌（シミ、しわ、ニキビ）
・3位：髪型

そう！私たちは気にしていない肌が女性からみると、非常に大事なポイントだったんです！

 

服装や髪型ばかり気を使っていた私は愕然としましたよ...

しかし！全然今からでも肌イケメンになれるんです！

ということで、今回はお悩み別でおすすめコスメをご紹介していきます！

老け顔でお悩みの方へ【楽天メンズ化粧品人気No.１】

【楽天ランキング第1位！】男の老け顔対策に。「1本で完了」の新エイジングケア。プレミアムフェイスエッセンスアクアモイス【 メンズ化粧水 男性化粧水 オールインワン 化粧水 美容液 スキンケア 男性 メンズ おすすめ 男性用化粧品 メンズ化粧品 メンズコスメ 】

まずは、こちらプレミアムフェイスエッセンス アクアモイスです！

この商品のいいとこは、これ一本でOKってとこです！とにかく面倒くさいことを省きたい！でも女の子にはモテたい！というかた必見です！

これ一つで、「化粧水」「乳液」「美容液」「クリーム」の4役を担っています！正直な話私は、なにがなにの効果があってとかはわかりません！でもわからなくていいんです！なぜならこれ一本使っておけば全部OKなんですから！笑

 

⇓商品購入はこちらから⇓


 

 

乾燥肌でお悩みの方へ

オールインワン 化粧水 メンズ 【枯れない男のエイジングケア】スキンケア アフターシェーブローションに クワトロボタニコ ボタニカルないい香りのメンズ化粧水 男性化粧水/男性化粧品/メンズ化粧品/メンズコスメ・肌荒れに。髭剃り後の保湿 乳液や美容液として 30代 40代

 

続いて、クワトロボタニコからメンズ化粧水です！

こちらも先ほどと同様にオールインワンタイプとなっています！！またこちらはこんな方にお勧め！

・カサつきや肌荒れ
・しわ、たるみ
・香りも楽しみたい

「100％天然製油」の柑橘系の爽やかな香りで、キリっとしすぎず、さわやかでリラックスできる香りとなっています！

さわやかな香りとともに、さわやかなあなたを演出できるのではないでしょうか！？

 

⇓商品購入はこちらから⇓


 

 

脂肌でお悩みの方へ

【メンズ　スキンケア　プレゼント】　脂性肌向けオールインワン化粧水 ＆ 日焼け止め美容液のギフトセット（ラッピング仕様・紙袋付）｜クワトロボタニコ 30代、40代の男性へ　お中元や誕生日の贈り物にも　メンズコスメを

最後に、またまたクワトロボタニコから脂性肌向けオールインワン化粧水＆日焼け止め美容液です！

いわゆるオイリー肌で悩む方は多いですよね！

本商品では、テカリ・べたつきを抑える「皮脂ケア」と、ハリを与えて肌を引き締める「エイジングケア」の両方に対応してます！

またこちらの日焼け止めは、べたつかずまた汗で落ちにくいんです！まさに夏場にはうってつけの日焼け止めですね！

日焼けはシミのもとになるので、これから肌イケメンを目指すには必須アイテムです！！

 

⇓商品購入はこちらから⇓


 

 

最後に

ということで、コスメ初心者におすすめのコスメ紹介でした！みなさまいかがでしたでしょうか！

これからは男性もお肌を気にする時代！しっかりとスキンケアを行って肌イケメンを目指しましょう！