khiroWebエンジニア(@khiro14726723)です。ユーザーにフォームの入力をしてもらう時に、自動で3桁区切りの表示をする機能があったほうが良いですよね。その機能を、javascript（jQuery)で実装しました。とてもシンプルなコードです。サンプルサイト ki-hi-r…
khiroWebエンジニア(@khiro14726723)です。Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。 今回は、無料ダウンロードでき…
khiroWebエンジニア(@khiro14726723)です。このwordpressテーマで使われているような、画像にカーソルを当てた時の挙動はどのように実装すれば良いのでしょうか。 gyazo.com実際にサンプルサイトを作ってみました。 サンプル ki-hi-ro.com タブレット、スマ…
khiroWebエンジニア(@khiro14726723)です。僕が実際に使ってみて便利だと思ったショートカットを、 6つ紹介します。商品紹介 最新モデル Apple MacBook Pro (13インチPro, 16GB RAM, 512GB SSDストレージ, Magic Keyboard) - スペースグレイ発売日: 2020/05…
khiroWebエンジニア(@khiro14726723)です。実はわたくし、実用英語検定準1級を持っているため、それを活かして英語ドキュメントの解説を書いてみようかと思いました。それでは始めていきます。bootstrapの公式サイトのExampleに、Gridという項目がありまし…
Advanced Custom Fieldsは、wordpressのカスタムフィールドを扱いやすくしたプラグインです。 カスタムフィールドって何？という方は、以下の記事が参考になるかと思います。初心者必見！WordPressで便利なカスタムフィールドとは？設定する手順とプラグイン…
wordpressの既存テーマの子テーマを作成するのに、私が試した方法を紹介します。開発環境は以下の通りです。 テキストエディタ・・・Visual Studio Code サーバー・・・Xサーバーもともと有効になっていたテーマの子テーマを作成していきます。 目次 1. 子テ…
Xサーバーにログインしている状態から始めます。 1.ファイル管理をクリック 2.public_htmlまで移動する 3.wordpressを設置するフォルダを作成する 4.サーバー管理をクリック 5.設定対象ドメインがあれば設定する 6.Wordpress簡単インストールをクリック 7.Wo…
CSSで以下の画像のような見た目を作る方法についてです。 サンプルサイトへのリンク ki-hi-ro.com サンプルサイトのgithubリポジトリ github.comCode → Download ZIP で、Zipファイルのダウンロードが可能です。 HTML <div class="ellipsis-text">text text text text text text text te</div>…
GitHub Desktopを使えば、ローカル環境にあるファイルをGitに簡単に紐づけることができます。例えば、git-sampleというフォルダをGitに紐づけたいとします。GitHub Desktopを開き、左上の部分をクリックしましょう。Addをクリックすると、3つの選択肢が出て…
チュートリアルに沿って、Photoshopで目玉焼きを作ってみました。
HTML / CSS / jQuery を使って入力した値をグラフに表示したいと思ったことはありませんか？この記事では、chart.jsを使用してそのような仕様を実現する方法について解説しています。サンプルサイトも作りました。
jQueryでドロップダウンメニューを作る方法について、はてなブログに書きました。
【jQuery】メニュークリック時に、ページ内の指定位置までスクロールさせる方法
「レスポンシブデザインの時にjQueryのブレイクポイントってどうやって設定すればいいの？」という方へ。
制作物へのアクセス ユーザー名・パスワード khiro URL http://xs437226.xsrv.jp/cording-from-photoshop/ 所要時間 3時間20分→ エディターでファイルを作成してから、レスポンシブ化が完了するまでの時間を測りました。 全体キャプチャー MacBook Pro (画面…
【jQuery】ふわっと要素を出現させる方法
Wordpressのカスタムフィールド を、どのように使えばいいのかを解説しました。
背景画像について書きました。
サンプル Mac Book (横幅1,440px) iPad (横幅768px) iPhone7 (横幅375px) ソースコード HTML style.scss _mixin.scss SASSでブレイクポイントを設定する方法 定義する時 例 呼び出す時 例 サンプル http://xs437226.xsrv.jp/sample/sass-responsive/ ブレイ…
この記事を書こうと思った理由 確認すること 必要なファイルが読み込めているか 「slick.css」と「slick-theme.css」と「スライダーを動かすためのjQueryのファイル」 slick.min.js HTMLの記述方法が合っているか Javascript(jQuery)の記述方法が合っている…
はじめに CMSとは コーディングとの違い CMSを導入するメリット CMSのデメリット 参考にしたWebサイト はじめに 私は現在、CMSを更新する仕事をしています。 まだ開始2日目なので、CMSに親しみを持てるようにするため、一般的なCMSについてまとめてみたいと…
やってみたこと rootユーザーでログイン データベース一覧を表示する データベースを選択する テーブル一覧を表示する カラムを表示させる 特定のデータを表示させる カラムを表示する カラムを削除する カラムを追加する 特定のレコードを削除する 参考にし…
はじめに 人の顔を丸く切り出す 背景を作る 画像を背景の上に重ねる 画像を丸く切り抜く 参考にしたサイト はじめに 先週Photoshopを購入して基本操作は少し分かってきました。 なので、今回は画像を切り抜くということをやってみます。 人の顔を丸く切り出…
はじめに パネルを表示させる方法 レイヤーについて 画像を拡大・縮小する方法 正円を作る方法 図形の色を変える方法 文字のフォントを変える方法 おわりに 参考にしたサイト はじめに 先週Photoshopを購入しました。 それと同時に、エイクエント名古屋オフ…
はじめに ショートカット(Macの場合) 拡大・・・⌘ と + 縮小・・・⌘ と - 元の大きさに戻す・・・⌘ と 数字の0 操作中に発見したこと tabキーを押すと、オプションバーとツールバー、パネルが出現する 縦の線を調整することで、x軸方向のpxが分かる 移動ツー…
はじめに スライドの例 完成品 ファイルとその中身 ブラウザ 作り方 素材をブラウザに表示させる タイトル スライドとボタンの番号 スタイルを適応していく 画像を横並びにさせる ボタンの位置を決める ボタンの見た目をいい感じにする デフォルトの表示を設…
この記事で作るもの 手順 素材のダウンロード ファイルを読み込む ファイルに必要なコードを書く オプションを指定するには スピードを遅くしたい時 カーソルを非表示にしたい時 カーソルを横並びにして、スタイルを変更したい時 参考にしたサイト この記事…
この記事で作りたいもの 動画素材を用意する ブラウザに動画を表示させる 最前面に要素を持ってくる 完成！ 参考にした記事 この記事で作りたいもの GrouwGroup株式会社 様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと…
はじめに 公式サイト 何ができるのか？ 費用は？ Illustratorとの違いは？ 個人的にやりたいと思ったこと HTML / CSS コーディング案件を受注するときに必要になる 参考にしたサイト はじめに Web制作の案件を見ていると、「Photoshopの経験必須！」と書かれ…
