What's New Qiita

20200929のCSSに関する記事は7件です。

  • 投稿日：2020-09-29T23:50:32+09:00

CSSでプロフィール画像設定のような円系に切り取るUIを作る

よくある画像をアイコンのように丸くトリミングするUIを作る際、画像のトリミング自体はその辺のJSライブラリを利用して容易に実現できます。
しかし、その多くが四角くトリミングするもののため、実際に丸く表示されている範囲はわかりません。
それを解決するためにCSSで丸く表示される範囲を明るく表示してそれ以外をグレーアウトさせるコードを以下にメモします。
↓こんな感じのやつ
image.png

triming.scss
.triming:after {
    position: absolute;
    top: 4px;
    bottom: 0;
    left: calc((100% - 280px)/2 + 4px);
    width: 272px;
    height: 272px;
    pointer-events: none;
    content: "";
    // 背景を透明にする（円形で画像が見える部分）
    background: transparent;
    border: 2px solid #fff;
    border-radius: 140px;
    // 円以外の部分を影で埋める
    box-shadow: 0 0 1000px 1000px rgba(0,0,0,.5);
}

解説

軽く解説をすると、切り取るライブラリ（大体Canvas)の要素にafter要素を与え、そこで円を描画しています。
CSSにおけるbox-shadowは要素が透明の場合要素にかぶっているところは描画されないことから、影でグレーの部分を表現します。(上位でoverflow: hidden;していればいい感じに収まります)

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

Tyハロトレ30日目

CSS

iPhone frame

frame2.png

JavaScriptとは、インタプリタ型のプログラミング言語である。

インタプリタ型・・・プログラム実行時にオブジェクトコード（コンピュータが実行できる形式）に変換していくため、実行速度が遅いです。

例）同時通訳；喋ってる本人と翻訳してる人で時差があるようなイメージ。

①直接Webページに埋め込む
　<head>xxx</head>
または
　<body>xxx</body>

②外部JSファイル
　<script src="xxx.js"></script>

注意点

・命令文の最後には「;」（セミコロン）をつけて区切る
・文字列は引用符で囲みます。""、''

基本文

ウインドウオブジェクトを操作して、文字を表示させます。
訳：ウインドウオブジェクトの書類を書き出して、（この内容文字列）
windowDocument.png

document.write("<br>")

br2.png

ダブルクォーテーションは2回まで

notagain2.png

JS計算

4+6.png

算術演算子

割り算は永遠に計算できないので、途中で計算を止めてしまいます。
算術演算子.png

ダブルクォーテーションの位置で変わる

ダブルクォーテーションで位置で変わる.png

varAge2.png

変数とは

データを一時的に保管するメモリ領域
メモリ領域を準備することを「変数を宣言する」という。

JavaScriptでは変数に、数値、文字列、真偽値、オブジェクトを格納できます。

代入

「=」は「等しい」ではない
演算子と呼ばれる記号
age = 20;

代入は上書きされる

　alert(xxx);と記述すると、アラートが表示される
代入は上書きされる.png

計算式の代入

計算式の代入.png

CSS

表とフォーム

input type="file"

inputFile2.png

reset・submit

resetSub2.png

labelFor2.png

required

required2.png

好物にある、チェックボックスはスペースで選択でき、
性別にある、ラジオボックスは左右の矢印キーで選択でき、
年齢にある、プルダウンメニューは上下の矢印キーで選択できます。

autofocus

autofocus2.png

placeholder

placeholder2.png

Photoshop

Altキーで選択範囲を複製できます。
選択範囲を複製2.png

明るさを調整したいとき

ヒストグラム

ウインドウ＞ヒストグラム
突出2.png

レベル補正

イメージ＞色調補正＞レベル補正
下記画像は、明るいところに偏っている画像です。
突出3.png

レベル補正方法３パターン

①2つのスポイトを選ぶ
下記画像のように2つのスポイトを選ぶと、
プレビューで白みがかっていたのが消えるのがわかります。
スポイト2.png

