- 投稿日：2021-02-21T22:35:52+09:00
【丁寧な解説書】jsプラグインModaal 〜導入編〜
はじめに
モーダル。押すとぽんって出てきて、背景が黒っぽくなるやつ。webデザインやってたら使いたいな！ってタイミング出てくると思うんです。
それ、簡単に導入出来ちゃうjsプラグインmodaalの解説しちゃうよ。ちなみに、一応丁寧にこれだけ見たら導入できるように解説していきますが、jQueryってなんぞやって方はこちらを先に見ておくのがおすすめ。
Modaalの導入手順
1. modaalファイルのダウンロード
- まず、Github開いて Githubの公式サイトはこちら
Codeという緑ボタンを押し、
Download ZIPを押してファイルをダウンロード！！
zipファイルを解凍して以下のファイルを自分の作業しているフォルダ内に設置してください。
modaal.css
modaal.jssorceフォルダかdistフォルダの中にあります。minファイルでも大丈夫ですが、cssはminじゃない方がおすすめです。
2. ファイルの読み込み
index.html<head> ‥ <link rel="stylesheet" href="modaal.css" > ‥ </head> <body> ‥ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="modaal.js"></script> </body>3. modaal.jsを動かすコードを書きます
以下は全てHTMLに記述するときを前提として書いています。
トリガー
<a href="#modal_link" class="modal">OPEN</a>モーダルウィンドウ
<div id="modal_link" style="display:none;"> <p>モーダルで表示させたいもの</div> </div>jQuery
<script>$(".modal").modaal();</script>4. plus うまく行かなかった時に確認すべきこと！
まず検証ツールを開いて「Console」タブをクリック
$ is not defined というエラーが出ていたらjQuery本体が読み込まれていない、もしくはjQuery本体を読み込む前にjQueryを書いてしまっているという意味です。
- jQueryのCDNを読み込んでる？
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>こちらのjQuery Core 3.5.1 -minifiedをクリックしてぽんっと出てきたものをコピペしてくださいー！
- jQueryの読み込み順序は合ってる？
<!-- jQueryのCDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- ダウンロードしたmodaal.jsファイルの設置 --> <script src="modaal.js"></script> <!-- jQueryが書いてあるファイル --> <script>$(".modal").modaal();</script>
- jQueryを複数読み込んでない？
初めましてjQueryって方にありがちなのが、「jQueryたくさん読み込み問題。」
jQueryのCDNは最新バージョンを１回読み込めば十分ですから、たくさん書いてたら消しましょ！
- 記入する位置は合ってる？
cssはheadタグ内、script系はbodyの閉じタグの手前に書き込みましょう
Modaalのカスタマイズ
カスタマイズに関しましてはこちらの記事をご覧ください
【丁寧な解説書】jsプラグインModaal 〜カスタマイズ編〜Modaal導入での失敗経験
埋め込んだyoutubeが中央配置にならない問題
なぜか、モーダルで表示したYoutubeが画面の上に中央に配置されず、画面の上に寄ってしまうという事態が起きました。前提
そもそもこちらの指定のおかげで中央配置になるはずなのですが、modaal.css.modaal-inner-wrapper { display: table-cell; vertical-align: middle; }原因
なぜかこちらが効いてしまって中央配置にならず、というかそもそもvertical-alignが効かなくなっていて、modaal.css.modaal-fullscreen .modaal-inner-wrapper { display: block; vertical-align: top; }解決方法
検証ツールで色々探って、こうしたらうまくいきましたmodaal.css.modaal-fullscreen .modaal-inner-wrapper { display: grid; vertical-align: middle; }学びとしては、やっぱ困ったら検証ツールを使えばなんとかわかる！ってことでした笑
一応、検証ツールの使い方の参考リンクはこちら
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方最後に
出来るだけ丁寧にModaalについて説明しましたつもりですが、わからないことありましたら教えてくださーい！最後までご覧いただきありがとうございました！
参考文献
* 簡単にモーダルを実装するModaal.js(jsプラグイン)の使い方
* 【jQuery】モーダルウィンドウ実装する超秀逸[Modaal]プラグインの使い方
- 投稿日：2021-02-21T22:26:42+09:00
LaravelでstripeのJavaScriptがbladeで動かない!! 原因はapp.jsとバッティングしていました。
はじめに
駆け出しエンジニアです。現在、Laravel５．５でECサイトを作成しています。その際にstripeによる決済機能を追加しているときに苦戦したことを記録していきます。
少しでも皆様の参考になったらと思います。やろうとしていること
Laravel5.5ので作成しているECサイトにstripe決済を追加しようとしています。
そのさいに、bladeテンプレートにstripeのcheckoutをJavaScriptで読み込ませようとしています。どんな現象が起きたか
カートに入れた商品一覧を表示するviewにstripe決済のJavaScriptを導入するために下記コードを記載しました。
@extends('layouts.app') @section('content') <h1>カート一覧ページ</h1> @if (session('flash_message')) <p style="color:red;">{{session('flash_message')}}</p> @endif @if (empty($user_carts)) <p>カートが空です</p> @else <table> <tr> <th>商品名</th> <th>価格</th> <th>購入数</th> <th>この商品の合計金額(小計)</th> <th>カートから削除するボタン</th> </tr> @foreach ($user_carts as $user_cart) <tr> <td>{{$user_cart['name']}}</td> <td>{{$user_cart['price']}}円</td> <td>{{$user_cart['item_count']}}</td> <td>{{$user_cart['item_total']}}円</td> <td><a href="{{route('cart.delete', ['id' => $user_cart['id']])}}">商品を削除する</a></td> </tr> @endforeach </table> <p>全商品の合計金額</p> <p>{{$total}}円</p> @endif @if (empty($select_address)) <p>住所は選択されいません<p> @else <h2>選択されている住所</h2> <table> <tr> <th>氏名</th> <th>郵便コード</th> <th>都道府県</th> <th>市区町村</th> <th>住所</th> <th>電話番号</th> </tr> <tr> <td>{{$select_address['name']}}</td> <td>{{$select_address['postal_code']}}</td> <td>{{$select_address['prefectures']}}</td> <td>{{$select_address['municipality']}}</td> <td>{{$select_address['address']}}</td> <td>{{$select_address['phone_number']}}</td> </tr> </table> @endif @if (!empty($user_carts) && !empty($select_address) && $total > 50) <p style="color:red;">合計金額{{$total}}円。下記ボタンを押すと購入することができます.</p> <div class="content"> <form action="{{ route('cart.charge') }}" method="POST"> {{ csrf_field() }} <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="{{ env('STRIPE_KEY') }}" data-amount="{{ $total }}" data-name="Stripe Demo" data-label="購入をする" data-description="Online course about integrating Stripe" data-image="https://stripe.com/img/documentation/checkout/marketplace.png" data-locale="auto" data-currency="JPY"> </script> </form> </div> @else <p>以下の条件に当てはまったら購入画面に進めません</p> <p>カートに商品がない。住所が選択されてない。合計金額が50円以下</p> @endif <a href="{{route('index')}}">商品一覧ページ</a> <a href="{{route('address.showSelectAddress')}}">住所選択ページ</a> @endsectionその結果以下のような見た目になりました。
「決済をする」を押すと以下のようなエラーを吐き出します。
予定だと以下のような画面になってほしいのに、scriptの部分が動いていないことがわかります。
解決方法
以下の記事を参考にLaravelのデフォルトにある、app.jsとバッティングしている事がわかりました。
そのapp.jsを読み込んでいるのが、layout/app.blade.phpで読み込まれているのがわかりました。そのため、viewでlayoutを読み込んでいる以下3行を削除しました。
@extends('layouts.app') @section('content') //省略 @endsection無事動きました。めでたしめでたし
- 投稿日：2021-02-21T21:13:50+09:00
画面のスクロール
- 投稿日：2021-02-21T20:38:41+09:00
漢字（中国語）を左右に分割して表にしてみた＆百度百科（≒中国版wikipedia）へリンクしてみた／グレートファイアウォールの体験談
1. つくってみた
1.1. 動機 ～ 中国の漢字が読めない・・・
中国関連の仕事にどっぷり浸かっているのですが、漢字がわからん。。。ということで整理がてら作ってみた。
※へん（偏）とつくり（旁）の分割は完全に手作業です。辞書の索引見ながらつくりました。ピンイン入力も手作業なので間違ってる可能性あります。
数が多すぎるので、４画までしか作っていない。偏の選定はテキトウ。1.2. できたもの
See the Pen ExNXVGJ by kob58im (@kob58im) on CodePen.
1.3. テーブル変換用ツール(C#)
漢字テーブルを持たせるにあたり、JavaScriptの配列を手入力で作成するのはしんどいので、1.4章のテキストを1.3章のプログラムで変換をかけた。
コマンドプロンプトにおいて
chcp 65001でUTF-8にしておかないと、consoleにメッセージ吐いた場合に、日本語にない漢字が文字化けする。（ただし、IOException発生時にエラーメッセージのToString()に失敗する副作用がある模様。。）
テーブル変換用ツール(C#)
using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; using System.Text.RegularExpressions; class ChConverter { [STAThread] static void Main(string[] args) { Regex rSection = new Regex(@"^===(.*)===$"); Regex rNumberOfStroke = new Regex(@"^---([0-9]+)---$"); Regex rKeyCharPair = new Regex(@"^([^\t]+)(?:\t([^\t]+)(?:\t([^\t]+))?)?$"); Regex rCharPair = new Regex(@"^([^\t]+)\t([^\t]+)\t([^\t]+)(?:\t([^\t]+))?$"); string[] lines = File.ReadAllLines("Ch.txt"); var sb = new StringBuilder(); int state = 0; int lineIndex = 1; int lastStrokeN = 0; var keyDict = new Dictionary<string,bool>(); sb.Append("const kt = ["); for ( ; lineIndex < lines.Length; lineIndex++ ) { string s = lines[lineIndex].Trim(); Match m; if ( s == "" ) { // do nothing } else if ( s == "#KeyOrderEnd" ) { lineIndex++; break; } else if ( s.StartsWith("#") ) { // do nothing } else if ( (m = rNumberOfStroke.Match(s)).Success ) { // do nothing } else if ( (m = rKeyCharPair.Match(s)).Success ) { string keyKanji = m.Groups[1].Value; string pinyin = GetNthValue(m, 2); string baikeId = GetNthValue(m, 3); sb.Append("['" + keyKanji + "'"); if ( !String.IsNullOrEmpty(pinyin) ) { sb.Append(",'" + pinyin + "'"); if ( !String.IsNullOrEmpty(baikeId) ) { sb.Append(",'" + baikeId + "'"); } } sb.Append("],"); if ( keyDict.ContainsKey(keyKanji) ) { Console.WriteLine("Warning: duplicated key. line " + (lineIndex+1).ToString()); } else { keyDict.Add(keyKanji, true); } } } sb.AppendLine("];"); sb.AppendLine("const ct = ["); for ( ; lineIndex < lines.Length; lineIndex++ ) { string s = lines[lineIndex].Trim(); Match m; if ( s == "" ) { // do nothing } else if ( s.StartsWith("#") ) { // do nothing } else if ( (m = rSection.Match(s)).Success ) { if ( state != 0 ) { sb.AppendLine("]],"); } state = 1; sb.Append("['"); sb.Append(m.Groups[1].Value); sb.Append("',["); } else if ( (m = rNumberOfStroke.Match(s)).Success ) { if ( state == 0 ) { Console.WriteLine("Format error. line " + (lineIndex+1).ToString()); return; } state = 2; lastStrokeN = Convert.ToInt32(m.Groups[1].Value); } else if ( (m = rCharPair.Match(s)).Success ) { if ( state == 0 || state == 1 ) { Console.WriteLine("Format error. line " + (lineIndex+1).ToString()); return; } string key = m.Groups[1].Value; string kanji = m.Groups[2].Value; string pinyin = m.Groups[3].Value; string baikeId = GetNthValue(m, 4); sb.Append("['" + key + "','" + kanji + "','" + pinyin + "'"); if ( !String.IsNullOrEmpty(baikeId) ){ sb.Append(",'" + baikeId + "'"); } sb.Append("],"); if ( !keyDict.ContainsKey(key) ) { Console.WriteLine("Warning: no key. line " + (lineIndex+1).ToString() + "\t" + lastStrokeN.ToString()+ "\t"+key); keyDict.Add(key,false); } } else { Console.WriteLine("Format error. line " + (lineIndex+1).ToString()); return; } } if ( state != 0 ) { sb.AppendLine("]]"); } sb.AppendLine("];"); try { File.WriteAllText("ch_for_js.txt", sb.ToString()); } catch ( IOException e ) { Console.WriteLine( "IOException" ); Console.WriteLine( e ); } } static string GetNthValue(Match m, int index) { if ( m.Groups.Count > index && m.Groups[index] != null && m.Groups[index].Value != null ) { return m.Groups[index].Value; } return null; } }1.4. 入力データ（抜粋）
入力データ（抜粋）
ch.txt#KeyOrderBegin ---0--- x ---1--- 乙 yǐ x扎 ---2--- 丁 dīng 丩 jiū 乃 nǎi 九 jiǔ 了 le/liào 二 èr 人 rén 八 bā 几 jī 刀 dāo 刁 diāo 力 lì 十 shí 卜 bǔ 又 yòu x汇 x朽 x化 x叩 （中略） 反 fǎn 壬 rén 5878659 （中略） #KeyOrderEnd ===言=== ---0--- x 言 yán ---2--- 丁 订 dìng 卜 讣 fù 几 讥 jī 十 计 jì 人 认 rèn ---3--- 己 记 jì 上 让 ràng 寸 讨 tǎo x讬 讬 tuō （以下略）1.5. 参考サイト
- CSSでテーブル表の一部を固定してスクロールする方法 | シンス株式会社
- CSS 文字の下線が消えない！？ - Qiita
- 実はヤバい？aタグと別タブで開く（target=”_blank”）の使い方｜株式会社WWG
- CodePen ： 中国語の四声変換ツールつくってみた（a1a2a3a4⇔āáǎà） - Qiita
2. グレートファイアウォールの話
※環境に依存する可能性があります。また、今後どうなるかも分かりません。
※事前に調べてみた感じだと、VPNのサーバーによっては、締め出しをくらっている場合があるという記載を見かけました。なお、かなり遅い＆たびたび切断される。。
2.1. VPNつないでもダメだったこと
- PCからだとgoogle検索(google.co.jp, google.com)にアクセスできず。。
- PCからだとgmailのメールが送信エラーとなる。。めちゃくちゃ時間経ってから送信できたりもする。（受信は（VPNつなげば）普通にできた。）
2.2. VPNつながないとダメだったこと
- スマホ/タブレットからgoogle検索
- スマホ/タブレットからYouTube
2.3. VPNつながなくてもできたこと
- Qiitaへのアクセス
- CodePen(codepen.io)へのアクセス
- 投稿日：2021-02-21T20:34:37+09:00
javascriptでモーダルを作ろう！
モーダルとは
最初に、本記事で作成したいものの完成形を、画像で見ていきましょう。
①最初の画面では、以下のようにボタンが１つだけある状態です。
②「画像を表示」ボタンをクリックすると以下のように画像が表示されます。
モーダルの構造
モーダルは、ボタンを押したときに、黒い背景、画像、閉じるボタンの３つの要素を表示し、閉じるボタンを押すと３つの要素が表示さなくなるような構造になっています。
このような動きは、javascriptでHTMLの要素を取得し、classを付けたり消したりすることで実装できます。コードの全体像
それではモーダル実装するために必要なコードの全体を見ていきましょう。
まずはHTMLです。index.html<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> <script src="https://kit.fontawesome.com/f08e8f441f.js " crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="app.css"> </head> <body> <div id="modal" class="modal"> <div class="modal_inner"> <div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div> <img src="image001.jpg"> </div> <div id="modal_background" class="modal_background"></div> </div> <button id="modal_show" class="button" >画像を表示</button> <script src="main.js"></script> </body> </html>次にCSSです。
app.css.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: .6s; transition: .6s; } .modal.is-show { opacity: 1; visibility: visible; } .modal_inner { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; max-width: 600px; padding: 50px; background-color: #fff; z-index: 2; } .modal_inner img { width: 100%; } .modal_close { position: absolute; right: 0; top: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; } .modal_close i { font-size: 20px; color: #333; } .modal_background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1; cursor: pointer; } .button{ font-size: 20px; }最後にjavascriptです。
main.js'use strict'; const modal = document.getElementById('modal'); const show = document.getElementById('modal_show'); const close = document.getElementById('modal_close'); const backGround = document.getElementById('modal_background'); show.addEventListener('click',() => { modal.classList.add('is-show'); backGround.classList.add('is-show'); }) close.addEventListener('click',() => { modal.classList.remove('is-show'); backGround.classList.remove('is-show'); }) backGround.addEventListener('click',() => { close.click(); })コードの解説
全体を確認していただいたので、次にコード内容を詳しく見ていきます。
HTMLについて
HTMLは大きく２つに別れています。
①表示される中身。
②画像を表示するためのボタン。
モーダルの中身も２つに別れており、modal_innerの中に、「画像」と「閉じるボタン」のアイコンが入っています。アイコンはフォントオーサムのもの使っていますので、head部分で読み込みをしています。また、表示する画像については好きなものを使用してください。index.html<!-- ① --> <div id="modal" class="modal"> <div class="modal_inner"> <div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div> <!-- ↑閉じるボタンのアイコン --> <img src=""> <!-- ↑表示する画像 --> </div> <div id="modal_background" class="modal_background"></div> <!-- ↑背景 --> </div> <!-- ① --> <button id="modal_show" class="button" >画像を表示</button>javascriptについて
javascriptは大きく３つの部分に別れています。
①HTMLから②③で、clickイベントを設定するためにDOM要素を取得し、定数として設定している。②modal_showのidを持つdivタグをクリックすると、is-showのclassをつけるようイベントを設定している。
③modal_closeのidを持つdivタグにクリックすると、②でつけたis-showのclassを消すようイベントを設定している。
main.js//① const modal = document.getElementById('modal'); const show = document.getElementById('modal_show'); const close = document.getElementById('modal_close'); const backGround = document.getElementById('modal_background'); //② show.addEventListener('click',() => { modal.classList.add('is-show'); backGround.classList.add('is-show'); }) //③ close.addEventListener('click',() => { modal.classList.remove('is-show'); backGround.classList.remove('is-show'); })cssについて
cssについては重要な箇所のみ解説します。
①
以下の箇所ではmodalの表示する部分を装飾しています。
visibility: hidden;
として、普段はモーダルが見えないようにしています。
-webkit-transition: .6s;
transition: .6s; として、クリックされた時にすぐに画像が表示されるのではなく、０．６秒かけてゆっくり表示されるように設定しています。app.css.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: .6s; transition: .6s; }②
以下の箇所では①で見えないようにしていた箇所を見えるようにするよう装飾しています。
visibility: visible; として、①で見えなくしていたモーダルの中身を見えるように上書きしています。
is-show のclassについてはjavascriptでイベントを設定し、クリックすることで追加あるいは削除できるようにしています。app.css.modal.is-show { opacity: 1; visibility: visible; }③
modal_backgroundのclassを持つ部分のz-index: 1; に、modal_innerのclassを持つ部分をz-index: 2; として、背景の上に画像が表示されるように設定しています。最後に
いかがでしょうか、説明は最低限となってしまいましたが、この記事を参考にして、ぜひモーダルを作ってみてください。
- 投稿日：2021-02-21T20:34:37+09:00
＜初心者向け＞javascriptでモーダルを作ろう！
モーダルとは
最初に、本記事で作成したいものの完成形を、画像で見ていきましょう。
①最初の画面では、以下のようにボタンが１つだけある状態です。
②「画像を表示」ボタンをクリックすると以下のように画像が表示されます。
モーダルの構造
モーダルは、ボタンを押したときに、黒い背景、画像、閉じるボタンの３つの要素を表示し、閉じるボタンを押すと３つの要素が表示さなくなるような構造になっています。
このような動きは、javascriptでHTMLの要素を取得し、classを付けたり消したりすることで実装できます。コードの全体像
それではモーダル実装するために必要なコードの全体を見ていきましょう。
まずはHTMLです。index.html<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> <script src="https://kit.fontawesome.com/f08e8f441f.js " crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="app.css"> </head> <body> <div id="modal" class="modal"> <div class="modal_inner"> <div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div> <img src="image001.jpg"> </div> <div id="modal_background" class="modal_background"></div> </div> <button id="modal_show" class="button" >画像を表示</button> <script src="main.js"></script> </body> </html>次にCSSです。
app.css.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: .6s; transition: .6s; } .modal.is-show { opacity: 1; visibility: visible; } .modal_inner { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; max-width: 600px; padding: 50px; background-color: #fff; z-index: 2; } .modal_inner img { width: 100%; } .modal_close { position: absolute; right: 0; top: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; } .modal_close i { font-size: 20px; color: #333; } .modal_background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1; cursor: pointer; } .button{ font-size: 20px; }最後にjavascriptです。
main.js'use strict'; const modal = document.getElementById('modal'); const show = document.getElementById('modal_show'); const close = document.getElementById('modal_close'); const backGround = document.getElementById('modal_background'); show.addEventListener('click',() => { modal.classList.add('is-show'); backGround.classList.add('is-show'); }) close.addEventListener('click',() => { modal.classList.remove('is-show'); backGround.classList.remove('is-show'); }) backGround.addEventListener('click',() => { close.click(); })コードの解説
全体を確認していただいたので、次にコード内容を詳しく見ていきます。
HTMLについて
HTMLは大きく２つに別れています。
①表示される中身。
②画像を表示するためのボタン。
モーダルの中身も２つに別れており、modal_innerの中に、「画像」と「閉じるボタン」のアイコンが入っています。アイコンはフォントオーサムのもの使っていますので、head部分で読み込みをしています。また、表示する画像については好きなものを使用してください。index.html<!-- ① --> <div id="modal" class="modal"> <div class="modal_inner"> <div id="modal_close" class="modal_close"><i class="fas fa-times"></i></div> <!-- ↑閉じるボタンのアイコン --> <img src=""> <!-- ↑表示する画像 --> </div> <div id="modal_background" class="modal_background"></div> <!-- ↑背景 --> </div> <!-- ① --> <button id="modal_show" class="button" >画像を表示</button>javascriptについて
javascriptは大きく３つの部分に別れています。
①HTMLから②③で、clickイベントを設定するためにDOM要素を取得し、定数として設定している。②modal_showのidを持つdivタグをクリックすると、is-showのclassをつけるようイベントを設定している。
③modal_closeのidを持つdivタグにクリックすると、②でつけたis-showのclassを消すようイベントを設定している。
main.js//① const modal = document.getElementById('modal'); const show = document.getElementById('modal_show'); const close = document.getElementById('modal_close'); const backGround = document.getElementById('modal_background'); //② show.addEventListener('click',() => { modal.classList.add('is-show'); backGround.classList.add('is-show'); }) //③ close.addEventListener('click',() => { modal.classList.remove('is-show'); backGround.classList.remove('is-show'); })cssについて
cssについては重要な箇所のみ解説します。
①
以下の箇所ではmodalの表示する部分を装飾しています。
visibility: hidden;
として、普段はモーダルが見えないようにしています。
-webkit-transition: .6s;
transition: .6s; として、クリックされた時にすぐに画像が表示されるのではなく、０．６秒かけてゆっくり表示されるように設定しています。app.css.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: .6s; transition: .6s; }②
以下の箇所では①で見えないようにしていた箇所を見えるようにするよう装飾しています。
visibility: visible; として、①で見えなくしていたモーダルの中身を見えるように上書きしています。
is-show のclassについてはjavascriptでイベントを設定し、クリックすることで追加あるいは削除できるようにしています。app.css.modal.is-show { opacity: 1; visibility: visible; }③
modal_backgroundのclassを持つ部分のz-index: 1; に、modal_innerのclassを持つ部分をz-index: 2; として、背景の上に画像が表示されるように設定しています。最後に
いかがでしょうか、説明は最低限となってしまいましたが、この記事を参考にして、ぜひモーダルを作ってみてください。
- 投稿日：2021-02-21T20:05:54+09:00
CSS基礎
font-sizeプロパティ
- px : 絶対値
- em : 親要素のfont-sizeを１とした時の倍率.
- rem : ルート要素のfont-sizeを１とした時の倍率.
margin・paddingプロパティ
例)
margin 10px : 全ての余白指定.
margin 10px 20px : 上下の余白指定.
margin 10px 20px 30px: 上、左右、下の順に余白指定.
margin 10px 20px 30px 40px: 全ての余白指定.div要素のブロックレベルの要素を親要素に対して中央寄せしたい場合は左右marginをautoにすればよい.
box-sizingプロパティ
要素の幅と高さの中にpaddingとborderを含めるかどうか変更できる.
親要素からはみ出ることがなくレスポンスデザインに向くデザインとなる.
尚box-sizing: inheritとすれば親要素の指定を引き継ぐことができる.displayプロパティ
diplayは要素の表示形式を決める.
●block
前後に改行が入る.
高さや幅,paddin,marginが適用可能.要素は幅いっぱいに広がる.
●inline
改行が入らず横並びに続いていく.ブロック要素の中に入ることが多い.
高さや幅は指定できないが、paddin,marginは左右方向にのみ指定可能.
text-alignは指定可能.
●inline-block
名前の通りblockとinlineの要素を併せ持つ.
inlineと異なり途中で改行されないので綺麗に整列できる.positionプロパティ
positionプロパティを用いることで要素の位置を指定ピクセルだけ動かしたり要素の上に別の要素を重ねたり、要素を画面の決まった位置に要素を固定することができる.
top,bottom,left,rightを用いて位置を調節できるが基本的には上からの距離と左からの距離を指定すれば位置は決まるので、topとleftを用いる.
- static : 位置を固定.topなどで指定しても位置は不変.
- relative : topやleftの値を変えることで本来あるべき位置から対象をずらすことができる.
- absolute : ずらすベースが親要素となる.
- fixed : スクロールしても位置を固定することができる.ヘッダーなどに用いる.
vertical-allignプロパティ
テキストの縦軸の位置を指定するためのプロパティ.
vertical-align: ○○○で指定する.ただdivなどのブロック要素に対しては指定してもうまく動かないので注意.before after
::afterと::beforeは、疑似要素と呼ばれ、HTMLには書かれていない要素を作成できる.
box-shadowプロパティ
box-shadow: [右][下][ぼかし][拡張][影の色];で指定.
insetを指定することで内部に影ができる.overflowプロパティ
要素のボックスからはみ出た部分をどう扱うか指定するプロパティ.
min max widthプロパティ
当然heightにも適用可能.display: inline-block;とともに使用.transformプロパティ
floatとclearfix
ある要素のなかで横並びのレイアウトを実現するためにfolatを用いると、親クラスの高さが消えてしまい表示が崩れてしまう可能性がある.
解決策としてclearプロパティを末尾に追加することで子要素の回り込みをクリアすることができる.
nthoftypeプロパティ
要素が複数並んでいた場合n番目かを指定することによって特別な処理を施すことができる.cssカウンタ
親要素でカウンタをリセットし、子要素でインクリメント、表示を行う.z-index
通常ファイルの上から記述するため記載順に積み上げていく形式になる.
この順序を入れ替えるにはzindxプロパティを用いて優先順位を変える.
- 投稿日：2021-02-21T19:59:27+09:00
【丁寧な解説書】jsプラグインModaal 〜カスタマイズ編〜
はじめに
ここでは、めちゃ便利なModaalのたくさんのカスタマイズを丁寧に解説していきます。
ちなみにModaalの導入についてはこちらの記事をご覧ください。
【丁寧な解説書】jsプラグインModaal 〜導入編〜カスタマイズそもそも
まず、カスタマイズってそもそもどこを変えたらいいのっていう方のために、初歩的なお話をするのでそんなの余裕だよ！って方は次に進んでください。
まずは例をどんっ！
sample.js$('.my-link').modaal({ type: 'inline', background: '#fff' });
.mi_linkはHTML内のクラス名に対応しています。自分の使う形に適当に変えてくださいね。$('.my_link').modaal();これが基本形です。- カスタマイズを追加の時はmodaalの括弧内に追加していきます。
typeやloading_contentはkeyと呼ばれるもので、cssでプロパティみたいなものです。ajaxやLoading content‥はvalueと呼ばれるもので、ここを変更して自分好みにカスタマイズします。忘れがちポイント
- valueの
'(シングルクウォーテーションマーク)- 複数カスタマイズするときの
,(カンマ)本題のカスタマイズオプション解説
頻出度高め
まずは頻出度の高いものの説明を載せます！だいたいの人はここだけ見ればやりたいこと出来るはず！
1. type
モーダルでぽんっと何を出すかによって設定が必要。
デフォルトはinline、型はstring型。
カスタマイズ 解説メモ inline inline要素を表示させたい inline要素の解説はこちら image 画像を表示させたい iframe 別のHTMLファイルを表示させたい（Youtubeの埋め込みなど） confirm 確認ダイアログなどの表示 video 動画を表示させたい instagramを表示させたい 2. background
モーダルがぽんって出てきたときのモーダル部分の裏のを覆っている色。
デフォルトは#000、型はstring型。ちょぴっとメモ
ここでrgba指定をすると背景の透過度も一気に指定できて便利！
ちなみにカラーコードのrgb変換はこちらのサイトをお使いください
RGBと16進数カラーコードの相互変換ツール3. animation_speed
モーダルでぽんっと出すのにかかる時間。
デフォルトは300（0.3秒）、型はinteger型。ちょぴっとメモ
githubにはafter_callback_delayも一緒に変えなきゃいけないよって書いてあるけれど、animation_speedの変更だけで大丈夫そうです。
もし、その注意書きの意味わかる方いらっしゃいましたらご指摘いただきたいです、！4. background_scroll
背景をスクロールさせるか否か
デフォルトはfalse、型はboolean型。
これをtrueに設定すると、モーダルの後ろをスクロール出来る。5. width
モーダルの希望の幅を指定。
デフォルトはnull、型はinteger型。6. height
モーダルの希望の高さを指定。
デフォルトはnull、型はinteger型。頻出度低め
ここはこのカスタマイズってどんな時に使うのーっていう人のために頻出度低めなものにちょっとだけ触れてます。
1. hide_close
モーダルの閉じるボタンを表示するかを指定。
デフォルトはfalse、型はboolean型。
カスタマイズ 解説メモ false 閉じるボタンを表示 true 閉じるボタンを非表示 どんな時に使うの？
modaal.jsは便利なプラグインだから、閉じるボタンを用意してくれているけれど、自分でカスタマイズしたボタンを使いたいよ！っていう場合はvalueをtrueにしてね2. overlay_opacity
背景オーバーレイの透過度を指定。
デフォルトは0.8、型はfloat型。ちょぴっとメモ
先述の通り、backgroundでも透過度は指定できます。3. fullscreen
モーダルが画面全体に表示されるようにする。
デフォルトはfalse、型はboolean型。正直な話
youtubeのモーダルではサイズに変化がありませんでした、ので、ちょっと使い方が正直わかりませんでした、4. start_open
サイト読み込み時にモーダルが表示されるようにする。
デフォルトはfalse、型はboolean型。5. overlay_close
閉じるボタンだけでなく、モーダルの背景を押したらモーダルが閉じるようにしたり、しなかったり。
デフォルトはtrue、型はboolean型。confirmのカスタマイズ
先述のtypeをconfirmにすると、ダイアログを作ることができます。
変更することが出来る部分
キー（key） デフォルト confirm_button_text Confirm confirm_cancel_button_text Cancel confirm_title Confirm Title confirm_content This is the default confirm dialog ‥‥ 終わりに
たくさん細かく丁寧に解説したつもりですが、わからないことがあればぜひ教えていただきたいなと思います。また、私の知識不足によりtypeをajaxに指定したときのことは省いています。また頑張って勉強してから追加できたらしますー！
というわけで、ご覧いただきありがとうございましたー！
- 投稿日：2021-02-21T18:08:28+09:00
【初心者でもわかる】cssで水面に反射したような鏡面反射を作成する方法
どうも7noteです。鏡面反射の作り方。
水面に反射したように、画像の下に水面に反射したような画像をおいて鏡面反射を作ります。
見本
鏡面反射のソースの書き方
index.html<div class="image"> <img src="sample.jpg"> </div> <!-- ↓反射用↓ --> <div class="spreflect"> <img src="sample.jpg"> </div>style.css.image { margin-bottom: 1px; /* 反射するとこの隙間 */ } .spreflect { transform: scale(1, -1); /* 上下反転 */ position: relative; /* 基準位置とする */ } .spreflect::before { content: ""; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱい */ height: 100%; /* 高さいっぱい */ display: block; /* 高さを指定するためにブロック要素にする */ background: linear-gradient(#fff 30%, rgba(255,255,255,0) 100%); /* 徐々に透明にする */ position: absolute; /* 相対位置に指定 */ top: 0; /* 上から0pxの位置に指定 */ left: 0; /* 左から0pxの位置に指定 */ }まとめ
同じような方法で
box-reflectというプロパティを使って要素を反転させることができます。https://shanabrian.com/web/css3/box-reflect.php
※box-reflectを使った場合は「Safari、Chrome」にしか対応できないので注意！おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-02-21T12:35:30+09:00
JavaScriptでHTMLを操る最低限の知識
エンジニア経験約1年半のTKです。
今までは業務でJavaばっかり書いていてフロント知識を捨てていました。最近、初めてフロントの開発せざるを得ない展開になってしまいました。
嫌だなぁと思いましたが、これを機にちゃんと勉強しようと思いました。今回はJavaScriptを実装した時に思った事を素直に書きつつ、どう対応したかを今後の自分の為に書き記します。
今までサーバーサイドの開発ばっかりやっていてフロントは嫌い！って人向けです。ループ文やif文などの構文についてではありません。（そこはサーバー開発言語の知識があればググってすぐに理解できます）
HTMLとの関係について
僕がJavaScriptを書く際に最初にめんどくさいと思ったのはここです。
全くわからない、どうやってHTMLを操作するの？と純粋に思いました。例えば
そうですね、画面表示する時に処理したいって時。
シンプル.HTML<!DOCTYPE html> <html lang="en"> <script type="text/javascript" src="test.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--サーバーから渡ってきた日付--> <div id="ymd">21000909</div> </body> </html>実際の業務ではこんな画面あり得ないですが、ご了承ください。
サーバーから日付が8桁で渡ってきて表示する時はスラッシュを補完したい！という要件があるとします。
フロント嫌いの僕からしたらどうやるねん、、、って話です。
JavaScript内で日付文字列にスラッシュを補完するという処理はすぐに思いつきます。が、フロント開発初心者の僕はまずこの値どうやって受け取るんだという疑問から始まります。
しかも、画面表示時に値を受け取るというタイミングもおまけでついてきます。きついですね、、実際にこう書けば仕様通りに動きます。
test.js// ページ読み込み完了後に実行 window.onload = function () { // 対象の要素を取得する const target = document.getElementById("ymd"); // スラッシュを補完し、要素のtextに設定する target.textContent = target.textContent.substr(0, 4) + "/" + target.textContent.substr(4, 2) + "/" + target.textContent.substr(6, 2); }※値の存在チェック等はここでは割愛しております。
やることを箇条書きすると、
・画面表示の際にJavaScriptを呼ぶ
・HTMLのtextを取得し、スラッシュを補完
・HTMLのtextに編集後の値を設定する書いてみるとかなり簡単ですが、僕の勝手な妄想ですがフロント嫌いはここまで辿り着くのに結構時間を要します。
イベント発動→JavaScript実行
JavaScriptの実行タイミングはこれだけと言っても過言ではありません！
この流れがわかってしまえば応用でなんでも出来そうな気がしてきました。
イベントなどは別途また投稿します。（ここでのイベントはざっくり言うと画面表示です。）そういえば、window.onloadは使うべきではないという噂も聞いたことがあります。
同ページで複数のwindow.onloadがあると処理が上書きされてしまう事があるみたいです。updateTest.js// ページ読み込み完了後に実行 window.addEventListener('load', function() { // 対象の要素を取得する const target = document.getElementById("ymd"); // スラッシュを補完し、要素のtextに設定する target.textContent = target.textContent.substr(0, 4) + "/" + target.textContent.substr(4, 2) + "/" + target.textContent.substr(6, 2); }こっちのaddEventListenerを使用すればイベントを追加する為、上書きされないです！
target.textContentも変数に入れるべきだったかな。。。まあいいか。HTMLを操作するための最低限
上記の例のtest.jsに習って記載します。
// 対象の要素を取得する
const target = document.getElementById("ymd");これは、HTMLのid属性が"ymd"の要素を取得し、targetという変数に格納しています。
documentとは何でしょうか？
console.log(document)で表示してみましょう。
なるほど！HTMLが表示されています。
つまり、document.何かしらで実際に要素が取得出来る事がわかりました。これがわかれば大体ググれば何とかなります！
よく使うものは下記です。
指定するもの 関数名 例 id getElementById document.getElementById("id名") class getElementsByClassName document.getElementsByClassName("class名") id、class querySelector document.querySelector("idまたはclass名") 次は実際にHTMLに値を設定するところです。
// スラッシュを補完し、要素のtextに設定する
target.textContent = target.textContent.substr(0, 4) + "/" + target.textContent.substr(4, 2) + "/" + target.textContent.substr(6, 2);targetには取得した要素が入っております。
target.関数名=設定する値で設定できます。
設定先の属性によって関数名を使い分ければ良いと言う事です。よく使うものは下記です。
属性 関数名 例 id id target.id=設定する値 class className target.className=設定する値 text textContent target.textContent=設定する値 value value target.value=設定する値 まとめ
とりあえず、JavaScriptが実行できれば後は値を取得する、設定するの知識で結構何とかなる気がします！
- 投稿日：2021-02-21T11:42:14+09:00
V8 runtime を使用した状態で google.script.run を使って HTML form オブジェクトを Google Apps Script 側へ送るためのパーサー
概要
この投稿では Google Apps Script エディタで V8 runtime を使用した状態で google.script.run を使って HTML form オブジェクトを Google Apps Script 側へ送るためのパーサーを紹介させていただきます。
Google Apps Script は、2020 年 7 月に V8 runtime の使用が可能になりました。これにより、一部の仕様が変更されたことによる問題が発生しています。ここで紹介させていただく HTML form オブジェクトの google.script.run でのパースについても同様の問題があります。Stackoverflow でもこの問題に関する複数の質問が投稿されており、重要性の高さを理解しました。この問題は、Google 側の今後のアップデートで解消される可能性もありますが、この投稿では現時点での回避策として、この問題解決のための方法を紹介させていただきます。
問題の再現
初めに、サンプルとして、スタンドアロンタイプの Google Apps Script プロジェクトを作成し、次のような HTML と Google Apps Script をコピーペーストしてください。
1. サンプルスクリプト
HTML side:
index.html<form> <input type="file" name="file" /> <input type="button" value="ok" onclick="google.script.run.upload(this.parentNode)" /> </form>Google Apps Script side:
Code.gsfunction doGet() { return HtmlService.createHtmlOutputFromFile("index.html"); } function upload(e) { DriveApp.createFile(e.file); }2. Web Apps のデプロイ
HTML へアクセスするためにWeb Apps をデプロイしてください。
3. 動作テスト
次に示す 2 つの条件でスクリプトをテストします。
条件 1
スクリプトエディタ上でv8 runtime が有効になっている状況で Web Apps をデプロイし、ブラウザを使って Web Apps へアクセスし、ブラウザでコンソールを開き、サンプルとして画像ファイルを選択してからボタンを押してください。これにより、Google Drive のルートフォルダにアップロードした画像ファイルが作成されます。アップロードされたファイルを開こうとすると、残念ながらアップロードされた画像ファイルは破損しているために開くことができません。この問題は文字コードの問題によるものと推測しています。
この場合、utf-8 のテキストファイルのアップロードの場合はデータの破損はなさそうです。
条件 2
スクリプトエディタ上でv8 runtime を無効にした(Rhino runtime)状況で条件 1 と同様に実行すると、アップロードされた画像は無事に開くことができます。
上記の結果から、簡単な回避策としては v8 runtime の無使用で問題ないと思われます。しかしながら、v8 runtime を使用するメリットはいろいろあります（参考 1, 参考 2）ので、v8 runtime を有効にした状況下で上記のファイルアップロードが可能になればより便利かと考えました。
そこで、次に紹介させていただくライブラリを作成しました。
HTML form オブジェクト用パーサー
リポジトリはこちらです。
サンプルスクリプトとして、上記のスクリプトを修正すると、下記のように書くことができます。
<script src="https://cdn.jsdelivr.net/gh/tanaikech/HtmlFormObjectParserForGoogleAppsScript_js@master/htmlFormObjectParserForGoogleAppsScript_js.min.js"></script>は、HTML フォームオブジェクトをパースするための Javascript ライブラリです。この場合、v8 runtime は有効にしてください。（この JS ライブラリを使用するパターンでは、v8 runtime を有効、無効の両方で動作します。）
サンプルスクリプト
HTML side:
index.html<script src="https://cdn.jsdelivr.net/gh/tanaikech/HtmlFormObjectParserForGoogleAppsScript_js@master/htmlFormObjectParserForGoogleAppsScript_js.min.js"></script> <form> <input type="file" name="file" /> <input type="button" value="ok" onclick="ParseFormObjectForGAS(this.parentNode).then(obj => google.script.run.upload(obj))" /> </form>Google Apps Script side:
Code.gsfunction doGet() { return HtmlService.createHtmlOutputFromFile("index.html"); } function upload(e) { DriveApp.createFile( Utilities.newBlob( e.file[0].files[0].bytes, e.file[0].files[0].mimeType, e.file[0].files[0].filename ) ); }上記のようにスクリプトを修正した後、Web Apps を再デプロイしてからブラウザでアクセスしてください。サンプルとして画像ファイルを選択してボタンをクリックしてください。アップロードされた画像ファイルは無事開くことができます。
この JS ライブラリでは、取得したファイルをバイト配列に変換して Google Apps Script 側へ送ります。これによりデータの破損なく送ることができます。
この JS ライブラリは、ファイル入力だけでなく、フォームで送信するほとんどの input tags に対応しています。他のサンプル HTML はリポジトリをご覧ください。
制限事項
- 今の場合、ファイル化するために Google Apps Script の Blob を使用しますので、データの最大サイズは 50 MB です。これに注意してください。50 MB 以上のファイルを Google Drive へ送る場合は、resumable upload を使用してください。このためのライブラリも用意しており、こちらでごサンプルスクリプトと共に確認頂けます。
- 投稿日：2021-02-21T09:34:19+09:00
HTMLの構造
HTMLのレイアウト構造
HTMLは積み木の集合体であると表現できます。積み木（=要素）は左上から収まっていきます。
HTMLはすでに作成した要素の中に、さらに要素を追加することができ、入れ子構造といいます。
HTMLの要素は中身の高さに応じて高さが変わる箱のような物とも表現できます
最初にコードをみてみましょう。
HTML<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>旅行準備</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> 買い物リスト </header> <div class="contents"> <div class="top-content"> 事前に準備する物 <ul class="lists"> <li class="list">スーツケース</li> <li class="list">着替え</li> <li class="list important">現地通貨</li> <li class="list">歯ブラシ</li> </ul> </div> <div class="bottom-content"> 現地で準備する物 <ul class="lists"> <li class="list">飲み物</li> <li class="list">朝食</li> <li class="list">チケット</li> </ul> </div> </div> <footer> </footer> </body> </html>cssheader{ height: 40px; width: 70%; font-size: 20px; background-color: lightblue; } .contents{ width: 400px; } .top-content{ height: 200px; width: 400px; background-color: lightyellow; } .bottom-content{ height: 200px; width: 400px; background-color: lightsalmon; } .list{ list-style: none; } .lists{ width: 250px; } .important{ background-color: red; } footer{ height: 40px; width: 75%; background-color:lightgreen; }ブロックレベル要素
HTMLの積み木を構成する要素で1つのブロックレベル要素が、1つのHTMLにおける積み木として存在します。
・横幅いっぱいで表示される箱である
・箱の中にテキストなどが表示される
・高さは中身によって変わる
・初期値は縦並びで表示されるインライン要素
テキストの一部を示す要素で、主に文字の装飾などに使用します。
・中身のテキスト量の分だけの横幅
・高さは中身によって変わる
・横並びで連続的に表示される親要素と子要素
親要素
ある要素の上の階層にある要素です。
子要素
親要素から見てその下の階層にある要素です。
header要素
Webページ最上部のヘッダー専用のブロックレベル要素です。head要素ではありません。
div要素
特定の意味が無い要素です。様々な用途で使うことができ、主にclassセレクタを付与して使用します。
最も使用する頻度が高いブロックレベル要素です。イメージとしていっぱい積み木を入れられる段ボールみたいな感じです。大きいダンボールの中に小さいダンボールも入ります。footer要素
Webページ最下部のフッター専用のブロックレベル要素です。
ul要素
順序のないリストを示すブロックレベル要素です。li要素と組み合わせて使用します。
li要素
リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。
CSSプロパティーでサイズを調整
heightプロパティ
要素の高さを指定することができるプロパティ
widthプロパティ
要素の幅を指定することができるプロパティ
%
%（パーセント）とは、親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる指定方法です。
background-colorプロパティ
背景色を指定する際に使用します。
list-styleプロパティ
リストのスタイルを変更することができli要素のマークを変更したりすることができます。squareを指定すると黒点を■で表現でき、noneを指定すると黒点を消すことができます。
リストのうち、一箇所だけ変更したい時、CSSを追加したい部分だけに、新たにclassを追加しましょう。
半角スペースで区切ることによって、1つの要素が複数のクラスを持つことができます。ブロックレベル要素の横並び
ブロックレベル要素は、通常は縦に積み重なるため、横並びにするために工夫が必要です。
displayプロパティ
要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティで
値に変更したい要素の種類を設定します。
値との組み合わせ 説明 display: block; ブロックレベル要素 display: inline; インライン要素 display: inline-block; 並びはインライン要素だが、中身はブロックレベル要素 display: flex; 要素の子要素が横並びになる display: none; 指定された要素は、非表示になる Flexbox
親要素に、display: flex;を付与することで、子要素が横並びになります。そして、その子要素らの詳細を細かく指定して決めることができます。これをFlexboxといいます。
justify-contentプロパティ
display: flex;と併せて使用します。justify-content: 〇〇;といった形で、
主軸方向(初期値は水平方向)の配置の詳細を決めることができます。align-itemsプロパティ
display: flex;と併せて使用しalign-items: 〇〇;といった形で、
交差軸方向(初期値は垂直方向)の配置の詳細を決めることができますflex-directionプロパティ
要素の主軸方向や並び順を変更する時に使用します。
詳細はフレックスボックスチートシートに預けます。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox14ボックスモデル
ボックスは中身の「content」、枠をつける「border」と、内側の余白「padding」、外側の余白「margin」から成り立っています。それぞれ個別にCSSを適用し、幅や色などを指定できます。
googleホームページ、検証ツールより引用
borderプロパティ
要素の境界線の幅や色を変更できます。
paddingプロパティ
箱の内側に余白を作成します。余白の大きさは、pxで指定することができます。
組み合わせ 説明 padding: ○px; [上下左右]の内側の余白をまとめて指定 padding: ○px △px; [上下][左右]の内側の余白指定 padding: ○px △px □px; [上][左右][下]の内側の余白を指定 display: flex; [上][左右][下]の内側の余白指定 padding: ○px △px □px ☆px; [上][右][下][左]の内側の余白指定 marginプロパティ
箱の外側に余白を作成します。
paddingと同様に、pxで指定でき、上下左右4方向の指定方法も同じです。positionプロパティ
指定した要素の配置方法を決めることができるプロパティです。
配置方法としては以下のような方法があります。
組み合わせ 説明 position: relative; 現在の位置を基準に相対的な位置を決める position: absolute; 特定の地点を基準に絶対的な位置を決める（初期値の基準はウィンドウ左上） position: fixed; 要素を指定した位置に固定する プロパティとセットで使うことが多いです。
top/right/bottom/leftプロパティ
positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができます。
実際のコードをみてみましょう
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <header></header> <div class="main"> <div class="parent"> <div class="child"> </div> </div> </div> <footer></footer> </body> </html>header { height: 50px; width: 100%; background-color: lightblue; } .main { color: rgb(200, 200, 200); } .parent { width: 400px; height: 300px; background-color: lightsalmon; margin: auto; position: relative; } .child { width: 250px; height: 200px; background-color: lightyellow; position: absolute; top: 15px; left: 30px; } footer { height: 40px; width: 100%; background-color: limegreen; }
画像表示
img要素
Webサイト上に画像を表示することができます。
画像の場所を指定するsrc属性
画像が表示されなかった場合の代わりのテキスト等を表示するalt属性も一緒に使います。
classも指定することができます。画像のサイズなど変える時などにクラス属性を付与します。<img src="images/example.png" alt="画像" class="second-image">
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>画像表示</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <div class="main"> <div class="first-content"> </div> <div class="second-content"> <img src="images/example.png" alt="画像" class="second-image"> </div> <div class="third-content"></div> </div> <footer> </footer> </body> </html>header { height: 60px; width: 100%; background-color: lightsalmon; } .main { height: 500px; width: 100%; background-color: lightyellow; display: flex; justify-content: space-between; align-items: center; } .first-content { width: 300px; height: 100%; background-color: lightsteelblue; } .second-image { width: 300px; height: 300px; } .second-content { width: 300px; height: 100%; background-color: lightgreen; } .third-content { width: 300px; height: 100%; background-color: mistyrose; } footer { background-color: peru; height: 50px; width: 100%; }フォームの実装
form要素
フォーム関連要素の集まりを表すブロック要素です。
このなかに、入力フォームや送信フォームを作成します。input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素です。
input要素にはtype属性という設定があり、指定することによって様々な種類のフォーム部品を作れます。
type属性 用途 text １行のテキスト入力欄を作成します checkbox チェックボックスを複数作成することができます radio 複数の中から１つしか選択できない、ラジオボタンを作ります submit 送信ボタンを作ります
placeholder属性
入力フォームに仮の文字列を入れることができます。
extarea要素
複数行のテキスト入力欄を作成するインライン要素です。
value属性
フォームの送信をした時に、どのような値を送信するのかを決めることができます。送信ボタンは、
value属性で指定した文字が表示されます。<html> <head> <meta charset="UTF-8"> <title>Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="contact"> <form class="contact-form"> <input type="text" placeholder="名前" class="name"> <textarea name="message" placeholder="メッセージ" class="message"></textarea> <input type="submit" value="送信する" class="send"> </form> </div> </body> </html>.contact { height: 700px; background-color: linen; display: flex; justify-content: center; align-items: center; } .contact-form { width: 400px; } .name { margin: 0 auto 10px; } .message { height: 120px; margin: 0 auto 30px; } .name, .message { width: 400px; padding: 18px; border: 2px solid blue; display: block; } .send { width: 200px; margin: 0 auto; padding: 15px; border: 2px solid blueviolet; border-radius: 10px; color: black; background-color: lightgrey; display: block; }以上です。
