投稿日：2020-10-19T22:53:32+09:00

【jQuery】モーダル（表示・非表示）、送信ボタンを押すとwindowアラートを表示させる。

はじめに

　年々、様々な企業・地方公共団体のサイトの作りこみが洗練されてきている気がします。ちょっとした地元のお店でも動的でリッチなホームページを持っていたり。
　そのようなサイトを作るうえで必須のフロントエンド言語の力をつけたいと感じたため、今回はjQueryの記事を上げたいと思います。
　今回は、「モーダル」と「windowアラート」の作成に焦点を当てたいと思います。

実装前のサイト（before）

下図のようなラーメン屋さんのサイトに実装していきます。
お問い合わせフォームをモーダルで表示・非表示できるようにします。

※「送信ボタン」には、すでにjQueryの機能の１つであるmouseenterとmouseleaveが実装されています。これについての説明は割愛します。

STEP１：jQueryと.jsファイルの読込

まず、jQueryの読込をhtmlファイルに記入します。また、Javascriptライブラリの１つであるjQueryのコードは、script.jsファイルに別途記述します。
<!DOCTYPE html>
<html>
  <head>
    
  <head>
  <body>
    

    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
    </script>
    
    <script src = "script.js"></script>
　</body>
</html>
STEP２：それぞれのコードを書く

　ここからは、.html、.css、.jsそれぞれにコードを書いていきます。

STEP２－１：html

重要なポイント
　・「お問い合わせフォームはこちら」というボタンを新たに設け、それをdivタグで囲み、付与したidでクリックイベントを発火させるようにする。
　・表示されたモーダルを閉じるためのイベントとして、「x」ボタン（閉じるボタン）を新たに設ける。
　※決まった箇所で表示・非表示をさせるため、classではなくidを付与することを推奨します。
　・「送信」ボタンを押すと、windowアラームが出るよう、上記と同様にボタンをdivタグで囲みidを付与します。
<!DOCTYPE html>
<html>
  <head>
    
  <head>
  <body>
    

    
    
      <div id="inquire_show" class="submit"><button type="submit" class="inquire_btn">お問い合わせフォームはこちら</button></div>
    
        <div id="inquire_modal" class="inquire_modal_wrapper">
          <div class="modal">
            
            <div id="close_modal">
              <i class="close_btn">×</i>
            </div>
             
              <article class="content">
               
              </article>
            </div>
        </div>
    </div>
    <footer class="footer">
      
    </footer>
  </div>

</body>
</html>
STEP２－２：css

重要なポイント
　・当然のことながら、モーダル本体は非表示状態がデフォルトであるため、display: none;にすること。
　・クリックイベントで発火した際に、最上面に浮かび上がらせるため、z-index: 100；にする。（100でなくても良いが、他よりも高い値にすること。）
　・閉じるボタン「x」はそのままだと小さすぎるので、font-sizeは大きめに。
　・問い合わせフォームの幅は、こまめにプレビューしてみながら調節すること。

※normalize.cssの記述は割愛します。
　normalize.cssとはリセットcssの一部です。【参考URL】https://magazine.krowl.jp/3441/
/*「問い合わせフォームはこちら」ボタン*/
.inquire_btn {
  background-color: #cf5555;
  padding: 10px 20px;
  color: white;
}
/*モーダル本体の背景色やz-indexの設定。もちろん、displayはnoneにする。*/
.inquire_modal_wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
/*問い合わせフォーム本体の背景色や幅などの設定。*/
.modal {
  position: absolute;
  top: 20%;
  left: 25%;
  background-color: #e6ecf0;
  padding: 20px 0 20px;
  border-radius: 10px;
  width: 800px;
  height: auto;
  text-align: center;
}
/*閉じるボタン「X」の設定。右上に設置したり、ボタンを大きくしたり。*/
.close_btn {
  margin-right: 5px;
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
  font-size: 3rem;
}
STEP２－３：js
$(function() {
 //モーダルの表示・非表示
  $('#inquire_show').on('click', function(){
    $('#inquire_modal').fadeIn();
  });
  $('#close_modal').on('click', function(){
    $('#inquire_modal').fadeOut();
  });
 //「送信」ボタンを押したときにアラームを表示するイベント。
  $('.btn').on('click',function(){
      window.alert("お問い合わせくださりありがとうございます！");

  //本旨から外れますが、「送信」ボタンの色をマウスを乗せたり外すと変えるイベント
  $('.btn').on('mouseenter', function(){
    $(this).css('background-color', '#873955');
  })
  .on('mouseleave', function(){
    $(this).css('background-color', '#0074bf');
  });
  });
});
実装後のサイト（after）

