What's New Qiita

20200712のCSSに関する記事は12件です。

  • 投稿日：2020-07-12T21:15:08+09:00

【Laravel】ファビコン(WEBブラウザタブのアイコン)を簡単に作成・設定する方法

使用するサイト

Favicon & App Icon Generator

image.png

使用するのはこちらのサイト。
どんなサイズでもいいので画像を用意しておけば、それをファビコン用に加工・生成してくれます。

Favicon & App Icon Generator

ファビコンの作り方

ファビコンにしたい画像を用意して、Favicon & App Icon Generatorにアクセス
ファイルをアップロードする。
image.png

切り替わった後の画面で、ファビコン化した画像をDLする
image.png

この画面のHTMLタグは後で使います。

ファビコンを設定する

アプリ内にファビコンを配置

・welcome.blade.phpがレイアウト構成を担うbladeファイル
という設定で配置します。

①resourcesディレクトリに画像を保存するimageディレクトリを作成
②さらにimageの中にfaviconディレクトリを作成
③faviconの中に先ほどDLしたファビコン画像を移動

レイアウト構成を担うbladeファイルで参照する

welcome.blade.phpの

タグに、先ほどのファビコンDLページのHTMLタグをコピペします。 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">

href(参照パス)を修正する

hrefのhref(パス)はwelcome.blade.phpからの相対パスになります。
よって、コピペしたhrefを全て下記のように修正しましょう。

href="../images/favicon/apple-icon-57x57.png"

これで設定は完了!
レイアウトで使っているbladeページを表示すればファビコンが設定されているのが分かります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T20:09:51+09:00

【完全オリジナル改訂版】Vueフロントエンジニアがおすすめ！迷わないナビゲーションバーエフェクトまとめ２３選

スクリーンショット 2020-07-12 20.04.17.png

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○

【直感的デザイン】cssで作るナビゲーションバーエフェクト３選

動きは下の画像のような感じになります

１. hoverしたボタンのみ背景色で強調するナビゲーションバーデザイン

css-navbar-animation1.png

２. 円を描くように720度回転＋拡大ナビゲーションバーデザイン

css-navbar-animation2.png

３. 360度横回転しながら拡大する直感的なナビゲーションバーデザイン

css-navbar-animation3.png

:point_down:コードを確認する

スクリーンショット 2020-07-12 19.53.45.png

transform:rotate(X,Y,Z,3d)で回転するナビゲーションバー４選

動きは下の画像のような感じになります

１. transform:rotateXとscaleで縦回転するナビゲーションバーデザイン

transform-rotate-xyz3d-navbar1.png

２. transform:rotateYとscaleで横回転するナビゲーションバーデザイン

transform-rotate-xyz3d-navbar2.png

３. transform:rotateZとscaleでくるっと回転するナビゲーションバーデザイン

transform-rotate-xyz3d-navbar3.png

４. transform:rotate3dとscaleで立体感のあるナビゲーションバーデザイン

transform-rotate-xyz3d-navbar4.png

:point_down:コードを確認する

スクリーンショット 2020-07-12 19.53.54.png

【CSSで作る】動くシンプルなナビゲーションバーデザイン３選

動きは下の画像のような感じになります

１. ちょっとエフェクト効いてるよくありがちなナビゲーションバーデザイン

navigation-simple-design1.png

２. くるっと回転してちょっと楽しいナビゲーションバーデザイン

navigation-simple-design2.png

３. 斜めに伸びてかわいいナビゲーションバーデザイン

navigation-simple-design3.png

:point_down:コードを確認する

スクリーンショット 2020-07-12 19.53.59.png

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選

動きは下の画像のような感じになります

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

header-design-navigation-animation1.png

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

header-design-navigation-animation2.png

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

header-design-navigation-animation3.png

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

header-design-navigation-animation4.png

:point_down:コードを確認する

スクリーンショット 2020-07-04 19.09.11.png

マウスオーバーでドロップダウンするナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ドロップダウンするシンプルなナビゲーションメニュー

hover-animation-navigation-dropdown1.png

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

matereal-design-navigation1.png

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

hover-animation-navigation-dropdown3.png

:point_down:コードを確認する

スクリーンショット 2020-07-04 19.10.03.png

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. hoverするとボタンが浮き上がるナビゲーションメニュー

matereal-design-navigation1.png

２. hoverするとボタンが凹むナビゲーションメニュー

matereal-design-navigation2.png

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

matereal-design-navigation3.png

:point_down:コードを確認する

スクリーンショット 2020-07-04 19.11.41.png

初心者でも簡単！動きのあるナビゲーションバーデザイン３選

動きは下の画像のような感じになります

