20210221のCSSに関する記事は10件です。

投稿日：2021-02-21T22:35:52+09:00

【丁寧な解説書】jsプラグインModaal　〜導入編〜

はじめに

モーダル。押すとぽんって出てきて、背景が黒っぽくなるやつ。webデザインやってたら使いたいな！ってタイミング出てくると思うんです。
それ、簡単に導入出来ちゃうjsプラグインmodaalの解説しちゃうよ。

ちなみに、一応丁寧にこれだけ見たら導入できるように解説していきますが、jQueryってなんぞやって方はこちらを先に見ておくのがおすすめ。

jQueryの基礎知識

Modaalの導入手順

1. modaalファイルのダウンロード

まず、Github開いて Githubの公式サイトはこちら

Codeという緑ボタンを押し、
Download ZIPを押してファイルをダウンロード！！

zipファイルを解凍して以下のファイルを自分の作業しているフォルダ内に設置してください。
modaal.css　
modaal.js

sorceフォルダか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のCDNはこちら

こちらのjQuery Core 3.5.1 -minifiedをクリックしてぽんっと出てきたものをコピペしてくださいー！

jQueryの読み込み順序は合ってる？

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="modaal.js"></script>

<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]プラグインの使い方

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-21T21:13:50+09:00

画面のスクロール

要素をスクロールしたい時

ビューを作っているときに、中身のボリュームが増えると、画面からはみ出してしまうのではと不安になった時は
.rooms {
  overflow: scroll;
}
今回は例としてルームという要素に対して
overflow: scroll;
を使用しています。
これによって
ルームが100個とかになっても画面をスクロールすることで問題なく表示することができるようになります。

　 Tweet
Qiitaで続きを読む

投稿日：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;　として、背景の上に画像が表示されるように設定しています。

最後に

　いかがでしょうか、説明は最低限となってしまいましたが、この記事を参考にして、ぜひモーダルを作ってみてください。

　 Tweet
Qiitaで続きを読む

投稿日：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;　として、背景の上に画像が表示されるように設定しています。

最後に

　いかがでしょうか、説明は最低限となってしまいましたが、この記事を参考にして、ぜひモーダルを作ってみてください。

　 Tweet
Qiitaで続きを読む

投稿日：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プロパティを用いて優先順位を変える.

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-21T20:00:05+09:00

reactで条件にあった時に特定のclassを付与する書き方

今回、reactでclassNameを動的に付与させたいと思ったので、調べたことを備忘録として残しておきます。

書き方

共通のクラス名を付与しない場合

① true or false で違うクラス名を付与する
<p className={completed? "completed" :"incomplete"}>
   hoge
</p>
この場合、trueならcompletedが、falseならincompleteが付与されます。

② falseの場合はクラス名なし、trueの時に１つだけクラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する
<p className={completed? "completed" :""}>
   completed  
</p>
③ falseの場合はクラス名なし、trueの時に2つ以上クラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する
<p className={completed? "completed hoge" :""}>
   completed  
</p>
この場合は通常のクラス名の記載方法と同じで半角スペースを開けて記載すればOK

どちらにも共通のクラス名を付与した上で、+αで条件によってクラス名を付与したい場合
<p className={`item ${completed? "completed" :""}`}>
   completed  
</p>
この場合、completedがtrueでもfalseでもクラス名itemは付与されます。
バッククオートで全体を囲み、条件分岐の箇所を${}で囲ってあげればOKです。条件分岐の書き方に関しては今までの書き方と同じです。

+を使って以下のように書くこともできます。
<p className={'item ' + (completed? "completed" :"")}>
   completed  
</p>
気をつけるポイントとしてはitemの後に半角を入れる必要があります。
もし、半角を入れずに、completedがtrueになった場合、クラス名がitemcompletedとなってしまい、思うようにCSSが適用されなくなってしまいます。

以上、動的にクラス名を付与したいときの書き方でした！

参考記事

【JS】ReactのclassNameの色々な書き方紹介

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-21T19:59:27+09:00

【丁寧な解説書】jsプラグインModaal　〜カスタマイズ編〜

はじめに

ここでは、めちゃ便利なModaalのたくさんのカスタマイズを丁寧に解説していきます。
ちなみにModaalの導入についてはこちらの記事をご覧ください。
【丁寧な解説書】jsプラグインModaal　〜導入編〜

公式のサイトはこちら
* 公式サイト
* github

カスタマイズそもそも

まず、カスタマイズってそもそもどこを変えたらいいのっていう方のために、初歩的なお話をするのでそんなの余裕だよ！って方は次に進んでください。

まずは例をどんっ！
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 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に指定したときのことは省いています。また頑張って勉強してから追加できたらしますー！
というわけで、ご覧いただきありがとうございましたー！

カスタマイズ	解説メモ
inline	inline要素を表示させたい inline要素の解説はこちら
image	画像を表示させたい
iframe	別のHTMLファイルを表示させたい（Youtubeの埋め込みなど）
confirm	確認ダイアログなどの表示
video	動画を表示させたい
instagram	instagramを表示させたい

カスタマイズ	解説メモ
false	閉じるボタンを表示
true	閉じるボタンを非表示

キー（key）	デフォルト
confirm_button_text	Confirm
confirm_cancel_button_text	Cancel
confirm_title	Confirm Title
confirm_content	This is the default confirm dialog ‥‥

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-21T18:32:04+09:00

【CSS】 margin 0 autoが効かない原因と対処法

CSSで文字を中央寄せするために「margin 0 auto」を指定したのにも関わらず効いていなくて中央寄せにならないことがあります。
今回は中央寄せにならない原因とその対処法について解説していきたいと思います。

