フロントエンドブログ - にほんブログ村

フロントエンドブログ https://frontendblog.hatenablog.com/

29歳で営業職からフロントエンジニアへ転向。都内(渋谷付近)のWeb制作会社に勤務しています。ここではフロントエンドに関する記事を取り扱っています。積極的にアウトプットしていきますので皆様のお役に立てれば幸いです！

圏外	総合ランキング
圏外	IT技術ブログ
圏外	HTML5/CSS3
圏外	JavaScript
圏外	Webエンジニア

本日のランキング詳細

はしよう

フォロー

住所: 未設定

出身: 未設定

ブログ村参加: 2021/09/04

参加テーマ

過去記事

【jQuery】基本的な使い方

皆さんこんばんは(^o^)1週間が始まりましたね。今日は制作現場でもよく使うjQueryの使い方をご紹介します。 jQueryはライブラリを読み込み利用しますが今回は割愛します。 ▼変数定義について慣習上、変数の冒頭に$をつけます。 const $input = $("input"); ▼テキストの中身を変える方法 $("p").text("こんにちは"); テキストの中身を変えるには.text()を利用します。 JavaScriptと書き方が若干違うので注意。 ▼クラスの追加 $("p").addClass(red"); クラスの追加の方法 addClassでCSSの追加が可能。上記は…
2021/09/13 22:26
【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう

【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう
2021/09/12 19:59
【JavaScript】Cookieを使ってメールアドレスを保存しよう

皆さんこんばんは(^o^) 今日は夏を彷彿させる暑さでしたね・ω・体調を崩しやすい季節なので体調管理には気をつけていきましょう。今日はお問い合わせフォームなどでよく使われているCookieえを保存する方法をご紹介します。先ずはindex.htmを用意します。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cookie</title> <link rel="stylesheet" href="../assets/style.css"> </head> <body> <div> <input t…
2021/09/11 21:22
【JavaScript】要素を生成しリストを作ろう

1週刊がやっと終わりましたね(^o^) 今週は忙しい日々でくたくたです(笑) さて今日はJavaScriptを用いてリストを生成する方法をお伝えします。まずはindex.htmlを用意します。 index.html <!DOCTYPE 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"> <ti…
2021/09/10 22:22
【JavaScript】画面をロードするごとに表示する画像を切り替えよう

最近仕事が忙しく今日もギリギリの更新になってしまいました。これから寒くなっていくので体調には気をつけていきましょう！今日は画面をロードするごとに画像が切り替わる仕組みをお伝えします。まず画像を3枚用意してください。種類はなんでもOKです。画像名はimg01.jpg、img02.jpg、img03.jpgとします。次にindex.htmlを作成します。 index.html (完成版) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con…
2021/09/09 23:53
【JavaScript】Ajaxを使ってJSONデータを受信しよう

楽天ブックスこんばんは。今日も雨が振りましたね。ただ秋に突入しだんだんと過ごしやすい気候になってきました。さて、今日は少し難しいのですがAjax通信を用いたコードを展開します。まず2つファイルを用意します。(コピペしてお試しください) cakes.json [ { "name": "ショートケーキ", "price": "300円" }, { "name": "チョコレートケーキ", "price": "400円" }, { "name": "ミルクレープ", "price": "500円" } ] index.html <!DOCTYPE html> <html> <head> <m…
2021/09/08 23:20
【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編2)

おまたせしました！今日はPug編の2回目です。今日はPugを使った基礎的な記法をご紹介いたします＼(^o^)／ 1回目では環境構築の記事を書いているのでまだの方はぜひ見ておいてください！ frontendblog.hatenablog.com まずはフォルダにsrc/pug/というディレクトの下にindex.pugというファイルを作成します。続いてPugに下記の記述をします。 doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge")…
2021/09/07 21:48
【JavaScript】外部のJSファイルからモジュールを呼び出す方法

こんばんは！今日は一日雨でジメジメした日が続きますね。まだ週初めなので頑張っていきましょう！さて、今日は JSファイルをモジュールとして呼び出す方法を紹介します。まずは下記階層のフォルダを用意してください。 dist └index.html └js └script.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部モジュールの読み込み</title> </head> <body> <p id="target"></p> <script type="module"> import { s…
2021/09/06 23:07
【JavaScript】タイマー機能を作ってみよう

今日は簡単なタイマーを作ってみようと思います。先ずはHTMLファイルをご用意ください。 <!DOCTYPE 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> <div id="…
2021/09/05 12:23
【JavaScript】チェックボックスにチェックが付いたらボタンを押せる仕組みを作る

こんばんは！今日も雨で毎日ジメジメしてますね。さて、今日はチェックボックスにチェックをいれたらボタンを押せる仕組みを作りたいと思います。よく問い合わせの送信フォームにあるやつですね＼(^o^)／まずはHTMLを用意しましょう！ <!DOCTYPE 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-sca…
2021/09/04 21:51
【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編1)