１. マウスオーバーで文字が太くなるナビゲーションバーデザイン

navigation-bar-animation1.png

２. マウスオーバーで文字が傾くナビゲーションバーデザイン

navigation-bar-animation2.png

３. transform: skew＋hoverでシンプルなナビゲーションバーデザイン

navigation-bar-animation3.png

:point_down:コードを確認する

スクリーンショット 2020-07-06 14.54.02.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T19:54:53+09:00

CSSだけでスタイリッシュな下線付き矢印

色々と探したがありそうでなかったデザイン

今回紹介するのはこんなデザイン！
スクリーンショット 2020-07-12 19.41.52.jpg

なかなかありそうで無かった。。。

下線付き矢印を作る

  <div class="row">
          <div class="moreLink">
            <div class=" moreLinkText">実現したいことについて、もっと知る
              <div class="lineArrow"></div>
            </div>
          </div>
        </div>

.moreLinkText {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
/*ホバーしたときに下線矢印も同時に色を変える*/
.moreLinkText:hover .lineArrow  {
    border-bottom: 1px solid #41A849;
    border-right: 1px solid #41A849;
}
.moreLinkText:hover {
    color: #41A849;
}
.lineArrow {
  width: 120%;
  height: 15px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
   /*傾きを調節*/
  transform: skew(45deg);
  /*下線矢印をテキストに合わせてうまい具合にはめる*/
  margin: -10px 0 0 -25px;
}

参考

https://hirashimatakumi.com/blog/217.html

https://beginners-high.com/css-hover-change/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T19:22:08+09:00

【初心者でもわかる】imgタグのaltの付け方

どうも、7noteです。今回はaltのお話。

imgタグを書くとき、必ずaltを入れていますか？
今回はimgタグにいれるaltについて説明していきます。

そもそもaltとは何？

↓↓↓

「alt」　・・・　alt属性（読み方：オルトぞくせい）と言われるもの。alternativeの略

日本語的にいうと、画像が読み込めなかった時の代替情報と言ったところでしょうか。WEBが画像の読み込みに失敗したりしたときに、代わりに表示する情報（テキスト）ということです。

altを設定する理由って？

大きく2つあり、１つはそのWEBサイトをみている人のため、もう一つは検索エンジンのためです。（SEO対策）。

①WEBサイトをみている人のため

WEBサイトをみているときに、こんなマークみたことないですか？
notimage.png

これは画像が読み込めなかったですという意味のマークになります。
普段パソコンをつかってWEBサイトで調べ物などしてれば1回くらいは見かけたことがあるのかなと思うのですが（最近のサイトにはあまり見かけない）、作成されたのが古いサイトとかだと画像へのパスが変わったり、画像そのものが削除されてしまい画像が読み込めなくなってこのマークが表示されることがあります。

このままではWEBサイトをみていた人が、「ここにはなんの画像が入るんだろう？」となってしまい、なんの画像か分からずにストレスになってしまいます。（そもそも画像出てないのもよくないですが。。。）

こんなときにaltを設定しておくと、こんな風に表示されます。

<img src="cat.jpg" alt="猫の写真">

not_image2.png

マークの横にaltで指定した文字が表示されるようになります。
こうすることで、WEBサイトをみた人が「あ、画像が読み込まれてないけどここには猫の写真が入るんだな」ということを理解できます。

さらにaltの役割としては「音声読み上げ」される際にも利用されます。あまり利用されることは多くないのですが、しっかりとaltを設定することはとても重要な事だと言えます。

notimage3.png

altはできるだけ具体的に書く事を意識しましょう！

②検索エンジンのため（SEO対策）

検索エンジンって聞いた事ありますか？一言で言えばgoogleです笑
WEBサイトを探すときに「ググる」事はよくしますよね。
そして検索結果が出てきて、それで欲しい情報を見つける・・・と。

ではこの検索結果の順番は誰が決めているのでしょうか？そうです、googleです。（もちろんyahooで検索した時はyahooです。）
googleのAIが、世の中のWEBサイトの中身（ソースコード）をみて、検索した人に有益そうな情報が載っているWEBサイトを検索結果の上位に表示されます。
この時、WEBサイトの中身をAIがみに来るのですが、AIはまだ正確に全ての画像を認識して情報を取得することはできません。そのため代わりにaltの内容を情報として扱ってもらえます。

altの設定は検索順位（SEO）にとても重要な役割を果たします。

まとめ

imgタグを書く時は「WEBサイトをみている人のため」「検索エンジンのため（SEO対策）」に必ずaltを設定するようにしましょう！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T18:59:36+09:00

TechAcademyが無料公開している「レスポンシブWebデザイン入門講座」を受講する～第2回～

アジェンダ

  • 文字の装飾
  • 文書の装飾

文字の装飾

文字に線を引く

文字に線を引く場合、以下のように指定する。

text-decoration: 値;

値には単語を用いる。
単語には以下のようなものがある。

none
無し
underline
下線を引く
overline
文字の上に線を引く
line-through
打ち消し線を引く

それぞれ、以下のように表示される。
text-decoration.png

文字に影を付ける

文字に影を付ける場合、以下のように指定する。

text-shadow: 横方向のズレ 縦方向のズレ ぼかし幅 影の色;

横方向のズレ、縦方向のズレ、ぼかし幅は数値で指定する。
影の色は色で指定する。

以下のように表示される。
text-shadow.png

文書の装飾

一行目にインデントを付ける

一行目にインデントを付ける場合、以下のように指定する。

text-indent: 値;

値は数値で指定する。

アルファベットの大文字・小文字のコントロール

アルファベットの大文字小文字をコントロールする場合、以下のように指定する。

text-transform: 値;

値には単語を用いる。
単語には以下のようなものがある。

none
通常
capitalize
全ての単語の先頭を大文字で表示する
lowercase
全てを小文字で表示する
uppercase
全てを大文字で表示する

それぞれ、以下のように表示される。
text-transform.png

おわりに

今回は装飾に関する内容だった。
おしゃれなWebページを作成するためには必要な内容だ。

参考

2-1 文字の装飾（CSSを使った文字の装飾）
2-3 空白などの扱い方について指定する（CSSを使った文字の装飾）
2-4 文字に影をつける（CSSを使った文字の装飾）

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

【HTML/CSS】ブロック要素から文字をはみ出して、特殊なレイアウトを構築！

はじめに

スクリーンショット 2020-07-12 17.14.37.jpg

一見するとかなり難しそうな構成のWebページとなっているが、、、重要なのは下記の２点
・ブロック要素から文字をはみ出させる
・空白のブロックを使う

これらを意識してやれば、そこまで難しくなかったです。

前提

・bootstrap4を使用（ほんの一部）
・display: flex;を理解している

コード全て

 <div class="flexParent animation01">
        <div class="animationNum01 animationNum">
          01
        </div>
        <div class="animationText01 aniText">
          <ul>
            <li>・ああああああああああああああああああああああ</li>
            <li>・いいいいいいいいいいいいいいいいいいいいいいい</li>
          </ul>
        </div>
      </div>

      <div class="flexParent animation02">
        <div>
          <div class="animationEmpty01">
           </div>
            <div class="flexParent animation03">
              <div class="animationNum01 animationNum">
                03
              </div>
              <div class="animationText03 aniText">
                <ul>
                  <li>・ううううううううううううううううう</li>
                  <li>・ええええええええええええええええええええええええ</li>
                </ul>
              </div>
            </div>
        </div>

        <div>
          <div class="text-center">
            <img src="img/main.png" alt="">
          </div> 
          <div class="flexParent animation04">
            <div class="animationNum01 animationNum">
              04
            </div>
            <div class="animationText04 aniText">
              <ul>
                <li>・おおおおおおおおおおおおおおおおおおおおお</li>
                <li>・っっっっっっっっっっっっっっっっっっっっっっk</li>
                <li>・aaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="animationNum02 animationNum">
          02
        </div>
        <div class="animationText02 aniText">
          <ul>
            <li>・bbbbbbbbbbbbbbbbbbb</li>
            <li>・cccccccccccccccccccccccccccccc</li>
            <li>・ddddddddddddddddddddddddddddddddddddddddd</li>
          </ul>
        </div>
      </div>

.animation01 {
  width: 600px;
  margin: 0 0 25px 0;
}
.aniText {
  border-left: solid 2px #41A849;
  height: 100%;
}
.animationNum {
  padding-right: 10px;
  font-size: 48px;
}
.animationNum02 {
  height: 265px;
  width: 90px;
  margin-left: 25px;
}
.flexParent {
  display: flex;
}
.flexParent ul {
  margin-bottom: 0;
  list-style: none;
  font-size: 15px;
  padding-left: 10px;
}
/*空白のブロック*/
.animationEmpty01 {
  width: 200px;
  height: 250px;
  margin: 0 6%;
}
.animationText03 {
  margin-right: 20px;
}
/*要素から文字をはみ出させる*/
.animation04 {
  margin-top: 28px;
  margin-left: 300px;
  margin-right: calc(((80vw - 100%) / 2) * -1);
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T15:48:49+09:00

[簡単]わかりやすいGoogle Fontsの導入方法

はじめに

個人開発中のアプリにてwebフォントを導入したのでアウトプット！

webフォントとは

ブラウザ毎に異なるデフォルトフォントが設定されており、閲覧するブラウザによっては開発者の意図しないデザインに変化してしまうことを予め避けるために、Webサーバー上にフォントファイルを置き、開発者の意図するフォントを統一してブラウザに表示できるようにした技術のこと。

使用フォント

使用フォントはGoogle FontsのNoto Sans JP。
最近注目を浴びているフォントだとか。（たしかに落ち着きがあって読みやすい）

導入方法

①Google Fontsにログイン▼
https://fonts.google.com/

②左上のsearchでフォントを検索。（今回はNoto Sans JP）
image.png

③フォントページに移動したらstyleの中から使いたいフォントを指定してselect this styleをクリック。
image.png

すると、ページ右にサイドバーが出現するので、選択したフォントがあるか確認。

④確認をしたらEmbedをクリック
image.png

⑤htmlとcss用のコードが出現するのでコピーして貼り付け。
image.png

＃hamlを使用している場合はhamlに変換。Noto Sans JPの場合は▼

%link{:href => "https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap", :rel => "stylesheet"}/

この様になる。
なお、貼り付ける場所はhead内のmetaタグの下が好ましい。

これでwebフォントを導入できました。
参考にしてください！

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

TechAcademyが無料公開している「レスポンシブWebデザイン入門講座」を受講する～第1回～

アジェンダ

  • 構造的な擬似要素
  • UIに関わる擬似要素
  • その他の擬似要素
  • 実践

構造的な擬似要素

[ 復習 ] 擬似要素とは、表示される内容に対し、動的に対象を選択するセレクタ。

「最初からn個目」の要素を指定する

「最初からn個目」の要素を指定する場合、以下のように指定する。

xxx:nth-child(nの指定) {}

nの指定には、nを用いた数式を記述する。
例)
・奇数個目 : 2n+1
・5つおき : 5n

隣接している要素のうち、n個目の要素に対し反映される。

「最後からn個目」の要素を指定する

「最後からn個目」の要素を指定する場合、以下のように指定する。

xxx:nth-last-child(nの指定) {}

nの指定には、nを用いた数式を記述する。

「n番目の特定の子要素」を指定する

「n番目の特定の子要素」を指定する場合、以下のように指定する。

xxx:nth-of-type(nの指定) {}

nの指定には、nを用いた数式を記述する。
隣接の有無に関わらず、n個目の要素に対し反映される。

唯一の子要素を指定する

唯一の子要素を指定する場合、以下のように指定する。

xxx:only-of-type {}

兄弟関係に、同じ要素が存在しない要素に対し反映される。

UIに関わる擬似要素

有効になっている要素を指定する

有効になっている要素を指定する場合、以下のように指定する。

xxx:enabled {}

主に、input要素やselect要素に対し用いる。

無効になっている要素を指定する

無効になっている要素を指定する場合、以下のように指定する。

xxx:disenabled {}

主に、input要素やselect要素に対し用いる。

選択中の選択肢を指定する

選択中の選択肢を指定する場合、以下のように指定する。

xxx:checked {}

主に、ラジオボタンやチェックボックスに対し用いる。

その他の擬似要素

一行目を指定する

一行目を指定する場合、以下のように指定する。

xxx:first-line {}

一文字目を指定する

一文字目を指定する場合、以下のように指定する。

xxx:first-letter {}

要素の直前を指定する

要素の直前を指定する場合、以下のように指定する。

xxx::before {}

その要素内の先頭に、指定した内容を表示できる。
表示させた内容は、その要素の一部として扱われる。

要素の直後を指定する

要素の直後を指定する場合、以下のように指定する。

xxx::after {}

その要素内の末尾に、指定した内容を表示できる。
表示させた内容は、その要素の一部として扱われる。

実践

上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。
floatの使い方を壮大に勘違いしている気がするが、今は保留しておく。

index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>購入確認ページ</title>
  </head>
  <body>
    <div class="main_content">
      <h1 class="page_title">購入情報入力ページ</h1>
      <p class="page_explanation">以下に、購入する商品の内容及びお客様の情報をご記入ください。</p>
      <hr>
      <div class="category">
        <table class="cost_table">
          <tr class="num_row">
            <td></td>
            <td>1個</td>
            <td>2個</td>
            <td>3個</td>
            <td>4個</td>
            <td>5個</td>
          </tr>
          <tr class="hoge_row">
            <td>ホゲホゲマシーン</td>
            <td>150円</td>
            <td>290円</td>
            <td>430円</td>
            <td>520円</td>
            <td>700円</td>
          </tr>
          <tr class="huga_row">
            <td>フガフガマシーン</td>
            <td>50円</td>
            <td>100円</td>
            <td>130円</td>
            <td>190円</td>
            <td>200円</td>
          </tr>
          <tr class="foo_row">
            <td>フーマシーン</td>
            <td>300円</td>
            <td>550円</td>
            <td>800円</td>
            <td>1000円</td>
            <td>1200円</td>
          </tr>
        </table>
        <div class="info_item">
          <p class="menu_term">商品選択</p>
          <div class="menu_description">
            <ul class="list_items">
              <select class="num_seletctor" name="hogehoge_num" id="hogehoge_num">
                <option value="0">0個</option>
                <option value="1">1個</option>
                <option value="2">2個</option>
                <option value="3">3個</option>
                <option value="4">4個</option>
                <option value="5">5個</option>
              </select>
              <span class="product_name">ホゲホゲマシーン</span>
            </ul>
            <ul class="list_items">
              <select class="num_seletctor" name="fugafuga_num" id="fugafuga_num">
                <option value="0">0個</option>
                <option value="1">1個</option>
                <option value="2">2個</option>
                <option value="3">3個</option>
                <option value="4">4個</option>
                <option value="5">5個</option>
              </select>
              <span class="product_name">フガフガマシーン</span>
            </ul>
            <ul class="list_items">
              <select class="num_seletctor" name="foo_num" id="foo_num" disabled>
                <option value="0">0個</option>
                <option value="1">1個</option>
                <option value="2">2個</option>
                <option value="3">3個</option>
                <option value="4">4個</option>
                <option value="5">5個</option>
              </select>
              <span class="product_name">フーマシーン</span>
            </ul>
          </div>
        </div>
        <div class="info_item">
          <p class="menu_term">氏名</p>
          <div class="menu_description">
          <input type="text" class="textarea">
          </div>
        </div>
        <div class="info_item">
          <p class="menu_term">住所</p>
          <div class="menu_description">
          <input type="text" class="textarea">
          </div>
        </div>
        <div class="info_item">
          <p class="menu_term">メールアドレス</p>
          <div class="menu_description">
          <input type="text" class="textarea">
          </div>
        </div>
        <div class="info_item">
          <p class="menu_term">サービス情報を受け取る</p>
          <div class="menu_description">
          <input type="radio" name="service_mail" id="service_mail_enable" class="radio_botton"><label for="service_mail_enable">はい</label>
          <input type="radio" name="service_mail" id="service_mail_disable" class="radio_botton"><label for="service_mail_disable">いいえ</label>  
          </div>
        </div>
      </div>
      <hr>
      <input type="submit" value="決定" class="submit_botton">
    </div>
  </body>
</html>
style.css
html {
  width: 100%;
  background-image: url(./background.png);
}

body {
  padding: 1% 20%;
  font-size: 1.2em;
  line-height: 1.2em;
}

.page_title {
  font-weight: bold;
}

.page_title::before, .page_title::after {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin: 0em 0.2em;
  content: "";
  border-style: solid;
  border-color: black;
  border-radius: 50%;
}

.main_content {
  padding: 1% 5% 5%;
  background-color: white;
  background-clip: padding-box;
}

.page_explanation {
  line-height: 3em;
}

.page_explanation::first-letter {
  font-size: 3em;
}

.category {
  margin: 1em 0em;
  padding: 1em 0em;
}

.num_seletctor:disabled {
  background-color: lightgray;
}

.cost_table {
  margin: 0em auto;
}

.cost_table, .cost_table * {
  border-collapse: collapse;
  border-style: solid;
  border-width: 2px;
  border-color: indigo;
  text-align: center;
}

tr:nth-child(2n-1) {
  background-color: lightgoldenrodyellow;
}

td {
  padding: 0em 0.5em;
}

.info_item {
  margin: 1em 0em;
}

.info_item:first-child {
  margin: 0em 0em 1em;
}

.info_item:last-child {
  margin: 1em 0em 0em;
}

.menu_term {
  text-align: right;
  width: 10em;
  padding: 0em 1em;
  float: left;
}

.menu_term::before {
  padding: 0em 0.2em;
  content: "\2714";
  font-size: 1.5em;
}

.menu_description {
  padding: 0.5em 1em 0em 15em;
}

.list_items {
  margin: 0em 0em;
  padding: 0.5em 1em;
  border-style: dashed;
  border-width: 0px 0px 1px 0px;
  border-color: indigo;
}

.list_items:last-child {
  border: none;
}

.textarea {
  margin: 1em 1em;
  width: 20em;
  height: 1.5em;
}

.textarea:focus {
  background-color: yellow;
  border-width: 2px;
}

.radio_botton {
  margin: 1em 1em;
}

.radio_botton:checked + label {
  font-weight: bold;
}

.submit_botton {
  font-size: large;
  font-weight: bold;
  margin: 1em 50%;
}

これをWebブラウザに表示させるとこんな感じ。
index.png

入力状況によって、UIが変化する。
index_ui.png

おわりに

今回はさまざまな擬似要素に関する内容だった。
レスポンシブなWebページを作成する際は、デバイスによって位置関係や表示方法が変化するので、擬似要素に与える影響が大きそうだ。

参考

1-1 構造的な擬似要素の応用（CSSの高度なセレクタ）
1-2 構造的で特殊な擬似要素（CSSの高度なセレクタ）
1-3 UIに関わる擬似要素（CSSの高度なセレクタ）
1-4 一つ目を示す擬似要素（CSSの高度なセレクタ）
1-5 直前や直後の擬似要素（CSSの高度なセレクタ）
1-6 セレクタのまとめ（CSSの高度なセレクタ）

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

初心者によるプログラミング学習ログ 368日目

100日チャレンジの368日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
368日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T13:24:14+09:00

jQueryでtextareaの高さを自動調節する

テキストエリアの高さを行数に応じて自動調節する方法を調べた結果、最終的に超シンプルな方法に落ち着いたのでメモ。検索で引っかかるどれよりもどシンプルに仕上がっていると思います。

使っているもの

名前 ver
macOS Catalina 10.15.5
jQuery.min.js v3.4.1(googleapisからリンクで取得)

使う言語

  • javascript(というかjQuery)
  • html

まずは結論

htmlファイルのbody上部にこれさえ突っ込めばOKです。
必要に応じて呼び出し元の要素の指定をidやクラスに変更してください。

※v1.7以上のjQueryを別途読み込んでいる場合、一行目(src=とか書いてあるscriptタグ)は不要です。
※v1.7未満のjQueryを別途読み込んでいる場合、$(documend).onが使えません。
https://api.jquery.com/on/
c1.7未満のjQueryを使う場合は代わりにbindが使えそうですが、試していないので保証はできません。
https://www.aipacommander.com/entry/2015/09/17/192659

表示したいページのhtml.html
--前略 ヘッダとか諸々--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).on("change", "textarea", function(evt){
        var min_height = 40; //テキストエリアの最小の高さをお好みで設定
        $(evt.target).height(min_height); //一旦最小サイズにする
        $(evt.target).height(evt.target.scrollHeight); //スクロールなしでテキストが収まる最小の高さに上書き
    });
