ki-hi-ro.com

DAILY JOURNAL

HTML・CSS

34記事の記録。

2022年12月

  1. フリーランスWEB制作、駆け出しのときに作成した模写サイトを公開します。

    私は、2019年末にプログラミングスクールTECH::EXPERTを経験した後、2020年5月ごろ2つの模写コーディングを行いました。 そのサイトを公開したいと思います。 MUJI HOTEL GINZA https://ki-hi-ro.com/reproduce/Muji-Hotel/ ユーザー名パスワードkhirokhiro Workship https://ki-hi-ro.com/reproduce/Workship/ ユーザー名パスワードkhirokhiro 番外編: はにわまんさんのコーディング 模写以外にも、Webコーダーのはにわまんさんが販売していた「コーディング練習」の教材を購入して作成したサイトがありました。 デザインカンプURL…

  2. Vue.jsとjQueryの違い

    Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが確認できます。 See the Pen jQuery by Shibata Hiroki (@khiro-enginner) on CodePen. jQueryの場合 jQueryの場合を見ていきましょう。 HTML HTMLでは、以下の3点を書いています。 入力欄 追加ボタン テキストが追加される場所 See the Pen jQueryでテキス…

2022年11月

  1. 途中でヘッダーの高さが変化して固定される動き

    ローカル環境で、スクロールすると途中でヘッダーの高さが変化して固定される動きを作成しました。 作成したヘッダーの動き PCで、スクロール量がヘッダーの高さを超えるとヘッダーがゆっくりと下がって、固定される動きを作成しました。 スクロール前 スクロール量がヘッダーの高さを超えた後 ヘッダーの動きの作成方法 HTMLJSCSS HTML HTMLは、ヘッダーにidを追加しました（後で、JSで使用します）。 <header id="header" class="header"> JS header-fix.jsという名前で、以下のJSを作成しました（WordPressを使用しているので、jQueryでカプセル化しています）。 jQuery(functi…

  2. ローディングアニメーションを作成してみた

    年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは？ こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのことです。 https://www.united-arrows.co.jp/ https://www.united-arrows.co.jp/ 今回やってみたこと 当サイトで、画面読み込み時にローディングアニメーションを行ってみました。 作成手順 ロゴの作成 HTMLの配置 SASSの記述 JSの記述 ロゴの作成 adobe XDでロゴを作成…

  3. wp show posts

    先ほどクラウドワークスでこのようなお仕事がありました。 私は「wp show posts」というプラグインを使ったことがなかったので、使ってみたいと思います。 wp show postsはどんなプラグイン？ 記事一覧を作成できるプラグインです（プラグインのページはこちら）。 プラグインを有効化してみた wp show postsを有効化したら、サイドバーに表示されました。 WP管理画面 サイドバー 記事一覧を作成するための流れ wp show postsで記事一覧を作成する大まかな流れはこちらです。 どんな記事を表示させるのかを設定する どのページに表示させるのかを設定する 記事一覧の見た目を調整する STEP1: どんな記事を表示させるのかを設定する…

  4. レスポンシブコーディングではコンテナをしっかりと設定しよう

    私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大きい画面などの様々な画面幅に対応させるコーディング手法です。 レスポンシブコーディングを行う上で重要なことはいくつかありますが、この記事では、コンテナをしっかりと設定しましょうというお話をしていきます。 コンテナとは 例えば、MUJI HOTEL GINZAの客室ページを見ていきましょう。 https://hotel.muji.com/ginza/ja/rooms/ コンテナは、コンテンツのレイアウトを整えるのに使われます。 MUJI HOTELの客室ページでは、ヘッダー・客室・フッターの3箇所で l-contai…

2022年9月

  1. display: grid; の基礎

    私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親要素のクラス名 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } 以下のようなレイアウトを実現したわけですが、あまりdisplay: gridについて理解しきれていないので、ネットの情報を調べ、本記事でアウトプットしたいと思いました。 display: gridの基本 格子状に子要素を配置していくのがdisplay: gridの基本的な考え方です。 本記事では以下のようなHTMLに対してCSSを当…

2022年8月

  1. 有料老人ホームのサイトにコンテンツを追加しました

    地元名古屋のWEB制作会社で以前からお世話になっている担当者の方からchatworkで「有料老人ホームのサイトのコンテンツ追加のコーディングを行ってほしい」というご依頼を受けました。 コーディング内容 すでに稼働している本番サイトの下層にdevというフォルダを作成して、そこにファイル一式を配置し、そのテスト環境で作業を行いました。 今回のサイトはWordPressなどのCMSは使用していませんでした。 テスト環境には、no-indexを追加しgoogleにクロールされないようにしました。 追加したコンテンツは、受賞歴・エリア・お客様へ・お問い合わせコンテンツです。 XDで作成されたデザインを参考にコーディングしました。 受賞歴コンテンツ 受賞歴は、すで…

  2. contact-form7の申し込みフォームで表にチェックボックスを追加する方法

    先日、contact-form7の申し込みフォームで、表の中にチェックボックスを追加したいがやり方が分からないから困っているというご相談を受けました。 実際にWordPressにログインして1時間弱調べたのですが、やり方が分からず、納期が迫っている仕事もあったので結局対応をお断りすることになってしまいました。 後日実現できたので、方法を書いていきます。 今回実現できなかったご要望 表があり、その下にそれぞれのチェックボックスにチェックを入れるという状態で、表の中にチェックボックスを持ってきたいというご要望でした。 ご相談時の状態 講座内容の表に書いてある講座の中から自分が受けたい講座を探して、お申し込み講座（必須）のチェックボックスにチェックを入れて、…

  3. 日本地図にリンクを設定する方法

    HTML Imagemap Generatorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアなので、東海3県の地図を使用していきます。 ※このイラストは、こちらのフリー素材を使用して作成しました。 サンプルサイト https://ki-hi-ro.com/sample/img-link/ それぞれの県をクリックしたら公式サイトに飛ぶという仕様にしました。 STEP1: 画像をドラックする HTML Imagemap Generator に画像をドラックして、登録します。 右側にHTMLが生成されました。 STEP2: 多角形を描いていく 右上の「多角形を描く」をクリックして、愛知・岐阜・三重の形状に沿…