会員登録後、有料プランで広告を非表示に
詳しくはこちら
フロントエンド(マークアップが中心)の知識についての記事を書いていきます。 HTML / CSS / Sass / jQuery やレスポンシブデザイン、Wordpressなどについてです。
khiroWebエンジニア(@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のテンプレ
khiroWebエンジニア(@khiro14726723)です。Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。 今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。(本文から引用) また、Bootstrapの参考書はこちらがおすすめ。僕は、Bootstrapを使ってWebサイトを作る時に辞書的に使ってます。Bootstrap 4 フロントエンド開発の教科書作者:WINGSプロジェクト 宮本麻矢,WINGS…
khiroWebエンジニア(@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/…
khiroWebエンジニア(@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…
khiroWebエンジニア(@khiro14726723)です。実はわたくし、実用英語検定準1級を持っているため、それを活かして英語ドキュメントの解説を書いてみようかと思いました。それでは始めていきます。bootstrapの公式サイトのExampleに、Gridという項目がありました。 Multiple examples of grid layouts with all four tiers, nesting, and more. 全ての4段や入れ子などを備えたグリッドレイアウトの複数の例 (「bootstrapって何？」という方は、こちらの記事が参考になるかと思います。)こちらの本もおすす…
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サーバーにログインしている状態から始めます。 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 …
GitHub Desktopでローカルファイルを管理する方法
GitHub Desktopを使えば、ローカル環境にあるファイルをGitに簡単に紐づけることができます。例えば、git-sampleというフォルダをGitに紐づけたいとします。GitHub Desktopを開き、左上の部分をクリックしましょう。Addをクリックすると、3つの選択肢が出てきます。一番下をクリックするとモーダルが表示されます。Chooseを選択すると、ファイルボックスが開くので、git-sampleを開きましょう。まだGitHubでrepositoryを作成していないため、注意書きが表示されます。create a repositoryをクリックするとモーダルが出てきます。そのモーダ…
チュートリアルに沿って、Photoshopで目玉焼きを作ってみました。
HTML / CSS / jQuery を使って入力した値をグラフに表示したいと思ったことはありませんか？この記事では、chart.jsを使用してそのような仕様を実現する方法について解説しています。サンプルサイトも作りました。
jQueryでドロップダウンメニューを作る方法について、はてなブログに書きました。
【jQuery】ヘッダーメニューをクリックした時に、ページ内の指定位置に移動させる方法
【jQuery】メニュークリック時に、ページ内の指定位置までスクロールさせる方法
「レスポンシブデザインの時にjQueryのブレイクポイントってどうやって設定すればいいの？」という方へ。
制作物へのアクセス ユーザー名・パスワード khiro URL http://xs437226.xsrv.jp/cording-from-photoshop/ 所要時間 3時間20分→ エディターでファイルを作成してから、レスポンシブ化が完了するまでの時間を測りました。 全体キャプチャー MacBook Pro (画面幅1,440px) iPad Pro (画面幅1,024px) iPad (画面幅768px) iPhone7 (画面幅375px) Photoshopのデザインカンプ 背景 これまで私は、自分で学習するときには、実際のWebサイトを見ながら模写コーディングをしてきました。 しか…
【jQuery】ふわっと要素を出現させる方法
Wordpressのカスタムフィールド を、どのように使えばいいのかを解説しました。
背景画像について書きました。
サンプル Mac Book (横幅1,440px) iPad (横幅768px) iPhone7 (横幅375px) ソースコード HTML style.scss _mixin.scss SASSでブレイクポイントを設定する方法 定義する時 例 呼び出す時 例 サンプル http://xs437226.xsrv.jp/sample/sass-responsive/ ブレイクポイントが2つあって、コンテンツが1段 → 2段 → 4段と変化していきます。 Mac Book (横幅1,440px) iPad (横幅768px) iPhone7 (横幅375px) ソースコード HTML <!DOCT…
この記事を書こうと思った理由 確認すること 必要なファイルが読み込めているか 「slick.css」と「slick-theme.css」と「スライダーを動かすためのjQueryのファイル」 slick.min.js HTMLの記述方法が合っているか Javascript(jQuery)の記述方法が合っているか この記事を書こうと思った理由 先週、コーディングの仕事で、slickが動かなくて困っていました。 以前自分で作成したWebサイトでは、動かすことが出来ていたので、そのコードを元にして書いていきます。 確認すること 大きく分けて3つあります。 必要なファイルが読み込めているか HTMLの記…
はじめに CMSとは コーディングとの違い CMSを導入するメリット CMSのデメリット 参考にしたWebサイト はじめに 私は現在、CMSを更新する仕事をしています。 まだ開始2日目なので、CMSに親しみを持てるようにするため、一般的なCMSについてまとめてみたいと思いました。 CMSとは Contents Management System のことです。 コンテンツを管理する仕組みです。 代表的なオープンソースのCMSは、Wordpressです。 コーディングとの違い HTML / CSS でコーディングをして、作成したファイルをサーバーにアップロードすることでWebサイトを作ることは出来…
やってみたこと rootユーザーでログイン データベース一覧を表示する データベースを選択する テーブル一覧を表示する カラムを表示させる 特定のデータを表示させる カラムを表示する カラムを削除する カラムを追加する 特定のレコードを削除する 参考にしたもの やってみたこと rootユーザーでログイン 最初に、「mysql -u root」でmysqlにログインします。 データベース一覧を表示する 「show databases;」と入力すると、一覧が表示されます。 データベースを選択する 「use データベース名;」で、データベースを選択することが出来ます。 今回は、Expense_dev…
はじめに 人の顔を丸く切り出す 背景を作る 画像を背景の上に重ねる 画像を丸く切り抜く 参考にしたサイト はじめに 先週Photoshopを購入して基本操作は少し分かってきました。 なので、今回は画像を切り抜くということをやってみます。 人の顔を丸く切り出す この写真の男性を、Twitterのプロフィール画像のように切り出してみます。 背景を作る まずは、新規作成からカスタム(1000 × 1000px)を選択します。 そして、作成ボタンを押します。 作成ボタンを押した後の画面 アートボードが画面いっぱいに広がるように、ドラッグして調整します。 調整後の画面 画像を背景の上に重ねる ファイル、…
はじめに パネルを表示させる方法 レイヤーについて 画像を拡大・縮小する方法 正円を作る方法 図形の色を変える方法 文字のフォントを変える方法 おわりに 参考にしたサイト はじめに 先週Photoshopを購入しました。 それと同時に、エイクエント名古屋オフィスで開催されたイベント、「現役Webデザイナーに学ぶ"魅力的な"Webバナーの作り方」に参加してきました。 その時に学んだことがあったので、ブログを書いていきます。 また、Photoshopの基本に関する内容にも触れていこうと思います。 パネルを表示させる方法 メニューバーの「ウインドウ」をクリックします。 その後、表示させたいパネルの名…
はじめに ショートカット(Macの場合) 拡大・・・⌘ と + 縮小・・・⌘ と - 元の大きさに戻す・・・⌘ と 数字の0 操作中に発見したこと tabキーを押すと、オプションバーとツールバー、パネルが出現する 縦の線を調整することで、x軸方向のpxが分かる 移動ツールを選択しながら⌘を押すと、何かしらのpxが表示される カラーピッカー 要素の高さを測る方法 分からない用語 おわりに はじめに 先日、Photoshopを購入しました。 今日は、基本的な画面操作を学習したので、その一部をまとめます。 ちなみに、Photoshopの拡張子はpsdです。 ファイル名は、「〇〇〇〇.psd」となりま…
はじめに スライドの例 完成品 ファイルとその中身 ブラウザ 作り方 素材をブラウザに表示させる タイトル スライドとボタンの番号 スタイルを適応していく 画像を横並びにさせる ボタンの位置を決める ボタンの見た目をいい感じにする デフォルトの表示を設定する タイトルにスタイルを適応させる ボタンを押したら画像が切り替わるようにする はじめに 以前スライダープラグインのSlikerの記事を書きましたが、 khirok.hatenadiary.jp 今回は、Progate上級編を参考にして、jQueryで画像スライドを実装してみます。 スライドの例 メルカリの商品出品ページにあるようなこんなスラ…
この記事で作るもの 手順 素材のダウンロード ファイルを読み込む ファイルに必要なコードを書く オプションを指定するには スピードを遅くしたい時 カーソルを非表示にしたい時 カーソルを横並びにして、スタイルを変更したい時 参考にしたサイト この記事で作るもの このような自動でタイピングされるUIです。 株式会社いづつや本店様 (https://idutsuyahonten.jp/web/) 手順 素材のダウンロード Githubから素材をダウンロードして、開発中のディレクトリに配置する。 https://github.com/mntn-dev/t.js Download ZIPをクリックしてダ…
この記事で作りたいもの 動画素材を用意する ブラウザに動画を表示させる 最前面に要素を持ってくる 完成！ 参考にした記事 この記事で作りたいもの GrouwGroup株式会社 様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと思いました。 UIとはUser Interfaceの略で、ユーザーが目にする部分のことです。 動画素材を用意する フリー動画素材が手に入る Pixabay (https://pixabay.com/ja/videos/)からダウンロードします。 ダウンロードした動画ファイルを現在のディレクトリに配置します。 今回は…
はじめに 公式サイト 何ができるのか？ 費用は？ Illustratorとの違いは？ 個人的にやりたいと思ったこと HTML / CSS コーディング案件を受注するときに必要になる 参考にしたサイト はじめに Web制作の案件を見ていると、「Photoshopの経験必須！」と書かれていることがよくあるため、Photoshopについてインターネットで調べたことをまとめてみました。 公式サイト Adobe https://www.adobe.com/jp/products/photoshop.html?gclid=Cj0KCQiAm4TyBRDgARIsAOU75spi3It66Chza2R4F9…
擬似要素とは 具体的な活用例 横棒を追加する 画像やコードのタイトルをうっすらと表示させる アイコンを表示させる コメントボックスを作る 参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よくあったので、それについて書いていきます。 擬似要素とは cssで擬似要素を使うと、あたかもhtmlを追加したかのように見せることができます。 例えば、 こんなh1要素があったとしましょう。 cssで h1::before { content: "いつか"; } こんな記述を加えると このように文字が加わります。 h1::after…
今回作るもの 必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順 画像を表示させる モーダルを作成する 画像にカーソルを合わせた時の処理 おわりに 今回作るもの たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくるやつです。 html、css、jQueryを用いて実装していきます。 必要なファイルとその中身(完成ソースコード) html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="https://ajax.google…
はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが最適かと思います。 しかし、スマホの場合 このようにした方が、ユーザーにとって使いやすくなるでしょう。 これをどのように実装すれば良いのかを書いていきます。 筆者の環境 OS・・・Mac ブラウザ・・・Google Crome スマホ用の画面・・・Cromeの検証ツールを利用しています。 ヘッダーアイコンを作成す…
faviconとは 公式サイトにアクセスする イラストを書く or 画像をアップロードする 画像をアップロードする場合 ダウンロードする 読み込ませる ブックマークをファビコンのみ表示させる方法 参考にしたサイト faviconとは ブラウザタブの左側に付いているアイコンのことです。 公式サイトにアクセスする https://www.favicon.cc/ イラストを書く or 画像をアップロードする 画像をアップロードする場合 「Import Image」をクリックします。 ファイルを選択して、Uploadボタンを押します。 すると、ファビコンのタブにリアルタイムでアイコンが表示されているこ…
はじめに 準備をする タブレットの画面幅 スマホの画面幅 おわりに 参考にしたサイト はじめに 私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。 MacBook(画面幅が1440px)では、このように表示されているページがipad(画面幅が768px)で見てみると、レイアウトが崩れてしまいます。iPhone(画面幅が375px)の場合も同様です。レスポンシブデザインを行えば、それぞれのデバイス(スマホ・タブレット・PC)に最適化された表示をすることができます。 準備をする まずは、HTMLのheadタグ内に <meta name="viewport" …
素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、SERVICEとABOUTのページがあります。 画面 HTML <!DOCTYPE html> <html> <head> <!-- リセットCSSの読み込み --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com…
パターン1 HTML CSS パターン 2 CSS パターン3 CSS パターン4 CSS hover時にマーカーが引かれるようにする CSS 参考にしたサイト HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカーが引かれるようにする方法について書きます。 パターン1 HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>これは、重要です。</h1> </body> </html> C…
完成イメージ 使用するファイル 土台を作る 画面(1/4) 左側が欠けた半円を重ねる 画面(2/4) 内側の円を作成する 画面(3/4) 56%を表現する 画面(4/4 → 完成) ソースコード index.html style.css 完成イメージ HTML / CSS で、このようなグラフが出来上がるまでの過程を書きます。 使用するファイル index.html、style.cssです。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css…
完成イメージ 1 カレンダーの背景を作る index.html style.css 画面 2 表を利用する index.html 画面 3 カレンダーを背景に収める style.css 画面 4 カレンダーを装飾する 5 仕上げ 画面(完成) 参考にしたサイト 完成イメージ この記事では、これを作っていきます。 編集するファイルは、 index.html style.css です。 1 カレンダーの背景を作る index.html <div class="calendar-wrapper"> </div> style.css .calendar-wrapper { height: 400px;…
アコーディオンとは？ 筆者の環境 準備 ディレクトリ・ファイルの作成(ターミナルを使用) HTML 画面(1/10) CSS 画面(2/10) jQuery jQueryの読み込み確認 1つのアコーディオン 答えを非表示にする 画面(3/10) 答えを隠す 画面(4/10) 答えを表示させる 画面(5/10) 複数のアコーディオン 見た目を作る 画面(6/10) 画面(7/10) 画面(8/10) 個別にアコーディオンを発生させる 画面(9/10) + と - を置き換える 画面(10/10) アコーディオンとは？ クリックすると表示・非表示が切り替わる機能のことです。 例：Workship(…
モーダルとは 実装手順 フォルダなどを準備する ブラウザに最低限の表示をさせる モーダルの中身を作り込んでいく モーダルをカバーしている部分を作り込んでいく モーダルを表示させる モーダルを非表示にする モーダルとは 例えば、Twitterの投稿ボタンを押すと・・・ こうなります。 これが、"モーダル"です。 この記事では、このような"モーダル"を筆者の環境(Mac OS)で1から実装していく過程を公開します。 実装手順 フォルダなどを準備する ターミナルを開き、ホームディレクトリに「modal」というフォルダを作成します。 modalディレクトリに移動します。 html、css、jQuery…
「ブログリーダー」を活用して、hirokiさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