</script>

--後略 この下にテキストボックスなど--
html中で読み込んでおくCSS.css
textarea{
    resize: none;/*ユーザによるリサイズを不可にし、右下に///が出ないようにする*/
}

コード中の"textarea"部分がセレクタの指定箇所なので、"#id名"なり".class名"なり"textarea[name='テキストエリア名']"なり状況に応じたセレクタに変更しましょう。

答えにたどり着くまで

まずは「textarea 自動リサイズ」とか「textarea 高さ 調節」なんかで検索して調べました。

  1. 改行コードの数を取得する系
    改行コードを正規表現で抽出&その数に応じて幅を変えるというアプローチ。
    例： https://qiita.com/ampersand/items/ceaa5066d44990d30df3
    ただ、自動改行も取得できないと困るので目的に合わず。

  2. 親要素のサイズを自動変更し、それに追随させる
    例：https://qiita.com/tsmd/items/fce7bf1f65f03239eef0
    ちょっと複雑で設定ミスが怖いので見送り。

  3. textareaが持つscrollHeightの値を使う

    1. https://qiita.com/osamingo/items/3ee00333f6fcd33fa2a1 scrollHeightを使い、テキストエリアから文字がはみ出していたら最適なサイズまで拡大。ただ、文字を減らしたときにリサイズしない。
    2. https://pisuke-code.com/jquery-make-textarea-auto-resize/ while文を使ってちょっとずつ高さを減らし、スクロールが必要になったら表示可能な最小サイズにして終了、というアプローチ。