参考（github）

　今回のページについては、github上にも掲載しました。よかったら覗いてみてください。
　https://github.com/enjoy-self-inquiry/day3_kadai_option.git

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T21:44:52+09:00

【初心者でもわかる】ちょっと浮くボタンの作り方と、押した風のボタンの作り方

どうも7noteです。2種類の動きアリのボタンの作り方。

ランディングページ（LP）や訴求が強いページなどでもよく使われる、動くボタンを作っていきます。
今回は2種類のボタンを作っていきます。

ふわっと浮くボタン

押した風になるボタン

ふわっと浮くボタンの作り方
index.html
<span class="btn">ふわボタン</span>
style.css
.btn {
  color: #333;
  font-weight: bold;
  background: #E5E5EE;           /* 背景色を薄い茶色 */
  border-radius: 50px;           /* 角丸にする */
  padding: 10px 30px;            /* 上下、左右に余白を指定 */
  transition: .5s;               /* ふわっとした動きにかかる時間。.5s ＝ 0.5秒 */
  display: inline-block;         /* インライン要素（imgやinputを除く）だとtransformが効かないため */
}

.btn:hover {
  cursor: pointer;               /* カーソルを指の形にする */
  background: #D5D3DC;           /* 背景色をちょっと濃い茶色 */
  box-shadow: 0 3px 3px 0px rgba(0,0,0,0.3); /* 真下に影を付ける */
  transform: translateY(-3px);   /* 上方向に3px動かす */
}
押した風になるボタン
index.html
<span class="btn">押込ボタン</span>
style.css
.btn {
  color: #333;
  font-weight: bold;
  background: #E5E5EE;
  border-radius: 50px;
  border-bottom: solid 3px #D5D5DE; /* 下線でボタンの淵を付ける */
  padding: 10px 30px;
  display: inline-block;
}

.btn:hover {
  cursor: pointer;
  background: #D5D3DC;
  border: none;                     /* 下線を消す */
  transform: translateY(3px);       /* border分、下に移動させる */
}
まとめ

ボタンはサンプルソースを作られている方がたくさんおられるので、気に入ったボタンのソースをコピーして自分で色や動き、形を微調整できればいいかなと思います。
コピペしたものをそのまま使ってしまうと他のコンテンツとのバランスが取れなくなってしまったりするので、自分で多少は調整できる方がバランスのとれた綺麗なサイトが作れるのかなと思います！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T15:49:52+09:00

【HTML&CSS】スクロールバーの表示を切り替える

プログラミング勉強日記

2020年10月19日
overflowの使い方を理解してなかったのでまとめる。

overflowとは

　要素の領域内に収まりきらないときに表示方法を決めるプロパティ。この要素をブロック整形コンテキストといい、div要素がそれに該当する。
　overflowは横方向を指定するoverflow-xと縦方向を指定するoverflow-y、両方を指定するoverfloeがある。設定値は表の通り。

設定値説明

visible 表示する(規定値)

hidden 表示しない(スクロールバーは表示されないがスクロール可能)

clip 表示しない(スクロールバーも表示されなくスクロール不可)

scroll 内容が収まらない場合にはスクロールバーを表示

auto ブラウザに依存する

