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

レスポンシブWEBデザイン

レスポンシブWEBデザインについて

目的

  • レスポンシブWebデザインとは何か理解すること
  • Webサイトをレスポンシブ対応にする方法を理解すること

下記3行目の部分

<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>DEMO</title>
 <link rel="stylesheet" href="./css/reset.css" />
 <link rel="stylesheet" href="./css/style.css" />
</head>

画面サイズによってCSSを切り替える方法

@media (max-width: 500px) {
  p {
    font-size: 10px
  }
}

メディアクエリ

表示された画面幅に応じて適用するスタイルを切り替える機能を指す。またメディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼ぶ

ブレークポイント

ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指す。@media (max-width: 500px){ }の場合は500pxがブレークポイントとなる。ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わる。PCとスマホのみの対応であれば、ブレークポイントは1箇所で済みますが、タブレットにも対応となると、2箇所ブレークポイントが必要になる

967b10492eca36bcbd025c324f547d79.png

画面サイズごとにCSSを適用する方法

/* PC表示時 */
p {
 font-size: 30px
}

/* タブレット表示時 */
@media (max-width: 1000px) {
  p {
    font-size: 25px
  }
}

/* スマホ表示時 */
@media (max-width: 500px) {
  p {
    font-size: 20px
  }
}

現場からは以上です!

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

【HTML&CSS】CSSで使う単位とその意味

プログラミング勉強日記

2020年10月20日
px,%,emなどサイズを指定する単位はたくさんあって、それぞれの違い理解しておかないといけないと思ったのでまとめる。

ピクセル単位(px)

 ピクセルはサイズを固定する単位。1ピクセルは画面上ではドット1個で表示する。

 ピクセル単位は柔軟性に欠けるのでfont-sizeの設定には向いてない

Em単位(em)

 1emの大きさはブラウザのfont-sizeのデフォルトの値で決まる。初期設定では1emは16pxである。em単位の値は要素が継承したfont-sizeによって決まる。

 フォントサイズ設定に使うとユーザ設定のオーバーライドに関する問題を回避しやすい。

Rem単位(rem)

 1remの値はルート要素のfont-size値と同じ。

 em単位では親要素のfont-sizeに従って子要素のfont-sizeが拡大縮小することがem単位の値を計算するプロセスを複雑にしてしまうことがあるので、よくないこともある。rem単位にはそういった点がない。
 具体的には、独立した親コンテナのfont-sizeでrem単位を指定すれば、モジュール内の全要素のfont-sizeを親要素に従って設定でき、他のモジュールから切り離して設定できる。

パーセント(%)

 パーセントはem単位と同様。

 ルート要素におけるブレークポイントでfont-sizeを設定するので、レスポンシブデザインでの計算が簡単になる。

Viewport単位(vw, vh, vmin, vmax)

 様々な要素のfont-sizeをビューポートのサイズを基準にして設定できる。

 ビューポートサイズが小さすぎたり大きすぎたりすると、font-sizeではテキストが読みにくくなってしまう可能性がある。

参考文献

HTMLでemでフォントサイズを指定する方法を現役エンジニアが解説【初心者向け】
CSS初心者が混乱しがちな7つの単位の意味と違いをしっかり理解しよう

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

【初心者向け】select要素にプレースホルダーを付ける方法と付けられない理由の考察

どうも7noteです。select要素のプレースホルダーについて。

ちょっと変な矛盾しているタイトルですが、ご了承ください。

先日、デザインに合わせてコーディングをしていた時のことなのですが、select要素にplaceholderのような見た目を付ける場面に出会いました。
私もいろいろ調べてみたのですが、厳密にはselect要素にplaceholderを指定できません(指定しても何もなりません)。

  • とりあえず無理やりな方法でもいいからselect要素にplaceholderを指定したい方は①から
  • select要素にplaceholderを選択できない理由が知りたい方は②から

①select要素でplaceholderっぽく見せる方法

その1:入力後、サンプルは選択肢から消す方法

<select>
  <option value="" disabled selected style="display:none;">選択してください</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>

引用元:https://scriptgraph.blogspot.com/2015/07/select.html

こちらは、optionの1つ目をplaceholderっぽくみせておき、選択肢からは非表示にする方法です。
selectedがついているので、ページ読み込み時は「選択してください」の文字がselect内にでますが、"display=none;"が指定されているため選択肢には表示されません。そのため、placeholderっぽい役割を果たします。

この方法の注意点としては、placeholderのように色を薄く出来ない事と、
デフォルトが「全て」という選択肢ではないことに気を付けなければなりません。