3-2が最も目的にあっていたのですが、whileを使っているのでミスって無限ループを発生させ、PCが唸りを上げること数回。
修正が怖くなったので、whileを使わずになんとかしようと思った結果、きづきました。
一度最小まで縮めて、はみ出てたら拡大すればいい。それだけのことでした。

理屈

  1. jQueryを使いたいので、googleapisからjQueryを読み込みます。
  2. テキストエリアの値が変更されたときに、jQueryの機能を使って検出します。
  3. 値が変更されたテキストエリアのサイズを、一旦min_heightに変更します。
  4. scrollHeightの値で高さを上書きします。

ちなみに、テキストエリアの幅が余っているときに3の機能だけで調整できないのは、以下が原因です。

要素のコンテンツが垂直スクロールバーを表示することなく収まる場合、その scrollHeight は clientHeight と等しくなります。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight

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

【jQuely】スクロールでテキスト出現させる

サンプル

BAbbLhb6bO68,6568,688,85.8,5.gif

コード

sample.html
  <div class = "p-about-letter">
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
  </div>
sample.css
.p-about-letter__word {
  opacity : 0;
  transform : translate(0, 100px); /* translate(X方向の距離, Y方向の距離) */
  transition : all 0.5s;
}

.text_visible{
  opacity : 1;
  transform : translate(0, 0);
}