レベル補正をやり直したい時は、レベル補正パネルでAltを押すと、キャンセルの部分が初期化に変わります。

②暗いところをドラッグ
③自動補正
機械なので、思い通りに行かないこともあります。
スクリーンショット 2020-09-30 9.36.48.png

緑かぶり

緑っぽく色かぶりすることを「緑かぶり」と言います。
蛍光灯は色が付いていて、画像の色が変わるので、写真を撮る時は、自然光かカメラの光で撮るのが良いです。

イメージ＞色調補正＞カラーバランス
スクリーンショット 2020-09-30 9.47.37.png

イメージ＞新規調整レイヤー＞色相・彩度
スクリーンショット 2020-09-30 9.52.37.png

彩度は、鮮やかさを表します。
スクリーンショット 2020-09-30 10.33.38.png

トーンカーブ

スクリーンショット 2020-09-30 10.51.19.png

色相環

色彩計画を立てる上で、①中心となる色と、②それを補完する色があるとバランスが良いです。
参考URL
配色.gif

例）IKEAのコーポレートカラー　青と黄色
IKEAのコーポレートカラー「青」と「黄色」は、
金十字旗と呼ばれるスウェーデンの国旗の配色から採られているといわれてます。
参考URL
青と黄.jpg

アンシャープマスク（USM）

フィルター＞シャープ＞アンシャープマスク
完全にぼけているのは加工が難しいですが、ぼけているのを若干くっきりさせるのに向いています。
EjIgP33UYAMEX2A.jpeg

ぼかし

フィルター＞ぼかし＞ぼかし（移動）
車が臨場感溢れるスピードで走っているのに使ったりします。
ぼかし移動.jpg

コピースタンプツール

画像はこちら

覆い焼きツール

イン画紙にフイルムの画紙を光が覆うため、明るくなります。
例）夏にTシャツ焼けして、ノースリーブになったらダサいやつ

焼きツールは覆い焼きツールの逆です。

境界をぼかして、色々模様ができます。

Illustrator

裁ち落とし

裁ち落とし・・・印刷物やチラシに用います。

仕上がるサイズよりも3mm大きく作って、裁ち落とします。
これにより、紙の地色が出なくなります。

また、裁ち落としのため、B4とかA3でA4のデザインをする必要があります。

拡大・縮小ツールで25％にすると、A4のサイズになります。

1辺が40mmの正三角形

適当な三角形を作る
↓
ウインドウ〉変形
↓
鎖マークがつながっている状態にする（幅・高さを固定）
↓
幅を40mmにする

底辺が50mm、高さ60mmの直角三角形

幅が50mm、高さ60mmの長方形を作る
↓
ダイレクト選択ツールで右上の頂点だけ選んで取り除く
↓
ダイレクト選択ツールで右下と左上を選ぶ
↓
オブジェクト＞パス＞連結

1辺が40mmの正五角形

長さ40mmの線を書く
↓
回転ツールで108度回転を5回行ってコピーする
↓
線を5つくっつけてグループ化

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

【初心者でもわかる】classにできなくて、idならできること3つ

どうも7noteです。idにしかできない事があるんです。

コーディング始めたての頃はなんとなくclassを使っててidと何が違うのかよくわからないままという人は意外と多いんじゃないかなと思います。

何に使えるのかこの記事でハッキリさせます。

idのおさらい。

まず、書き方はこう。

index.html
<div id="hogehoge">ほげほげ</div>

id=""をタグの中に書きます。
同じid名は同じページに1つしか存在できないので注意！

そしてCSSはこう。

style.css
#hogehoge {
  font-size: 20px;
}

#hogehogeとid名の前に#を書きます。

①idを使ってページ内リンク

index.html
<ul>
  <li><a href="#menu1" >メニュー１</a></li>
  <li><a href="#menu2" >メニュー２</a></li>
  <li><a href="#menu3" >メニュー３</a></li>