サンプルプログラム
HTMLファイル
<div class="wrapper">
  <div class="contents">
    あいうえお<br>
    かきくけこ<br>
    さしすせそ<br>
    たちつてと<br>
    なにぬねの<br>
    はひふへほ<br>
    まみむめも<br>
    や　ゆ　よ<br>
    らりるれろ<br>
    わ　を　ん
  </div>
</div>
CSSファイル
.wrapper {
  height: 200px;
  width: 300px;
  overflow-y: scroll;
}
.contents {
  background-color: rgb(181, 244, 247);
}
参考文献

スクロールバーの表示・非表示を調整する
 HTMLでスクロールバーを表示・非表示する方法を現役エンジニアが解説【初心者向け】

設定値	説明
visible	表示する(規定値)
hidden	表示しない(スクロールバーは表示されないがスクロール可能)
clip	表示しない(スクロールバーも表示されなくスクロール不可)
scroll	内容が収まらない場合にはスクロールバーを表示
auto	ブラウザに依存する

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T14:43:41+09:00

hamlからhtmlで出力される結果を改行されずに書く方法(小ネタ)

■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・haml,htmlの基礎知識が増える
・検証ツールでの確認がしやすくなる

■情報元（有益な情報ありがとうございます）
haml でインライン要素の中を改行して書いて1行で出力する

■ 例

hamlでこんな感じで書くと

この様に検証ツールでは確認できますが

この様に、%h5.time<>、%span<>と記述すると

余分な改行が消え、見えやすくなります！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T11:59:28+09:00

【Bootstrap】グリッドシステムを入れ子で実現

今回は皆さん、ご存知 Bootstrap についてです。

世界で最も人気の CSS フレームワーク。
この芸能界の次に入れ替わりが激しいと言われる ITの世界において、
CSS フレームワーク人気の王座に Bootstrap は、開発当初の 2011年から座り続けられておられます。

そして人気の大きな理由の一つにグリッドシステムがあります。
そうです、画面サイズによってウニャウニャする、あれです。
（画面を横幅のサイズごとに、12分割にし、指定した数字分の範囲を確保する仕組みですね。）

今回は確保した範囲内でさらに 12分割をする方法をご紹介します。
まず、画面を普段通りのやり方で 3分割にします。
画面を 3分割するには、全部で 12分割するうち 4分割分を確保すればOKですね。
bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>
さぁ今回はさらに、この真ん中の白い部分を 3分割します。
まず、3分割したいブロック要素の中に、row クラスのブロック要素を記述します。
bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>
そして、さらに row クラスのブロック要素の中に 3分割したブロック要素を記述します。
bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                    <div class="col-4" style="background-color: yellow; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: red; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: black; height:100vh">
                    </div>
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>
これで完了です。

じゃん！！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T11:35:56+09:00

未経験からPHP+MySQLではじめてwebアプリの作成をしてみました。。

記事の概要

2020年3月からプログラミング学習を開始し、初めてwebアプリを作成したので、その記録となります。
用語の使い方やコーディングなど認識違いございましたら、ご指摘していただけると幸いです。

アプリ概要

学習の記録、記録した学習内容の閲覧やデータの集計を行える学習管理アプリ

アプリurl : https://studydiaryportfolio.herokuapp.com/TopPage.php
Git hub : https://github.com/mu7kata/yuki_Portfolio

▼制作期間

・２９日　８５h

【内訳】
要件定義、WF作成：8h
コーディング：53h
デプロイ：23.5h　

▼制作環境

　【言語】
　　HTML、CSS（レスポンジブ未対応）、PHP 7.3.9、JavaScript、jQuery2.2.2
　【DBMS】
　　MySQL 5.7.26
　【フレームワーク】
　　なし
　【開発環境】
　　MacOS Catalina 10.15.5
　【バージョン管理】
　　Git 2.24.3
　【本番環境】
　　Heroku
↓Herokuでのデプロイまでの流れはこちらにまとめました。
https://qiita.com/kata_kata_1997/items/973fc1f31795ebf6fcfa