・.text_visible：jQuelyのaddClassで後でクラス付加する。

sample.js
  $(function(){
    $(window).scroll(function (){
      $('.p-about-letter__word').each(function(){
        var textPosition = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > textPosition - windowHeight + 100){
          $(this).addClass('text_visible');
        }
      });
    });
  });

jQuelyのコードの説明

①スクロール後の処理

sample.js
$(window).scroll(function () {
  //処理
});

「windowがスクロールされたら以下の処理を実行する」

②要素ごとの処理

sample.js
$('.p-about-letter__word').each(function(){
  //処理
});

・.p-about-letter__wordがついた要素一つ一つに処理を行うことを指定する。

※class名では無く、id指定ではこの処理は行えない。

③ポジションの所得

sample.js
var text_position = $(this).offset().top;

・offset().top：windowの最上部から、.p-about-letter__wordのついたクラスまでの距離。

④スクロール位置の所得

sample.js
var scroll = $(window).scrollTop();

・jQueryオブジェクト.scrollTop();：オブジェクトからのスクロール位置を所得。
・$(window).scrollTop()：windowでブラウザ全体のスクロール位置を取得

⑤ウィンドウの高さ取得

sample.js
var windowHeight = $(window).height();

見たまんま、ウィンドウの高さを取得

⑥addClassを行う位置の指定

