3桁区切りを簡単に実装するコード

khiroWebエンジニア(@khiro14726723)です。ユーザーにフォームの入力をしてもらう時に、自動で3桁区切りの表示をする機能があったほうが良いですよね。その機能を、javascript（jQuery)で実装しました。とてもシンプルなコードです。サンプルサイト ki-hi-ro.com GitHub (ZIPファイルのダウンロード可) github.com 解説 1000と入力すると、1,000となります。 1000000（100万）の場合 8568645796325の場合 3桁ごとに , が付きます。HTML <div class="form-group"> <input ty…

HTML、Sass、bootstrap、jQueryのテンプレ

khiroWebエンジニア(@khiro14726723)です。Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。 今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。(本文から引用) また、Bootstrapの参考書はこちらがおすすめ。僕は、Bootstrapを使ってWebサイトを作る時に辞書的に使ってます。Bootstrap 4 フロントエンド開発の教科書作者:WINGSプロジェクト 宮本麻矢,WINGS…

【サンプルあり】ホバー時に画像が拡大するアニメーション

khiroWebエンジニア(@khiro14726723)です。このwordpressテーマで使われているような、画像にカーソルを当てた時の挙動はどのように実装すれば良いのでしょうか。 gyazo.com実際にサンプルサイトを作ってみました。 サンプル ki-hi-ro.com タブレット、スマホの場合は、タッチすると拡大します。 git hubのリポジトリ(Zipファイルのダウンロード可能) github.com bootstrapを使用しています。 キャプチャ動画 gyazo.com 解説 HTML <div class="img-wrap"> <img src="assets/img/…

【Mac】finderで使えるショートカット

khiroWebエンジニア(@khiro14726723)です。僕が実際に使ってみて便利だと思ったショートカットを、 6つ紹介します。商品紹介 最新モデル Apple MacBook Pro (13インチPro, 16GB RAM, 512GB SSDストレージ, Magic Keyboard) - スペースグレイ発売日: 2020/05/11メディア: Personal Computers1. 新しいタブを開くcommand + T gyazo.com2. タブ間を移動するcontrol + tab gyazo.com3. フォルダを開くcommand + ↓ gyazo.comフォルダB…

BootstrapのGrid Templateを解説します

khiroWebエンジニア(@khiro14726723)です。実はわたくし、実用英語検定準1級を持っているため、それを活かして英語ドキュメントの解説を書いてみようかと思いました。それでは始めていきます。bootstrapの公式サイトのExampleに、Gridという項目がありました。 Multiple examples of grid layouts with all four tiers, nesting, and more. 全ての4段や入れ子などを備えたグリッドレイアウトの複数の例 (「bootstrapって何？」という方は、こちらの記事が参考になるかと思います。)こちらの本もおすす…

Advanced Custom Fieldsの使い方

Advanced Custom Fieldsは、wordpressのカスタムフィールドを扱いやすくしたプラグインです。 カスタムフィールドって何？という方は、以下の記事が参考になるかと思います。初心者必見！WordPressで便利なカスタムフィールドとは？設定する手順とプラグインもまとめて紹介｜ferret 以下は記事から引用しました。 WordPressで「投稿」を作成する画面では、初期画面で「タイトル」と「本文」の2つがあります。 ここに、入力する情報を追加できるのがカスタムフィールドです。 それでは、Advanced Custom Fieldsの導入から画面上にカスタムフィールドの値を表…

子テーマの作り方

wordpressの既存テーマの子テーマを作成するのに、私が試した方法を紹介します。開発環境は以下の通りです。 テキストエディタ・・・Visual Studio Code サーバー・・・Xサーバーもともと有効になっていたテーマの子テーマを作成していきます。 目次 1. 子テーマのフォルダ を作成する 親テーマの名前を調べる 子テーマの名前を決める フォルダを作成する 2. style.cssを用意する 新規フォルダ作成 新規ファイル作成 必要事項をコメントアウトで記入する 3. ローカル環境のファイルをサーバー上にアップする 4 子テーマが認識正しく認識されない 5. functions.ph…

XサーバーにWordpressを設置する方法

Xサーバーにログインしている状態から始めます。 1.ファイル管理をクリック 2.public_htmlまで移動する 3.wordpressを設置するフォルダを作成する 4.サーバー管理をクリック 5.設定対象ドメインがあれば設定する 6.Wordpress簡単インストールをクリック 7.Wordpressインストールのタブをクリックし、先ほどのフォルダ名を入力する 8.4つの必要事項を記入する 9.インストールが終わった後の情報は保管しておくといいと思います。 10.管理画面のURLをクリック 11.先ほど登録した情報を入力してログインする 12.ログイン後 13.左上のホームアイコンをクリッ…

...と省略して表示させるには

CSSで以下の画像のような見た目を作る方法についてです。 サンプルサイトへのリンク ki-hi-ro.com サンプルサイトのgithubリポジトリ github.comCode → Download ZIP で、Zipファイルのダウンロードが可能です。 HTML <div class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text …