アプリを作成する目的

▼PHPを学習していく中で下記項目についての理解を深めるため

・関数の定義〜呼び出し
・GET送信とPOST送信
・セッション
・条件分岐(if文)と繰り返し処理(foreach文)などの基本構文
・SQL文
・DB接続（try~catchを用い、成功しているかどうか判断）
・DBデータの編集、画面への出力

なぜ学習管理アプリか

プログラミング学習をしていくなかで、学習状況の把握をすることで、モチベーションにつながると思ったから。
自分自身も実際に、学習した履歴をエクセルなどで管理していたが、より簡単に学習の管理ができないかと感じたから

主な機能

・ログイン機能
・学習内容の保存機能
・学習内容の表示機能
・学習内容の編集機能
・メモ機能

機能詳細

▼ログイン機能

・ユーザー情報の取得
→PDOクラスを用いてDBへ接続。

▼学習内容の保存機能

・学習時間、カテゴリ、内容を保存することができる。カテゴリは編集が可能。
→入力に必要なSQL文のカラム名に、プレースホルダーを代入する形で学習内容の保存、取得する関数を作成。その後SQL文のプレースホルダーに値をバインドし、クエリを実行する。

▼学習内容の表示機能

・学習内容の取得して表示。日付、カテゴリでの検索が可能。画面中央には指定した学習期間の合計学習時間を算出し表示している。
→クエリの実行結果を格納したオブジェクトを条件分岐(if文)や繰り返し処理(foreach文)などの基本構文をもちていてHTML上に表示。

▼学習内容の編集機能

・学習内容の編集ボタンから、編集ページへ遷移。日付、時間、カテゴリ、内容を編集することができる。
→作成した学習内容取得関数内の引数に入力フォームに入力された出力条件を代入する形で出力、更新を実行。

▼メモ機能
・その日の目標や、やることリストなどに使用することができる。
→セッションを使用し、入力の保持を実行

工夫した点

■学習内容入力ページ内にその日保存した学習内容を表示。入力する際、内容が以前保存したものと同じだった場合にコピペして登録することができる。

■トップページに月毎の学習時間の合計を表示。詳細ボタンをクリックすると、自動でその月の学習内容を検索し詳細を表示できるように実装

■月単位での1日あたりの学習時間の平均を表示することで進捗度の可視化を実施。
↓

■カテゴリを自分で作成し、使用することができる。
↓カテゴリ編集画面

■各ボタンにはテキストだけでなく、アイコンを使うことによってボタンを押した時に何が起こるのかを視覚的に伝え、より使いやすいデザインを意識。
↓各ボタンにアイコンを使用。

苦労したこと

■Gitを使用したバージョン管理。
→初めてGitを使用しての開発となったが、リベースとマージの違いを理解できておらず、作成した内容がマージされるまでに苦戦した。（マージした思ったら書いたコードがまっさらになって焦りました。。）

■エラー対応
エラー内容をログで読み取り、エラー箇所の修正。分からなければグーグル検索、Qiita内で質問しての対処となりました。

【苦戦したエラー】
▼学習内容検索機能の実装
・検索フォームに入力した値はあっているはずなのにが一致せずデータを取得することができなかった。
→型が一致していなかったことが原因。検索対象の日付をint型に設定したところ改善

▼Herokuにデプロイ時のエラー処理
・ERROR 1044 (42000)
→ClearDB では既定以外に新しいデータベースを作ることはできないのに、作成する指示がエクスポートファイルに描かれていたことが原因。対象コードを削除して対応。

・404 not found(404エラー)
→ファイル名の大文字、小文字が混同してしまっていたことが原因。対象コードを修正して対応

課題

・レスポンシブ対応

・削除機能の追加

・計画的な設計
→簡単なワイヤフレーム、DB設計書を作成したものの、あまり活用せず、場当たり的な設計になり、時間がかかってしまった。ER図やクラス図などもしっかり作成して望みたい。

↓作成したワイヤフレーム

↓テーブル設計