sample.js
if (scroll > textPosition - windowHeight + 100){
   $(this).addClass('text_visible');
}

最後に、scroll > textPosition - windowHeightは、
スクロール量 > 「ページトップ〜指定要素の距離」-「ウィンドウの高さ」
を表している。

そして、+ 100で高さの調節をしています。

参考記事

スクロールして可視範囲に入ったら要素を表示するアニメーション【jQuery】

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-12T08:18:23+09:00

CSSが効かない！？確認すべきポイント3つを解説！ 　byウェブカツ

HTML・CSSを学習し始めであれば、「なぜかCSSがうまく効かない！」と、困ってしまうことがあるはず。
そこで「CSSが効かない場合のよくある原因と確認すべきポイント3つ」をまとめてみました。

CSSが効かないよくある原因

「書き方が間違っている」「優先順位」「キャッシュ」の３パターンのどれかであることが多い。

書き方ルールの間違い

正しいルールで記述ができていないパターンです。

コメントアウトが間違っている

CSSでコメントアウトするには「/*〜*/」の記号を使います。

通常の書き方。

p {
   color : blue;
}

「/*」と「*/」で囲っている箇所がコメントアウトされる。
「color:red;」は反映されない。

/* p {
   color : red;
} */

ここでのよくある間違いとしては