margin 0 autoが効かない原因と対処法

原因1　インライン要素にmarginをしている
index.html
  <body>
    <h1><a href="#">中央寄せ</h1>
  </body>
stylesheet.css
a {
  margin: 0 auto;
}
　中央寄せになっていないのは、marginがかかっている要素がインライン要素だからです。インライン要素にはmarginやpaddingを指定できません。
インライン要素は、aタグ（リンク）、spanタグ（テキスト）、imgタグ（リンク）などのことです。
インライン要素を中央寄せしたいときは、text-alignを使用することで中央寄せにすることができます。ただし、親要素に指定します。
stylesheet.css
h1 {
  text-align: center;
}
原因2　ブロック要素に指定しているがwidthを指定していない
index.html
  <body>
    <h1>中央寄せ</h1>
  </body>
stylesheet.css
h1 {
  margin: 0 auto;
}
上記のように、ブロック要素にmargin 0 autoを使用しているのに中央によらない場合があります。この時の原因として考えられるのは、要素の横幅が画面いっぱいに広がっているため、要素を動かすことができないことが挙げられます。よくわからない時は一度、borderプロパティなどを用いて要素を可視化してみましょう。
stylesheet.css
h1 {
  margin: 0 auto;
  border: 2px solid #000000;
}
このときは、widthを用いて親要素より幅を小さくすることで要素を中央に寄せることができます。
stylesheet.css
h1 {
  margin: 0 auto;
  border: 2px solid #000000;
  width: 150px;
}
まとめ

今回は、margin 0 autoを指定しても中央寄せにならない原因と対処法について解説しました。
初心者だと文字が中央寄せにならない等ということで結構悩むことが出てきます。
marginが反映されない時は、一度borderなどを用いて要素を可視化することで原因を特定することができることがあります。
cssでmarginで中央寄せができない時はぜひ参考にしてみてください。

　 Tweet
Qiitaで続きを読む

投稿日：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制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：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>
css
header{
  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;
}
以上です。

値との組み合わせ	説明
display: block;	ブロックレベル要素
display: inline;	インライン要素
display: inline-block;	並びはインライン要素だが、中身はブロックレベル要素
display: flex;	要素の子要素が横並びになる
display: none;	指定された要素は、非表示になる

組み合わせ	説明
padding: ○px;	[上下左右]の内側の余白をまとめて指定
padding: ○px △px;	[上下][左右]の内側の余白指定
padding: ○px △px □px;	[上][左右][下]の内側の余白を指定
display: flex;	[上][左右][下]の内側の余白指定
padding: ○px △px □px ☆px;	[上][右][下][左]の内側の余白指定

組み合わせ	説明
position: relative;	現在の位置を基準に相対的な位置を決める
position: absolute;	特定の地点を基準に絶対的な位置を決める（初期値の基準はウィンドウ左上）
position: fixed;	要素を指定した位置に固定する

type属性	用途
text	１行のテキスト入力欄を作成します
checkbox	チェックボックスを複数作成することができます
radio	複数の中から１つしか選択できない、ラジオボタンを作ります
submit	送信ボタンを作ります

　 Tweet
Qiitaで続きを読む

20210221のCSSに関する記事は10件です。

【丁寧な解説書】jsプラグインModaal 〜導入編〜

はじめに

Modaalの導入手順

1. modaalファイルのダウンロード

2. ファイルの読み込み

3. modaal.jsを動かすコードを書きます

4. plus うまく行かなかった時に確認すべきこと！

Modaalのカスタマイズ

Modaal導入での失敗経験

最後に

参考文献

画面のスクロール

要素をスクロールしたい時

javascriptでモーダルを作ろう！

モーダルとは

モーダルの構造

コードの全体像

コードの解説

HTMLについて

javascriptについて

cssについて

最後に

＜初心者向け＞javascriptでモーダルを作ろう！

モーダルとは

モーダルの構造

コードの全体像

コードの解説

HTMLについて

javascriptについて

cssについて

最後に

CSS基礎

font-sizeプロパティ

margin・paddingプロパティ

box-sizingプロパティ

displayプロパティ

positionプロパティ

vertical-allignプロパティ

before after

box-shadowプロパティ

overflowプロパティ

min max widthプロパティ

transformプロパティ

floatとclearfix

nthoftypeプロパティ

cssカウンタ

z-index

reactで条件にあった時に特定のclassを付与する書き方

書き方

共通のクラス名を付与しない場合

どちらにも共通のクラス名を付与した上で、+αで条件によってクラス名を付与したい場合

参考記事

【丁寧な解説書】jsプラグインModaal 〜カスタマイズ編〜

はじめに

カスタマイズそもそも

本題のカスタマイズオプション解説

頻出度高め

1. type

2. background

3. animation_speed

4. background_scroll

5. width

6. height

頻出度低め

1. hide_close

2. overlay_opacity

3. fullscreen

4. start_open

5. overlay_close

confirmのカスタマイズ

終わりに

【CSS】 margin 0 autoが効かない原因と対処法

margin 0 autoが効かない原因と対処法

原因1 インライン要素にmarginをしている

原因2 ブロック要素に指定しているがwidthを指定していない

まとめ

【初心者でもわかる】cssで水面に反射したような鏡面反射を作成する方法

どうも7noteです。鏡面反射の作り方。

鏡面反射のソースの書き方

【丁寧な解説書】jsプラグインModaal　〜導入編〜

【丁寧な解説書】jsプラグインModaal　〜カスタマイズ編〜

原因1　インライン要素にmarginをしている

原因2　ブロック要素に指定しているがwidthを指定していない