</ul>

<div id="menu1">
～～～いろいろ書く～～～
</div>
<div id="menu2">
～～～いろいろ書く～～～
</div>
<div id="menu3">
～～～いろいろ書く～～～
</div>

このように書くことで、メニュー１をクリックすると、id="menu1"の場所まで瞬時にスクロールされます。
この仕組みをページ内リンクと言います。

またページ内リンクですが、違うページにアクセスした時にも使うことができます。

<!-- 別ページのidがmenu4のところにリンク -->
<a href="/page/#main4">次のページへ</a>

②離れたlabel要素とinput要素を関連付ける

index.html
<label for="hogehoge">ここをクリック</label>

<input value="あいうえお" id="hogehoge">

input要素にidを指定し、label要素に指定したidと同じ名前をforの中に入れます。
こうすることで、離れたinput要素を操作することが可能になります。

さらに詳しくは過去に書いた記事をどうぞ。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

③classよりも優先されてCSSが効く

style.css
#red  {color: red;}   /* id */
.blue {color: blue;}  /* class */

この場合、#redが優先され文字色は赤色になります。
これはCSSセレクタの優先順位というものがあり、この順位が高い方が優先されてCSSが反映されます。

idとclassの場合、idの方が優先順位が高いため、両方指定していた場合でもidのCSSが反映されます。

詳しい計算方法は分かりやすくまとまったqiitaの記事があるので、こちらをご覧ください。

まとめ

idは同一ページ内には1つしか存在できないため、ヘッダーやフッターなどレイアウトを示す時くらいしか使われないことがほとんどですが、idにしかできない事はあります。

またjQueryの処理を行う際には、idの方がclassよりも処理がじゃっっっっっっっっかんだけ早くなる（はず）。
しっかりと自分で検証したわけではないのですが、一般的にはそのように言われています。
メンテナンス性もidをしっかりと使っている方が高くなる（手法にもよる）ので上級者を目指すのであればidをしっかり使い分けて書けるようマスターしたいところです！

おそまつ！

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

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

React.js で SVGファイルのサイズや色をCSSで変える方法

前提

  • React.js, webpack
  • ReactでSVGファイルをimgとして読むとスタイルをCSSで変更できない（サイズはできるが色はできない）のでinlineで読む必要がある
  • 複数のサイズや色のために複数のSVGファイルを用意したくない
  • SVGファイルを変換したReact Componentのファイルも作りたくない

概要

  • inline SVGとして埋め込む方法３つ
  • CSSでスタイルを上書きする方法

を紹介
利点としてはSVGをReact Component化せずそのまま使うことで、（デザイナーの用意した）素材を極力そのままにし、ファイル数も増やさずに色を変えることができる

SVGの埋め込み方

1. raw-loader + dangerouslySetInnerHTML の場合

webpack.config.js
        test: /\.svg$/i,
        loader: 'raw-loader',
jsx
import Hoge from '... .svg'
...
<div dangerouslySetInnerHTML={{ __html: Hoge }} />

typescriptならパスを通したglobal型置き場に次のように書く

global.d.ts
declare module '*.svg' {
  const content: string;
  export default content;
}

利点

  • 変換も何もされないので詰まったり失敗しない

欠点

  • dangerously

2. react-svg-loader の場合

https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loader を使う

webpack.config.js
      {
        test: /\.svg$/,
        use: [
          "babel-loader",
          {
            loader: 'react-svg-loader',
            options: {
              svgo: {
                plugins: [
                  { removeViewBox: false }, // to enable overwriteing width/height by CSS
                  { moveElemsAttrsToGroup: false }, // to prevent attribute destruction for overwriting color by CSS
                ],
                floatPrecision: 2,
              },
            },
          },
        ],
      },

ここでsvgoのオプションをdisableしているのは自分の扱うsvgが壊れないように設定した項目だが、扱うsvgによって別のdisableが必要かもしれない