・HTMLのコメントアウトの「<!--  -->」記号を使っていないか
・囲み始めを忘れている（「/*」の記号忘れ）
・囲み閉じを忘れている（「*/」の記号忘れ）

といったことが考えられるので、再度チェックしてみましょう。

「;（セミコロン）」が抜けている

正しい書き方。

p {
   color : blue; /* ←「;」で閉じられている。*/
   font-size:20px;
}

間違った書き方。

p {
   color : blue  /* ←「;」がない。 */
   font-size:20px　/* ←ちなみに最後は「;」がなくても反映される。 */
}

「{}」が間違っている

正しい書き方。プロパティが「{」「}」で正しく囲まれている

p {
   color : blue; 
   font-size:20px;
}

間違った書き方。 最初の「{」が抜けていて反映されない。

p     /* ←「{」が抜けている。 */
   color : blue;
   font-size:20px;
}

文法が間違っている

class="sample"　がついているpタグにCSSを当てたい場合

正しい書き方

.sample {
   color:blue;
   font-size:20px;
}

間違った書き方（class名の前の「.」が抜けている）

sample {
   color:blue;
   font-size:20px;
}

pタグの中のspanタグにCSSを当てたい場合

正しい書き方

p span {
   color:blue;
   font-size:20px;
}

間違った書き方（「p」と「span」の間が"全角"スペースになっている）