皆さんこんばんは(^^)今週ずっと雨で寒い日が続いてますね。今日はHTMLを効率的に書く方法をお伝えします。2回に分けて紹介するのでぜひお試しください。 HTMLを効率的に書く方法としてPugという記法があります。閉じタグを意識せずにかけるのでコーディングスピードのアップが期待できます。 PugはコンパイルしてHTMLに変換するので今日は環境の構築方法をお届けします。 npm-practice ├ src │ ├ pug まずは上記のようなディレクトリを用意します。 npm-practiceの配下にsrcフォルダを置きその下にpugフォルダを置きます。 npm-scriptsのインストール…
2021/09/03 23:04
【WordPress】共通箇所のテンプレート化する方法

皆さんこんばんは。今日はずっと雨で肌寒い日が続いてますね。今日はwordpressで共通のテンプレートファイルを作る方法をご紹介します。 wordpressで構築をしていると何度も同じ記述はナンセンスです。そこで共通ファイルを作成するにあたり一つディレクトリを用意します。 includes └header.php └footer.php 上記のファイルに共通部分を貼り付けパーツファイルを作ります。そして呼び出したいファイルで下記の記述をします。 header.phpの呼び出し <?php get_template_part('includes/header')?> footer.phpの…
2021/09/02 23:03
【JavaScript】打った文字を画面に出力してみよう

今日は実際にキーボードで打った文字を画面に出力するプログラミングをご紹介します。まずHTMLファイルをご用意ください＼(^o^)／ ※コピペしてHTMLファイルに貼り付けてください。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>タイピング</title> </head> <body> <div id="target"></div> </body> </html> これでHTMLファイルは完了です。次にbodyの閉じタグ前にscriptタグを挿入します。 <!DOCTYPE html> <html> <head> …
2021/09/01 23:00
【WordPress】ディレクトリとURLを表示するテンプレートタグ

今日は画像やURL設定時によく使うテンプレートタグの紹介です。 WordPressではディレクトリを明示するタグがあります。 ▼ページリンク設定 href = "<?php home_url()?>/○○○/○○○" このようにタグの後ろにディレクトリを明示することでリンクの設定が可能です。 ▼画像の表示 src = "<?php echo get_template_directory_uri();?>/○○○/○○○" 画像の出力にはget_template_directory_uriを利用します。テンプレートタグは積極的に使い方を覚えていきたいですね。ブログ始めました！よろしければ見て…
2021/08/31 22:36
【WordPress】投稿日時を表示させるテンプレートタグ

WordPressで投稿日時を表示させるテンプレートタグをご紹介します。投稿日時を表示させるタグはいくつかありますが下記をよく利用します。 <?php the_time(get_option('date_format'));?> the_timeをよく利用します。パラメータには引数を取りget_optionメソットで日付の表示形式を取得します。詳しくはこちらをご確認ください。関数リファレンス/get option - WordPress Codex 日本語版ブログ始めました！よろしければ見ていってください！https://t.co/5oZys8GAIq#フロントエンジニア #WEB制…
2021/08/30 23:48
【WordPress】投稿記事の文だけループを回す構文

皆さんこんにちは(^^)今日はWordPressでよく使う構文でループというものがありご紹介したいと思います。ざっくり構文はこんな感じです。 <?php while(have_posts()): the_post();?><p><?php the_title();?></p><?php endwhile ?> またここで重要なのが`the_post()`を必ず記述するということです。記述しないと無限ループとなりやがてブラウザが落ちてしまいます。 <?php while(have_posts()): ?> <p><?php the_post()));?><?php the_title();?>…
2021/08/30 09:46
【WordPress】投稿があった場合に表示させるための分岐の構文

WordPressでは投稿があるかないかを判別してあれば投稿をだすことができる構文がある。下記は基礎的な内容のため理解は必須。 <?php if(have_posts): ?>投稿があればここが表示される<?php else: ?>投稿がないときはここが表示される<?php endif;?> お名前.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 月額968円からのパワフルで高速なクラウドレンタルサーバー https://px.a8.net/svt/ejp?a8mat=3HIU7M+8SQMLU+3JTE+5YZ77━━━━━━━━━━━━━━━━━━━━━━━━━━…
2021/08/29 23:45