その2:1つ目だけplaceholderのように色を薄くする方法(javascript)

<select>
  <option value="placeholder">選択してください</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>

<style>
  select { color: #ddd; }
  option { color: #333; }
</style>

<script>
$(function(){
    $('select').on('change', function(){
        if($(this).val() == "placeholder"){
            $(this).css('color','#ddd')
        } else {
            $(this).css('color','#333')
        }
    });
});
</script>

javascript(&jQuery)を使い、特定の選択肢が指定された時のみ色を変更する書き方ができます。
この方法が一番textboxなどのplaceholderに近い書き方になるかなと思います。

②なぜselect要素にはplaceholderが存在しないのかの考察

そもそも、デフォルトの属性としてplaceholderが存在しないという事はそのような使い方を推奨していないということだと考えます。

「必ず選択肢のうちのどれかを選択してもらう時に使うもの」という認識を持って使う方が正しいのではないか。
例でエリア検索するためのselect要素を用意した場合、以下のような書き方はよろしくないのではないかという考えです。

<!-- よくない例 --->
<select>
  <option>エリアを選択</option>
  <!-- ↑これが選択されている場合というのは意味が存在しない。
       これが選択されているときに全国を出すのって「エリアを選択」という日本語と矛盾してるのでは??-->
  <option>東京</option>
  <option>大阪</option>
  <option>名古屋</option>
  ・
  ・
  ・
</select>

<button>検索する</button>

もし、初期値の「エリアを選択してください」のまま検索するボタンが押されたとき、おそらく全国の検索結果を出すと思います。
では、選択肢と表示内容を合わせるのであれば本来selectの値は「全国」となっているのが正しいのではないでしょうか。

もちろん申込フォームなどでは「選択無し」とする場合もあるかもしれませんし、生年月日の入力では「年を選択」などが入っている方が使いやすいと思います。
ただ、そのような場合以外では、基本的には必ずどれかの選択肢を選べるような作りにすべきと私は考えています。
生年月日なども、デフォルトは「年を選択」などを入れずに、サイトに適した中央値あたりの数字を入れておく方がいいと思いますし、むしろそのように使うものだと思います。

賛否両論あるかもしれませんが、事実select要素にはplaceholderの指定ができないので、あながち間違いじゃないのかも。と思っています。

ご意見お考えある方是非コメントください!お待ちしています!

まとめ

select要素でplaceholderっぽいことはできるが、必ずどれかが選択されているという考えで作成する方が正しいのではないか。

おそまつ!

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

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

(初心者向け)CSSホバーアニメーションの実装方法

この記事で得られるもの

  • CSSのホバーのアニメーションの実装の考え方がわかる
  • CSSでホバーのアニメーションの実装方法を順を追って理解できる
  • 考え方が理解できるため、サンプルコードのコピペではなく応用したコードが書ける

想定読者

  • CSSのセレクタ、プロパティの基本は知っているが、ホバーアニメーションを書こうと思うと混乱する
  • 動くものは書けるが、正しい綺麗な書き方を知りたい方
  • コードレビューでプロパティの重複や不要なプロパティを指摘されることがある方

前提

transitionを前提としています。
animation、JavaSctiptを使った動きはここでは解説しません。

実装

動きを定義するのではなく、ホバー状態・通常状態を定義し、その間を変化する

これが全ての考え方の基本になります。
どう動くか考えるのではなく、それぞれの状態ごとに装飾が定義され、その間を徐々に変化すると覚えてください。
基本がわかれば、大抵のデザインはこの応用で実装できます。

ホバーするとリンクの下線が伸びながら出現する場合

<a class="block">リンク<span class="block__decoration"></span></a>

See the Pen GRqjpRz by kne-cr (@kne-cr) on CodePen.

1.先にホバー状態をコーディング

色々な考え方はあると思いますが、私は通常状態のセレクタ内に一旦ホバー状態をコーディングすることをおすすめします。
なぜかと言うと、通常状態は装飾が非表示だったりシンプルで、ホバー状態で装飾が出現することが多いためです。
通常状態を先にコーディングしようとしても「ホバーするとこう出現するから...」ということを結局考えることが必要で、出現していない状態を先に考えることは慣れていないと難しいです。

.block {
  position: relative;
}

/* まだ:hoverステートはつけない */
/* ホバー時に現れる下線を一旦コーディングしてしまう */
.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
}

これで画面にはホバー状態の装飾が表示されるようになります。

2.次に通常状態をコーディング

2.1.ホバー状態と通常状態で値が変わるプロパティを探す

例えば、文字色が変わるのであればcolor、背景色が変わるのであればbackground(background-color)ですね。
特に注意が必要なのはなかったものが現れる場合で、この場合は透明だから見えてないのか、サイズが小さい(0)から見えてないのか、画面外にあるから見えてないのか、などどう捉えるかを決めましょう。
透明だから見えていないなら不透明度を上げながら出現するし、サイズが小さいから見えていないなら大きくなりながら出現します。
また、変化するものが以下である場合、基本的に表のプロパティを使うようにしましょう。理由は簡単に言うと、それ用にあるプロパティのため記述も直接的だし動きもスムーズだからです。

動き NGプロパティ OKプロパティ
その場で出現する display opacity
伸びて出現する height, width transform: scale
移動する top, left, right, bottom transform: translate

今回は横幅が伸びて出現するようにしたいので、transform: scaleを使います。

2.2.通常状態に書き換える

先の手順でホバー状態と通常状態で値が変わるプロパティはtransform: scaleであることがわかりました。
このプロパティを通常状態・ホバー状態それぞれに記載します。
今回は非表示(幅0倍)から表示(幅1倍)に変更したいため、以下の通り記載します。

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  /* 通常状態は幅を0にして非表示 */
  transform: scaleX(0);
}