jsx
import Hoge from '... .svg'
...
<Hoge />

typescriptならパスを通したglobal型置き場に次のように書く

global.d.ts
declare module '*.svg' {
  const content: React.ComponentType;
  export default content;
}

利点

  • 巨大ツールでない
  • 噛ませるbabel-loaderを自由に指定できる
    • next.config.js の defaultLoaders.babel とか

欠点

  • 最近メンテされてないっぽくてリリースがない
  • svgoを無効化できない
    • SVGの中身によっては更にsvgoのオプションをdisableしないとスタイルを上手く上書きできないかもしれない

3. svgr の場合

https://github.com/gregberge/svgr を使う以外のコードの部分はreact-svg-loaderと同じなので差分だけ書く

  1. https://react-svgr.com/docs/webpack/ に従う
  2. svgr.config.js を設定する
svgr.config.js
module.exports = {
  svgoConfig: {
    plugins: {
      removeViewBox: false, // to enable overwriteing width/height by CSS
      moveElemsAttrsToGroup: false, // to prevent attribute destruction for overwriting color
    },
  },
};

最適化不要、またはファイルに直接かけておく方針なら、svgoを無効化してしまう

svgr.config.js
module.exports = {
  svgo: false,
};

利点

  • メンテ・リリースが続いている
  • svgoを無効化できる
    • 破壊的変更のせいでうまくいかなかったら無効化で逃げれる
  • star多し
  • webpack以外にも対応

欠点

  • 依存ライブラリがちょっと多そう

スタイルの当て方

埋め込んだSVGやそのラッパーdivに対しCSSで以下のように書けばサイズや色を変えれる

    svg {
      width: 70px;
      height: 70px;
    }
    svg * :not([stroke='none' i]) {
      stroke: red;
    }
    svg * :not([fill='none' i]) {
      fill: red;
    }

ポイントは、SVGの色指定はstrokeとfillがあるので、それらがnoneでない箇所を上書きする点

所感

  • サクッと実現するならraw-loader + dangerouslySetInnerHTML
  • キレイにimportして埋め込みたいなら svgr
  • 2つのツールがデフォルトで使うsvgoのデフォルト設定がSVGを破壊的に変更するので曲者
  • @svgr/cli などを使ってSVG用のReact Componentを作ってPropsで柔軟に中身を変えるのもアリだけど、SVG素材とReact Componentでほぼ重複するのも悲しいし、用意された素材との同期などが少し面倒

参考

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

Rails6でHTMLとCSSのみを使ってシンプルにフォームをつくるメモ

はじめに

Railsで bootstrapなどのCSSフレームワークを使わない、素のコードが意外とみつかないので、そのメモ

前提

Receptionモデルがあり、カラムは名前と目的。

目標

このようなシンプルなフォームをHTMLとCSSのみをつかってシンプルに書く
スクリーンショット 2020-09-29 13.14.53.png

HTML

  • フィールドはtext_field,select_field,submitの3つ
html
      <%= form_with model: @reception do |f| %>
        <ul>
          <li>
            <%= f.label :name, "名前" %>
          </li>
          <li>
            <%= f.text_field :name, placeholder: "名前を入力してください" %>
          </li>
          <li>
            <%= f.label :purpose, "ご用件を選択してください" %>
          </li>
          <li>
            <%= f.select :purpose,
            (
              [
                ["面接のため", '面接'],
                ["面談のため", '面談'],
                ["打ち合わせのため", '打ち合わせ'],
                ["その他", 'その他']
              ]
            ), {}, size: "4"
            %>
          </li>
          <li>
            <%= f.submit '送信する' %>
          </li>
        </ul>
      <% end %>

CSS

  • Rubyのform_witth メソッドによって、formタグが生成される
  • ul,li のリスト表示にする
  • selectタグをsize: "4"の第４引数に指定することで選択肢から4つ表示して状態に設定できる
