フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【jQuery】基本的な使い方

皆さんこんばんは(^o^)1週間が始まりましたね。 今日は制作現場でもよく使うjQueryの使い方をご紹介します。 jQueryはライブラリを読み込み利用しますが今回は割愛します。 ▼変数定義について 慣習上、変数の冒頭に$をつけます。 const $input = $("input")…

【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう

【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう

【JavaScript】Cookieを使ってメールアドレスを保存しよう

皆さんこんばんは(^o^) 今日は夏を彷彿させる暑さでしたね・ω・ 体調を崩しやすい季節なので体調管理には気をつけていきましょう。 今日はお問い合わせフォームなどでよく使われているCookieえを保存する方法を ご紹介します。 先ずはindex.htmを用意します…

【JavaScript】要素を生成しリストを作ろう

1週刊がやっと終わりましたね(^o^) 今週は忙しい日々でくたくたです(笑) さて今日はJavaScriptを用いてリストを生成する方法をお伝えします。 まずはindex.htmlを用意します。 index.html <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></meta></head></html>

【JavaScript】画面をロードするごとに表示する画像を切り替えよう

最近仕事が忙しく今日もギリギリの更新になってしまいました。 これから寒くなっていくので体調には気をつけていきましょう! 今日は画面をロードするごとに画像が切り替わる仕組みをお伝えします。 まず画像を3枚用意してください。種類はなんでもOKです。 …

【JavaScript】Ajaxを使ってJSONデータを受信しよう

楽天ブックス こんばんは。今日も雨が振りましたね。 ただ秋に突入しだんだんと過ごしやすい気候になってきました。 さて、今日は少し難しいのですがAjax通信を用いたコードを展開します。 まず2つファイルを用意します。(コピペしてお試しください) cakes.j…

【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編2)

おまたせしました!今日はPug編の2回目です。 今日はPugを使った基礎的な記法をご紹介いたします\(^o^)/ 1回目では環境構築の記事を書いているのでまだの方はぜひ見ておいてください! frontendblog.hatenablog.com まずはフォルダにsrc/pug/というディレ…

【JavaScript】外部のJSファイルからモジュールを呼び出す方法

こんばんは!今日は一日雨でジメジメした日が続きますね。 まだ週初めなので頑張っていきましょう! さて、今日は JSファイルをモジュールとして呼び出す方法を 紹介します。 まずは下記階層のフォルダを用意してください。 dist └index.html └js └script.js…

【JavaScript】タイマー機能を作ってみよう

今日は簡単なタイマーを作ってみようと思います。 先ずはHTMLファイルをご用意ください。 <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>timer</title> <style></style> </head> <body> </body></html>

【JavaScript】チェックボックスにチェックが付いたらボタンを押せる仕組みを作る

こんばんは!今日も雨で毎日ジメジメしてますね。 さて、今日はチェックボックスにチェックをいれたらボタンを押せる仕組みを作りたいと思います。 よく問い合わせの送信フォームにあるやつですね\(^o^)/ まずはHTMLを用意しましょう! <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </meta></meta></head></html>

【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編1)

皆さんこんばんは(^^)今週ずっと雨で寒い日が続いてますね。 今日はHTMLを効率的に書く方法をお伝えします。2回に分けて紹介するのでぜひお試しください。 HTMLを効率的に書く方法としてPugという記法があります。 閉じタグを意識せずにかけるのでコーディン…

【WordPress】共通箇所のテンプレート化する方法

皆さんこんばんは。今日はずっと雨で肌寒い日が続いてますね。 今日はwordpressで共通のテンプレートファイルを作る方法をご紹介します。 wordpressで構築をしていると何度も同じ記述はナンセンスです。 そこで共通ファイルを作成するにあたり一つディレクト…

【JavaScript】打った文字を画面に出力してみよう

今日は実際にキーボードで打った文字を画面に出力するプログラミングをご紹介します。まずHTMLファイルをご用意ください\(^o^)/ ※コピペしてHTMLファイルに貼り付けてください。 <html> <head> <meta charset="utf-8" /> <title>タイピング</title> </head> <body> <div id="target"></div> </body> </html> これでHTMLファイルは完了です。 次にbodyの閉じタグ前…

【WordPress】ディレクトリとURLを表示するテンプレートタグ

今日は画像やURL設定時によく使うテンプレートタグの紹介です。 WordPressではディレクトリを明示するタグがあります。 ▼ページリンク設定 href = "/○○○/○○○" このようにタグの後ろにディレクトリを明示することでリンクの設定が可能です。 ▼画像の表示 src …

【WordPress】投稿日時を表示させるテンプレートタグ

WordPressで投稿日時を表示させるテンプレートタグをご紹介します。 投稿日時を表示させるタグはいくつかありますが下記をよく利用します。 the_timeをよく利用します。 パラメータには引数を取りget_optionメソットで日付の表示形式を取得します。 詳しく…

【WordPress】投稿記事の文だけループを回す構文

皆さんこんにちは(^^)今日はWordPressでよく使う構文でループというものがありご紹介したいと思います。 ざっくり構文はこんな感じです。 <p></p> またここで重要なのが`the_post()`を必ず記述するということです。記述しないと無限ループとなりやがてブラウザが落…

【WordPress】投稿があった場合に表示させるための分岐の構文

WordPressでは投稿があるかないかを判別してあれば投稿をだすことができる構文がある。下記は基礎的な内容のため理解は必須。 投稿があればここが表示される投稿がないときはここが表示される お名前.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 月額968円からの…

継続は力なり