What's New Qiita

20201019のCSSに関する記事は9件です。

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

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

はじめに

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

実装前のサイト（before）

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <!--省略 -->
  <head>
  <body>
    <!--表示するサイトのコード部分。省略。-->

    <!--jQueryライブラリの読み込み。-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
    </script>
    <!--処理速度を速くするため、また可読性を上げるため、jQueryの記述は、jsファイルに分けた。-->
    <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>
    <!--表示するサイトのコード部分。省略。-->

    <!--ここからモーダル表示・非表示-->
    <!--お問い合わせフォームボタンを作成。ボタンをクリックしたときに発火させるため、idとclassを付けた。-->
      <div id="inquire_show" class="submit"><button type="submit" class="inquire_btn">お問い合わせフォームはこちら</button></div>
    <!--ボタンクリック前までは、CSS上の記述「display:none;」で非表示になっている部分＝モーダル-->
        <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タグにはモーダルしたい部分を記述。-->
              </article>
            </div>
        </div>
    </div>
    <footer class="footer">
      <!--フッターの記述。省略。-->
    </footer>
  </div>
<!--jQueryライブラリの読み込み。STEP１と同じなので省略。-->
</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）

preview_after.gif

参考（github）

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T21:44:52+09:00

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

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

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

ふわっと浮くボタン
fuwa.gif

押した風になるボタン
boko.gif

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

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のちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T21:26:31+09:00

読みやすいCSSを書くために心がけていること

読みやすい、理解されやすい、CSS（Stylus, SCSS, SASS）を書くために、
日頃意識している「これはやらない」を挙げていけば、
きっと読みやすいCSSが書けるようになるのでは・・・のアプローチです。

本記事では、SCSS記法で例示します。

色は直書きせずに変数で定義する

  • 増えがちな無彩色は、rgb値で整理する
  • その他は、連番で定義する
$white: #fff;
$black: #000;

$color-255: rgb(255, 255, 255);
$color-240 : rgb(240, 240, 240);
$color-51 : rgb(51, 51, 51);

media queryも変数で定義する

突然のbreakpointの変更にも対応できる

sm = "(max-width: 899px)"
md = "(min-width: 900px) and (max-width: 1023px)"
lg = "(min-width: 1024px)"

SCSSには、postcss-custom-mediaを使用して次のように書く

.block__element--modifier {
  @media(--lg) {
    // pc用の記述
  }
  @media(--sm) {
    // sp用の記述
  }
}

media query で打ち消さない

:no_good: PCで定義して、SPでその記述を打ち消す

.example {
 // PC
 float: left; 

 @media (--sm) {
   float: none; //SPのためにfloatを打ち消す
  }
}

:ok_woman: SPとPCの定義を分ける

.hogehoge {
　　// SPとPCで共通したスタイル
 @media(--sm) {
   // スマートフォン用のスタイル
  }
　@media(--lg) {
   // タブレットおよびPC用のスタイル
  }
}

プロパティの順番をぐちゃぐちゃにしない

思いついた順、ではなく、一定のルールを意識してコーディングする癖をつける

stylelint-config-recess-orederを.stylelintrc.jsで定義すると楽

孫セレクタをつくらない

1つのBlockに対し、Elementは1つ、Modifierも1つ

:no_good: __(element) --(modifier) が2個以上続く

.area__heading__icon
.area__heading__text
.area__imge__shoulder

:ok_woman: __(element) __(modifier) は1つだけ
block__element1(子)__element2(孫) となった場合は、element1 をBlockレベルに上げて、block-element1__element2 とする

.area__image
.area__heading
.area__shoulder

ネストは深くしない

  • blockが親、elementが子、media query が孫になるように記述する
