What's New Qiita

20201108のCSSに関する記事は5件です。

  • 投稿日：2020-11-08T17:59:13+09:00

【CSS】calc()関数を使ってメディアを作る

プログラミング勉強日記

2020年11月8日

左側に画像、右側にテキストを配置するモジュールを作成。
上記のようなモジュールをメディアと呼ぶ。

完成コード

装飾はSassで記述

index.html
 <div class="media">
        <figure class="media__img-wrapper">
            <img class="media__img" src="img/img1.jpg" alt="タイピングしている人">
        </figure>
        <div class="media__body">
            <h3 class="media__title">Lorem ipsum dolor</h3>
            <p class="media__text">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam sapiente odit,
               veritatis maiores ipsum dolore voluptatibus ipsam ullam explicabo exercitationem 
               consequuntur quidem dolores praesentium, doloremque nam eaque molestias inventore! Modi!
            </p>
        </div>
 </div>
style.scss
body {
//今回の練習用のレイアウト
    max-width: 1200px;
    margin: 100px auto;
}

 img {
        max-width: 100%;
        vertical-align: bottom;
     }

.media {
    display: flex;//画像とテキストを横並びに
    justify-content: space-between;//均等に横並び
    align-items: center;//画像とテキスト縦方向を中央揃え
    padding: 0 20px;//画面幅を縮めたときの余白
    @media screen and (max-width: 768px) {
        display: block;
    }

    &__img-wrapper {
        width: 200px;//画像幅200pxで固定
        @media screen and (max-width: 768px) {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    &__body {
        //親要素の幅から左右のpaddingを引いた値(1200px - 40px) - 画像の幅と右側余白(200px + 30px) = 960px
        width: calc(100% - 230px); 
        @media screen and (max-width: 768px) {
            width: 100%;
        }
    }

    &__title {
        font-size: 24px;
        margin-bottom: 15px;
    }
}

挙動動画

実際作成したモジュールをツイートしました。

参考資料

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

【CSS】calc()関数を使う

プログラミング勉強日記

2020年11月8日

左側に画像、右側にテキストを配置するモジュールを作成。
上記のようなモジュールをメディアと呼ぶ。
今回、calc()関数を使い、画像を固定幅、テキストを可変幅にするレイアウトに挑戦。

完成コード

装飾はSassで記述

index.html
 <div class="media">
        <figure class="media__img-wrapper">
            <img class="media__img" src="img/img1.jpg" alt="タイピングしている人">
        </figure>
        <div class="media__body">
            <h3 class="media__title">Lorem ipsum dolor</h3>
            <p class="media__text">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam sapiente odit,
               veritatis maiores ipsum dolore voluptatibus ipsam ullam explicabo exercitationem 
               consequuntur quidem dolores praesentium, doloremque nam eaque molestias inventore! Modi!
            </p>
        </div>
 </div>
style.scss
body {
//今回の練習用のレイアウト
    max-width: 1200px;
    margin: 100px auto;
}

 img {
        max-width: 100%;
        vertical-align: bottom;
     }

.media {
    display: flex;//画像とテキストを横並びに
    justify-content: space-between;//均等に横並び
    align-items: center;//画像とテキスト縦方向を中央揃え
    padding: 0 20px;//画面幅を縮めたときの余白
    @media screen and (max-width: 768px) {
        display: block;
    }

    &__img-wrapper {
        width: 200px;//画像幅200pxで固定
        @media screen and (max-width: 768px) {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    &__body {
        //親要素の幅から左右のpaddingを引いた値(1200px - 40px) - 画像の幅と右側余白(200px + 30px) = 960px
        width: calc(100% - 230px); 
        @media screen and (max-width: 768px) {
            width: 100%;
        }
    }

    &__title {
        font-size: 24px;
        margin-bottom: 15px;
    }
}

挙動動画

実際作成したモジュールをツイートしました。

参考資料

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

評価の平均値を星で表示する

各店舗の評価の平均値を一覧表示ページで表示する方法を記述します！
イメージはこんな感じです。
1b1a25ccb85f56b8e0a1b46837bd6cd6.png

こちらの実装は
Farstep【プログラミング講座】さんの【Ruby on Rails】星レビュー機能を作ろう（PART1）How To Create a Star Rating with Ruby on Railsを参考にしています。

使用環境

ruby 2.6.5
Ruby on Rails 6.0.3.3
一部、余白の指定でBootstrap4を使用しています。

実装内容

モデルの実装

model
class Laundry < ApplicationRecord
  def avg_score
    unless self.comments.empty?
      comments.average(:rate_id).round(1)
    else
      0.0
    end
  end

 def avg_score_percentage
   unless self.comments.empty?
     comments.average(:rate_id).round(1).to_f*100/5
   else
     0.0
   end
 end
end

はじめにコメントが空かどうかで場合分けをして存在している場合は平均値の計算を行います。
averageメソッドを使用してカラム名の平均値を出します。
round(1)とすることで小数点第2位に対して四捨五入をします。

avg_score_percentageメソッドではパーセンテージの計算をしてビューに渡します。

ビューの実装

コードは以下の通りです。

html
<div class="average-score mb-3">
 <div class="star-rating ml-2">
   <div class="star-rating-front" style="width: <%= laundry.avg_score_percentage %>%">★★★★★</div>
   <div class="star-rating-back">★★★★★</div>
 </div>
 <div class="average-score-display">
   （<%= laundry.avg_score %>点）
 </div>
</div>
css
.average-score {
  display: flex;　// ★と点数を横並びにする
  justify-content: center;
}

.star-rating {
  position: relative;
  width: 5em;
  height: 1em;
  font-size: 17px;

}
.star-rating-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; // 指定幅からはみ出した部分を隠す。
  white-space: nowrap;　// widthが足りない時に、折り返さないようにする。
  color: #ffcc33;
  height: 25px;
}
.star-rating-back {
  color: #ccc;
}

２つの５つ星(★★★★★)を用意してその２つを重ね合わせることで実装を行います。
・.star-rating-front・・・黄色い星の部分、上に重ねて"width: <%= laundry.avg_score_percentage %>%とすることで幅を指定する。
・.star-rating-back・・・灰色の星の部分、下におくことで黄色くならなかった部分を埋める。

ポイントとして以下の２点だと思います。
1.overflow: hidden;を指定。
overflow: hidden;を指定することで指定幅からはみ出した部分を隠して後ろの灰色の星を表示させます。
ここを指定しないと、せっかく幅を指定しても幅からはみ出した部分が隠れていないため必ず星５つの評価になってしまいます。
overflow: hidden;なし
2609974bbcd16eb7c656c6b0494fe206.png

２.white-space: nowrap;とすることでwidthが足りない時に、折り返さないようにしてくれます。
これを指定することで小数点以下の点数も星に反映されます。
white-space: nowrap;あり
44bdcca4dc3ecd2c6133f7dd72db666b.png

white-space: nowrap;なし
ea00e4658620d7173e5f742fd6b5a946.png

これで評価の平均値を星で表示することができました！

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

テキスト入力中の点滅するカーソルに好きなCSSを当てる方法

どうも7noteです。IE非対応だけど点滅カーソルの装飾やっていきます。

inputやtextareaを作った場合、文字を入力する際にでる点滅するカーソル「 | 」（←これ）をCSSで好きなデザインに変える方法について記述していきます。

今回の方法では、inputやtextareaは使わずdiv要素を使いますので、ご注意ください。
入力した情報を取得する場合は、javascriptなどで入力された値を取得して利用してください。

サンプル

sample.gif
※通常は「 | 」が点滅する。

sample2.gif

ソース

index.html
<div class="txtarea" contenteditable="true"></div>
style.css
.txtarea {
  caret-color: transparent;   /* デフォルトの点滅カーソルを非表示 */
  border: 1px solid #000;     /* textarea風に枠線を付ける */
  border-radius: 3px;         /* textarea風に角丸を付ける */
  padding: 2px 5px;           /* textarea風に余白を付ける */
}

/* afterで自由に装飾をする */
.txtarea:focus::after {
  content: "_";                 /* 文字や画像を指定。空にして背景画像などにしてもOK */
  animation: blink 1s infinite; /* 点滅のアニメーションを指定。アニメーションの内容は以下の通り */
}

/* 点滅アニメーション */
@keyframes blink {
  0% { opacity: 0;}
  50% { opacity: 0;}
  51% { opacity: 1;}
  100% { opacity: 1;}
}

解説

キーになっているのが、HTML5から導入されたcontenteditable属性。これをtrueにすることで、好きな要素を編集可能エリア（textareみたい）にすることができます。

これを利用し、あとはデフォルトのカーソルを非表示にしたのち、文字の入力中はアニメーションで点滅する要素を付与しています。

参考
https://www.tam-tam.co.jp/tipsnote/html_css/post8653.html
https://scrapbox.io/customize/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E7%82%B9%E6%BB%85CSS

注意

contenteditable属性を使用した場合、ブラウザによって動きが異なり、改行を入力した際に空のdiv要素ができてしまったりします。
開発が困難になる可能性がありますので、趣味の範囲でお使いください。

参考
https://teratail.com/questions/217175

おそまつ！

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

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

（Next.js） TypescriptファイルでCSS/SCSSファイルを読み込む方法

1. 問題

Next.jsプロジェクト内のtypescriptファイルでCSSファイルをimportで読み込もうとすると、エラーになります。

sample.ts
import style from "./styles.css"

//下記のようなエラーが出て読み込めない
TS2307: Cannot find module './styles.css

2.解決策

「next-env.d.ts」というファイルがあるはずなので、そこに下記のように追加で記述。
無事Next.jsプロジェクト内のtypescriptファイルでcss/scssが読み込めるようになります。

next-env.d.ts
declare module '*.css';
// or scss
declare module '*.scss';

参考
How to fix TypeScript cannot find module CSS/SCSS in Next.js

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

日付別

タグ一覧