.block:hover .block__decoration {
  /* ホバー状態はそのまま表示 */
  transform: scaleX(1);
}

これで画面はホバーすると装飾が切り替わるようになります。

3.変化を定義する

あとはアニメーションのタイミングと速さを決めるだけです。

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  transform: scaleX(0);
  /* 速さを指定 */
  transition: .5s;
}

.block:hover .block__decoration {
  transform: scaleX(1);
}

これで画面はサンプルコードと同じ状態になります。

ホバーするとリンクの下線が下からふわっと出現する場合

他の動きや形でも考え方は同じです。

<a class="block">リンク<span class="block__decoration"></span></a>

See the Pen MWejaKb by kne-cr (@kne-cr) on CodePen.

1.先にホバー状態をコーディング

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
}

2.次に通常状態をコーディング

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  /* 通常状態は文字より下に離し透明にしておく */
  transform: translateY(5px);
  opacity: 0;
}

.block:hover .block__decoration {
  /* ホバー状態は文字は文字に近づけて不透明にする */
  transform: translateY(0);
  opacity: 1;
}

3.変化を定義する

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  transform: translateY(5px);
  opacity: 0;
  /* 速さを指定 */
  transition: .5s;
}

.block:hover .block__decoration {
  transform: translateY(0);
  opacity: 1;
}

補足

  1. 正しさよりも分かりやすさを優先している箇所があります
  2. NGプロパティは絶対使うなというわけではなく、回避するデメリットが大きければ使っても間違いではありません
  3. あくまで思考を整理するための手順ですので、慣れればこの手順でやる必要は全くありません
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Laravel】public/css内のCSSを読み込まないエラー 〜 net::ERR_CONNECTION_CLOSED〜

【背景】

AWSからVagrantにローカル環境を変えて、開発を行う。
Viewを作成時に、コンパイルしたcssを読み込もうしても、Viewに反映されず行き詰まる。

【状況の確認】

Bladeファイルのheadタグ内にCSSを読み込む記述がされているか確認。

 <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
 <link href="{{ secure_asset('css/style.css') }}" rel="stylesheet">

次にchromeの検証ツールでエラー内容を確認。エラーは検証ツール画面の右上の設定マークの横にある赤いバツ❌をクリックします。
スクリーンショット 2020-09-07 17.47.18.png
net::ERR_CONNECTION_CLOSED と表示されています。
どうやら接続ができない様子。Javascriptの方もできていない。

【解決法】

Blade内のsecure_の部分を消す。

 <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 <link href="{{ asset('css/style.css') }}" rel="stylesheet">

同ファイル内のJavascriptの部分も直します。

 <script src="{{ asset('js/app.js') }}" defer></script>

これでブラウザで確認すればCSSが反映されていると思います。

【原因】

Web環境のhttpsを使った環境だとsecure_を付ける必要がある。
今回、開発環境をAWSからローカル環境のVagrantに変えたので、記述を変える必要があったようです。

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

画像の間の隙間