p　span {
   color:blue;
   font-size:20px;
}

タイポ（スペル間違い）

※スペルミスのことを「タイポ」と呼ぶことが多いです。
（「誤植」を意味する「typographical error」から来ているそうです）

正しい書き方

div {
   margin:20px;
}

間違った書き方（「margin」の「i」が抜けている。）

div {
   margn:20px;
}

優先順位が低くなっている

優先順位が気づかず下がってしまってるパターンです。

優先順位とは？

CSSの記述が複雑になっていくと、1つの要素に対して複数のセレクタ、プロパティを記載してしまうことがあります。
その場合、「どちらを優先するのか」のルールが明確に決められているのです。

優先順位について

非常に複雑な計算で決まるのですが、最初はひとまず3つのルールを覚えればOKです。

  1. 「最後に書いたもの」が優先される
  2. 「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」　の順に優先される
  3. 「!important」が最優先される

※3→2→1の順番で優先度が高い。

「最後に書いたもの」が優先される

同じセレクタ内に同じプロパティが複数記載されている場合
p {
   color:red;
   color:yellow;
   color:blue;  /* ←最後に書いたこちらが優先される。 */
}

複数のセレクタに同じプロパティが記載されている場合

p {
   color:red;
}

p {
   color:blue;  /* ←最後に書いたこちらが優先される。*/
}

「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」　の順に優先される

さきほどの「最後に書いたもの」よりも、こちらのルールが優先されます。

class="sample"　がついているpタグにCSSを当てたい場合

class名で指定したclassセレクタ。こちらが反映される

.sample {
   color:blue;
   font-size:20px;
}

要素名で指定した要素型セレクタ。こちらは反映されない。

p {
   color:blue;
   font-size:20px;
}
id = "demo" と　class="sample"　がついているdivタグにCSSを当てたい場合

id名で指定したidセレクタ。こちらが反映される

#demo {
   background-color:green;
   border:1px solid #cccccc;
}

class名で指定したclassセレクタ。こちらは反映されない。

.sample {
   background-color:red;
   border:2px solid #333333;
}

※他にも「擬似要素」「擬似クラス」といったものもあり、計算式はさらに複雑になりますが、学習初期段階では、冒頭でお伝えしたように、「要素型セレクタ」＜「classセレクタ 」＜「idセレクタ」を覚えておいて、後は徐々に知識をつけていければOKです。

「!important」が最優先される

id = "demo" と　class="sample"　がついているdivタグにCSSを当てたい場合

divタグで指定した要素型セレクタ。「!important」があるので優先される。

div {
   background-color:black !important;
   border:3px dotted #666666 !important;
}

id名で指定したidセレクタ。こちらは反映されない。

#demo {
   background-color:green;
   border:1px solid #cccccc;
}

class名で指定したclassセレクタ。こちらも反映されない。

.sample {
   background-color:red;
   border:2px solid #333333;
}

※「!important」は便利ではありますが、多用すると保守性が悪くなるため、極力使用しないことをオススメいたします。

キャッシュが残っている

意外とこれもよくある。キャッシュをクリアすればOK。

キャッシュとは？

キャッシュとは「1度開いたWEBページのデータをブラウザに保存しておくことで、次回同じページを開くときに短時間でパッと表示することができる仕組み」のことです。
非常に便利な機能ではありますが、CSSを編集しても反映されない場合は、ブラウザがこのキャッシュ（編集前のデータ）を表示している可能性があります。

キャッシュをクリアする方法（Google Chromeの場合）

ここでは2つの方法をご紹介します。

ショートカットキーでのスーパーリロード

// Macの場合
Cmd + Shift + R

// Windowsの場合
Shift + F5

ブラウザの「設定」からキャッシュをクリアする

  1. Google Chromeの右上のアイコン（家の形）を選択。
  2. 出てきた選択項目の中から「設定」を選択。
  3. 設定画面が別タブででてくるので、その中から「プライバシーとセキュリティ」を探す
  4. 「閲覧履歴データの削除」を選択。
  5. 「キャッシュされた画像とファイル」にチェックが入った状態で「データを削除」を選択（他のチェック項目は任意で選択ください）  

※2020/6/26時点での方法です。バージョンアップにより手順は変更される可能性があります。

 

まとめ

うまく効かない場合、必ずどこかに原因があります。
そういう場合は上記の方法を１つずつ試してみましょう。

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/

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

日付別

タグ一覧