・きれいなコード
コードのリファクタリングを行い、効率的なコードにしていきたい。

学んだこと

・Gitの使い方（add.~pushまで、ブランチをきっての作業）
・解決できないエラーに遭遇した場合の質問のコツ（エラーにまでの過程、試してみたことも付け加えるなど。）
・自分のアイデアが形になる楽しさ
・アウトプットの重要性。

最後に

学んだことを実践してみることで、あまり理解できていない部分に気付くことができ、理解が深まりました。この開発を経てアウトプット前提にインプットすることがやはり重要だと感じたので、これを意識して今後は学びを深めていこうと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T09:43:52+09:00

グローバルナビゲーションを固定する

グローバルナビゲーションを固定させる方法

<!-- navigation -->
      <nav>
        <ul class="global-nav">
          <li><a href="htmlCss/index.html">HTML・CSS</a></li>
          <li><a href="jsJq/index.html">JS・JQuery</a></li>
          <li><a href="psAi/index.html">Ps+Ai</a></li>
          <li><a href="other/index.html">その他</a></li>
        </ul>
      </nav>

.gnav{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #ffffff;
}

URL

グローバルナビゲーションを固定させたサイト

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-19T00:11:05+09:00

画像をぼかす方法(超簡単)

簡単！背景画像をぼかす方法

CSSに一言だけ付け足せばOK!
index.html.erb
<%= image_tag "star.webp", class:"bgimage" %>
上記のclass名はお好みで！次はCSS!!
○○.css
.bgimage{
  filter: blur(5px);
  width: 100%;
}
上記の通りfilter: blur(5px);を追加すればOK!

5pxとなっていますが、1にするにも10にするにもぼかしの濃さを調整できますのでお好みで！

widthは100%にしておくと画面幅がぴったりになると思うのでこちらも忘れずに！

現場からは以上です！

　 Tweet
Qiitaで続きを読む

20201019のHTMLに関する記事は8件です。

【jQuery】モーダル（表示・非表示）、送信ボタンを押すとwindowアラートを表示させる。

はじめに

実装前のサイト（before）

STEP１：jQueryと.jsファイルの読込

STEP２：それぞれのコードを書く

STEP２－１：html

STEP２－２：css

STEP２－３：js

実装後のサイト（after）

参考（github）

【初心者でもわかる】ちょっと浮くボタンの作り方と、押した風のボタンの作り方

どうも7noteです。2種類の動きアリのボタンの作り方。

ふわっと浮くボタンの作り方

押した風になるボタン

まとめ

おそまつ！

【HTML&CSS】スクロールバーの表示を切り替える

プログラミング勉強日記

overflowとは

サンプルプログラム

参考文献

hamlからhtmlで出力される結果を改行されずに書く方法(小ネタ)

■ はじめに

■ 例

【Bootstrap】グリッドシステムを入れ子で実現

未経験からPHP+MySQLではじめてwebアプリの作成をしてみました。。

記事の概要

アプリ概要

▼制作期間

▼制作環境

アプリを作成する目的

▼PHPを学習していく中で下記項目についての理解を深めるため

なぜ学習管理アプリか

主な機能

機能詳細

▼ログイン機能

▼学習内容の保存機能

▼学習内容の表示機能

▼学習内容の編集機能

工夫した点

苦労したこと

課題

↓作成したワイヤフレーム

↓テーブル設計

学んだこと

最後に

グローバルナビゲーションを固定する

グローバルナビゲーションを固定させる方法

URL

画像をぼかす方法(超簡単)

簡単！背景画像をぼかす方法

CSSに一言だけ付け足せばOK!

上記のclass名はお好みで！次はCSS!!

上記の通りfilter: blur(5px);を追加すればOK!

5pxとなっていますが、1にするにも10にするにもぼかしの濃さを調整できますのでお好みで！

widthは100%にしておくと画面幅がぴったりになると思うのでこちらも忘れずに！

現場からは以上です！

日付別

タグ一覧