画像の中に隙間ができてチョベリバ( *`ω´)

cssの親子要素に以下を加えいました

.top-logo-class{
position: fixed;
text-align:center;//加える
}
.header-image{
width: 100vw;
height:20vh;
vertical-align:top;//加える

直りましたーー

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

クイズアプリを作ってみた

クイズアプリを作りました
https://siruba75.github.io/Rabbit_Quiz/

ドットインストールのクイズアプリを作る講座を見て、一度選択肢をクリックすると回答が出てきてそこでクイズが終わってしまうのが残念に感じ、選択肢を選べるようにするにはどうすればいいのかを自分なりに考えました

こちらがソースコードです
https://github.com/siruba75/Rabbit_Quiz

是非ご覧ください

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

スクロールダウンしたときにヌルッとでてくるヘッダーの作り方

はじめに

Web制作をしていくなかで、スクロールダウンをしたときにヘッダーとは異なるヘッダーを常時だしておきたいときに、こちらの方法で実装しました。

備忘録として、メモを残しておきます。

コードの書きかた

class名はjsが適用されるときはプリフィックスとして、jsを付けています。

index.html
<div id="js-header">
 <div class="js-header__menu">
  <ul class="js-header__list">
          <li><a href="#">メニューA</a></li>
          <li><a href="#">メニューB</a></li>
          <li><a href="#">メニューC</a></li>
          <li><a href="#">メニューD</a></li>
          <li><a href="#">メニューE</a></li>
        </ul>
      </div>
  </div>
style.css
#js-header {
  line-height: 66px;
  top: -66px; /* 上に隠す高さ */
  left: 0;
  width: 100%;
  margin: 0 auto;
  overflow: scroll;
  position: fixed;
  opacity: 0;
  z-index: 1000;
}
script.js
  jQuery(function () {
    "use strict";
    var flag = "view";

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
          flag = "hide";
        }

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }
    });
  });

どっかからひろってきたコードです。
理解はできていないくても普通に使えたんですが、せっかくなので1行ずつみていきますか。

  jQuery(function () {
    "use strict";
    var flag = "view";

falg変数のデフォルト値として「view」を指定しています。変数flagを使わないと、ページをスクロールしていると常に同じ処理が繰り返されてしまうようです。

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
         // flag変数の値を「hide」に変更
          flag = "hide";
        }

scrollが200に到達したら#js-headerにopacity:1.0を与える指示をしています。
もともとのCSSには、opacity:0;を指定しておいて、スクロールしたときにopacity:1.0にすることで表示させているんですね。
ちなみにこの200の数字の単位は、pxなはず。

top:0というのはcssでtop:-66pxで上に隠していたのを下におろして表示させるための指示です。
書いていて思いましたが、opacityでも非表示にして、高さでも隠してなぜダブルでやっているんだろうか、、。

また、500(0.5秒)という数字を変えると表示される速度が変わります。好みに合わせてください。

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }

今はhideのフラッグがたっています。
こちらでは、スクロールアップしていったときに通常のヘッダーの表示に切り替える指示をだしています。
※ヌルッとでてきたヘッダーを隠す指示

同様に、top:-66pxとopacity:0を500(0.5秒)で行っています。
そして、flagをviewに戻しています。

まとめ

今までコピペで対応してきたんですが、応用力を高めるためにコピペ内容を自分なりにまとめてみました。
非常に勉強になったので今後も続けていきます。

たぶん。

■参考にした記事
マークダウンの書き方
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1

ヘッダーの作成方法
https://naughties.net/2018/02/05/scroll-fixed-header/
https://mae.chab.in/archives/2699

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

swiperでエラーが出ないのに、意図しない動き

なんか動きがきもい

コンソールエラーとか吐いてない、意味わかんない

原因はeasingでした

必死にjsと睨めっこしたって、開発画面を凝視してエラー探したってあるわけない。
だってeasingはcss animationで上書きして指定するんだもの。

感想

アニメーションをどっちに任せるか、迷うところ。
厳密に定義して、readmeに書いた方がいい。(コレに限らず、どっちの言語でも表現できるようなやつは)
jsは重いかもだけど、エラー出してくれる(かも)だし、
css大好きマンだけど気持ちが揺らいだ。

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

Laravel7 でCSSが読み込めない

Laravel 7.25.0です。

CSSの場所:
Laravel/public/css/app.css
HTMLの場所
Laravel/resources/views/layouts.blade.php

問題点

何故かCSSが読み込めなかった。

解決

<link rel="stylesheet" href="/css/app.css">

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

に変えたら読み込めました。

原因

不明です。(すみません)

参考

https://teratail.com/questions/126308

おしまい。

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