.block {
 &__image {
 }
 &__heading {
   @media (--lg) {
     // pc用のスタイル
   }
   @media (--sm) {
     // sp用のスタイル
　　}
 }

Media queryの中にクラスの定義はしない

書き出されたCSSとは逆の入れ子になるが、クラス名の中にmedia queryが内包されるようにする
:no_good:

.block　{
   @media (--pc)
     &__image
      // Something here

:ok_woman: 

.block
   &__image
     @media pc
       // Something here

urlは、パスを記述するときはダブルクオーテーション

「付けない」「シングルクオーテーション」「ダブルクオーテーション」を付けるのいずれかを徹底する

background: url("../images/bg.png") left top no-repeat

idセレクタは使わずclassセレクタを使う

スペース、改行、セミコロン、カンマの記法を揃える

SCSS記法、{}:,を使う場合

  • セレクタのあとは .selector { スペース１つあけて、{
  • 1行にプロパティ1つ
  • プロパティのあとは、コロンの前にはスペースを入れず、コロンのあとにスペースを1つ入れる
  • rgba値など、カンマが続く場合は、カンマのあとにスペースを1つ入れる ex rgba(25, 25, 25, 0.2)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T16:37:25+09:00

hover時のCSS無効、CSSでHTMLの要素の順番を変える、疑似クラス

最近使ったCSSやjQueryの技:sparkles:をまとめます。その１

お品書き

  • hove時のCSSを無効にする・・・pointer-events: none;
  • 要素の順番をCSSで入れ替える・・・flexbox
  • クラスの何番目の要素で指定・・・疑似クラス:nth-child()

hove時のCSSを無効にする

以前、checkboxの値に応じてボタンの有効無効を切り替える記事を書いたのですが、
:point_down_tone2::point_down_tone2::point_down_tone2:
jQuery　checkboxに応じて切り替え 　:qiita:

もともとボタンをhoverしたときにボタンの色が濃くなるなどのCSSはそのまま適用されてしまうので、利用する側からは押している感覚（といって正しいのか）があるのに、ページが進まないのは変だよね。

ということで、hover時のCSSを無効にする方法を調べた。:runner_tone3::runner_tone3::runner_tone3:
ボタンにdisabled属性をつけたり外したりしてボタンの有効無効を変えていたので、
CSSも同じ要領でやる？と考えたんですが、もっとお気軽な方法が！

css
button[disabled] {
    pointer-events: none;
}

なんて簡単！:heart_eyes: :heart_eyes: :heart_eyes:
pointer-eventsは初期値ではautoで、
noneにすることでその要素がポインターイベントの対象にならなくなる。

要素の順番をCSSで入れ替える

HTMLは変更せずにCSSだけで要素の順番を変えたい！

flexboxを使う

html
<div class="main">
  <ul>
　　<li class="text">22222</li>
　　<li class="text">33333</li>
　　<li class="text">11111</li>
　　<div>
  </ul>
</div>

上記のコードでは数字が2→3→1になってしまうので、正しい順番に表示したい。
ただ、HTMLの順番を変えるのではなく、CSSで順番を変える。（たとえば、PCとスマホバージョンで表示の順番を変えるときとかに使う）
このときに使うのがfrexbox

Flexboxの使い方

親要素にcssでdisplay:flexbox;を追加。
これを追加することで、親要素をFlexコンテナーに設定。
Flexコンテナーに含まれる子要素をFlexアイテムとして設定される。
さらに、flex-directionで並び方をいじれる。初期値はrow。縦（公式的には積み重なるように）にしたかったので今回はcolumnで指定。

css
main {  
    display:flex;
        flex-direction:column;
}

さらに、子要素にorder:順番を示す数字;を設定することで表示させる順序を入れ替える事ができる。
・・・今回はここで問題発生
子要素のクラスが3つともtextなので、指定するにはどうすれば？:joy:
擬似クラスという便利なものがあるそうで。それを使ってみる。

css
.text:nth-child(1){
    order:2
}
.text:nth-child(2){
    order:3
}
.text:nth-child(3){
    order:1
}

これで、textクラスの表示の順番を変えることができた。
ちなみに、孫要素には効かないらしいので注意。:point_up_tone2::point_up_tone2::point_up_tone2:

擬似クラス

さっき使った擬似クラスについて。

対象となる要素：nth-child(n)

これで、対象となる要素の中でn番目の要素を指定することができる。クラスを増やすまでではないときに使うと良さそう。
ちなみに、()の中身は2nとかで偶数番目だけとかで色々条件指定ができるそう。
細かく見たいときはこちらを。（下の方に参考にしたサイト全部のせてます）

参考にしたサイト

pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
【Flexbox】HTMLの記述を変えずに表示順を変えるCSS
要素の順番を入れ替えられるflexboxのorderを活用しよう
CSS公式-flex-direction-
E:nth-child(n) 疑似クラス《前からn番目、一定間隔おきに指定》-CSS-

  • このエントリーをはてなブックマークに追加
  • 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);
}

image.png

参考文献

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T11:35:56+09:00

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

記事の概要

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

アプリ概要

学習の記録、記録した学習内容の閲覧やデータの集計を行える学習管理アプリ
スクリーンショット 2020-10-07 14.06.56.png
アプリ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へ接続。
スクリーンショット 2020-10-14 0.49.10.png

▼学習内容の保存機能

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

▼学習内容の表示機能

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

▼学習内容の編集機能

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

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

工夫した点

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

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

■月単位での1日あたりの学習時間の平均を表示することで進捗度の可視化を実施。
↓
スクリーンショット 2020-10-14 0.56.42.png

■カテゴリを自分で作成し、使用することができる。
↓カテゴリ編集画面
スクリーンショット 2020-10-14 0.57.50.png

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

苦労したこと

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

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

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

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

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

課題

・レスポンシブ対応

・削除機能の追加

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

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

スクリーンショット 2020-10-12 22.42.09.png

↓テーブル設計

スクリーンショット 2020-10-12 22.41.23.png

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

学んだこと

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

最後に

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

  • このエントリーをはてなブックマークに追加
  • 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

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T06:56:21+09:00

スマホのウインドウの高さぴったりにする（アドレスバー分をちゃんと考慮）

100vhがうまく行かないというのがよく知られている部分ですが

area.js
setInterval(function(){
        $(".area").css({"height":window.innerHeight,"min-height":$(window).innerHeight()});
},100)

横向きにした時など回転直後など、window.innerHeightの値が異様に小さくなる。
スクロールをしてアドレスバーのエリアが小さくなった時には、$(window).innerHeight()が伸びた分を検知してくれない。

でこれをした時にposition:fixed;をしているときにtop:0だと、隠れたりしてしまうので、オススメはbottom:0;

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-19T00:11:05+09:00

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

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

144f999b1a92884d6f066877ca4bb31e.jpg

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%にしておくと画面幅がぴったりになると思うのでこちらも忘れずに！

現場からは以上です！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