css
form {
  width: 60%;
  margin: auto;
  padding-top: 1%;
}
ul {
  list-style: none;
  padding-left: 0;
  width: 100%;
  text-align: center;
}
label {
  font-size: 25px;
}
input[type=text], select {
  text-align: center;
  width: 55%;
  font-size: 20px;
  border: 1px solid #CCC;
  border-radius: 1rem;
  margin-bottom: 20px;
  padding: 1%;
}
input[type=submit] {
  text-align: center;
  width: 55%;
  font-size: 20px;
  border: 1px solid #CCC;
  border-radius: 1rem;
  margin-bottom: 20px;
  padding: 1%;
}

まとめ

もっときれいに書く方法があると思うので、参考程度におねがいします。

追記

誤字を修正

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

[Rails]カスタムフォントの設定

はじめに

アプリ開発でフリーフォントを使用してデザインを変えたのでその使用方法をまとめました。

目次

1 フリーフォントの準備
2 フォントの読み込み

1 フリーフォントの準備

まず、フリーフォントサイトから自分が使用したいものをダウンロードします。
その後、ダウンロードしたファイル(拡張子ttfまたはotf)をapp/assets/fonts下に配置します。

注意事項

フォントはそれぞれ利用条件が異なります。商用可能であっても利用できる範囲に制限があったり、使用時に報告が必要なものもありますので、ご利用の際には必ず配布ページをご確認ください。

2 フォントの読み込み

CSSファイルに以下を記述します。

@font-face {
  font-family: “abcdefg”;
  src: url('/assets/abcdefg.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

フォントを適用したい箇所にfont-familyを指定します。

例

p {
  font-family; “abcdefg”;
}

これでフォントを適用することができました。

3 本番環境への適応

このままでは本番環境でフォントが適用されなかったため、以下を変更しました。

/config/production.rb
# 変更前
config.assets.compile = false
# 変更後
config.assets.compile = true

これにより本番環境で読み込まれていなかった画像ファイルも表示することができました。

参考リンク

https://qiita.com/dir_sh0606/items/ce605b70f1cb333f9d59
https://qiita.com/kinpin/items/bd7c9a7d7a739e297742

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

CSS セレクターでの大文字小文字区別について

はじめに

ちょっと気になったので実際に調べてみました。

用意した HTML とその結果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="target" class="target" data-target="target">target</div>
    <script>
      console.log('tag', document.querySelector('div'));
      console.log('TAG', document.querySelector('DIV'));
      console.log('tAg', document.querySelector('dIv'));
      console.log('id', document.querySelector('#target'));
      console.log('ID', document.querySelector('#TARGET')); // null
      console.log('iD', document.querySelector('#tArGeT')); // null
      console.log('class', document.querySelector('.target'));
      console.log('CLASS', document.querySelector('.TARGET')); // null
      console.log('cLaSs', document.querySelector('.tArGeT')); // null
      console.log('attribute name', document.querySelector('[data-target]'));
      console.log('ATTRIBUTE NAME', document.querySelector('[DATA-TARGET]'));
      console.log('aTtRiBuTe NaMe', document.querySelector('[dAtA-tArGeT]'));
      console.log('attribute value', document.querySelector('[data-target="target"]'));
      console.log('ATTRIBUTE VALUE', document.querySelector('[data-target="TARGET"]')); // null
      console.log('aTtRiBuTe VaLuE', document.querySelector('[data-target="tArGeT"]')); // null
    </script>
  </body>
</html>

結果まとめ

  • タグ名は大文字小文字を区別しない
  • 属性名は大文字小文字を区別しない
  • 属性値（idの値・classの値を含む）は大文字小文字を区別する

おわりに

考えてみれば当たり前でした…。

ちなみに[data-target="tArGeT" i]とすると取得可能です。ignore_caseですね。
詳しくは: 属性セレクター - CSS: カスケーディングスタイルシート | MDN

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

日付別

タグ一覧