What's New Qiita

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

  • 投稿日：2020-12-01T23:33:56+09:00

2日目

2日目やってみた

  • 日中出たり入ったりが多々あったせいか、疲れてしまい1ページ（フォントカラーとサイズ）だけしか出来なかった
  • 次は背景色変更とサイズの修正
  • 個人的にはなんかHTMLらしくなってきたと思う
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-01T23:33:24+09:00

駆け出しエンジニア の学習記録 4日目　HTML/CSS

参考サイト↓
http://www.htmq.com/html/indexm.shtml

insert mode 勝手に発動していた

css

class は　."class名"
id は　#"id名"

pタグの中のclassを指定するのは　　　p."class名"
h1,p 　　　　　　　両方を指定
h1,".class名" 　　　両方を指定
div p 　　　　　　　divタグのpを指定　
h2:hover 疑似クラスを使ったセレクタ　状態を指定している　
padding 内側の余白
margin 外側の余白　
padding:○px.○px.○px.○px.; 上から時計回りに指定できる　
<!-margin :auto; よく使う　

他のメモはHTMLタグが反応しまくって見えにくいので割愛しますｗ　

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

tailwind.config.jsを見える化できるライブラリを使ってみる！

この記事はAteam Brides Inc. Advent Calendar 2020 3日目の記事です。

はじめに

image.png

皆さんtailwindCSS使ってますか？＼(^o^)／
カスタマイズ性が高いので自分のプロダクトに合わせてtailwind.config.jsを編集し、使うことも多いと思います！
個人開発や、数人での開発ならtailwind.config.jsを直接見にいけば特に設定で迷うことはないかなと思いますが、10人以上で開発をするプロダクトとなると、デザイナーやコーダーなどあまり設定に関して知識がない人もいる場合があります。
設定の情報が誰でも簡単に、最新なものが見れる状態にできないかと考えて調べていると、良さそうなライブラリを見つけたので紹介します！

Tailwind Config Viewer

Tailwind Config Viewer
Tailwind Config Viewerは、tailwind.config.jsを視覚化するためのUIツールです。
以下のようにtailwind.config.jsの設定を見ることができます！
見るだけじゃなく、class名をクリックするとクリップボードにコピーもできるのでそのままコードに貼り付けて作ることもできます！

DEMO
image.png

インストール

NPX

npx tailwind-config-viewer

tailwind.config.jsがあるディレクトリで実行します。

グローバル

npm i tailwind-config-viewer -g

ローカル

npm i tailwind-config-viewer -D

"scripts": {
  "tailwind-config-viewer": "tailwind-config-viewer -o"
}

ローカルにインストールする場合は、package.jsonに上記のスクリプトを追加し、ビューアーを起動することもできます。
※npm run devする時とかに一緒に起動するようにしておくと便利そうですね！

使用方法

tailwind.config.jsを編集して同じ階層でtailwind-config-viewerを実行するだけでOK！

colorsにextendでprimaryとsecondaryのカラーを追加してみました！
※extend内に書くことでtailwindCSSのデフォルトカラー設定に継承する形で追加できます。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#C43BAD",
        secondary: "#46C9E5",
      },
    },
  },
  variants: {},
  plugins: [],
};

無事反映されました！
スクリーンショット 2020-12-01 22.29.51.png

ファイルに書き出してデプロイ

ローカルで実行して、localhostで確認しても普通に使えると思いますが、どこかにデプロイして常に最新のものを見たいというケースもあると思います。

以下のコマンドで特定のディレクトリに書き出すことができます。
※ディレクトリは自由に作ってください。

tailwind-config-viewer export ./output-dir

GitHub等にpushして、tailwind.config.jsが変更されていたらexportしてデプロイする。みたいに作っておけばうまく運用できそうです！

起動コマンド(オプション)

オプション デフォルト 説明
-p, --port 3000 ビューアを実行するポート。使用されている場合は、次に使用可能なポートを使用します。
-o, --open false デフォルトのブラウザでビューアを開きます。
-c, --config tailwind.config.js tailewind.config.jsへのパスを指定します。

さいごに

tailwindCSSをゴリゴリカスタマイズして使っている方や、チームで認識の統一をしたい方々には有用なライブラリではないでしょうか＼(^o^)／
単純に設定を可視化しているだけですが、簡単なデザインシステムのように使うこともできそうなのでとても便利なのではないかなと思います！

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

【初心者でもわかる】width: auto;とwidth: 100%;の違い

どうも7noteです。分かっているようで難しいautoと100%の違い。

widthを指定する際、初期値でautoが入っています。
しかし、場合によっては100%を指定しなければならない場面もあります。

特に初心者の方がごっちゃになりやすいと思うので、違いを分かりやすくまとめてみました。

違い① ブロック要素かインライン要素での違い

ブロック要素の場合

  • width: auto;
    • 横幅　＝　親要素の幅いっぱい
  • width: 100%;
    • 横幅　＝　親要素の幅いっぱい

インライン要素の場合

  • width: auto;
    • 横幅　＝　コンテンツ分
  • width: 100%;
    • 横幅　＝　コンテンツ分（widthは効かない）

インラインブロック要素の場合

  • width: auto;
    • 横幅　＝　コンテンツ分
  • width: 100%;
    • 横幅　＝　親要素の幅いっぱいまで広がる

※コンテンツ分 = 文字なら文字数分、画像なら画像の横幅分が要素の幅になる。

違い② 左右のmarginが加わると・・・

ブロック要素の場合

  • width: auto; margin: 0 50px;
    • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白
  • width: 100%; margin: 0 50px;
    • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

  • width: auto; margin: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; margin: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

  • width: auto; margin: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; margin: 0 50px;
    • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い③ 左右のpaddingが加わると・・・

ブロック要素の場合

  • width: auto; padding: 0 50px;
    • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
  • width: 100%; padding: 0 50px;
    • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

  • width: auto; padding: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; padding: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

  • width: auto; padding: 0 50px;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; padding: 0 50px;
    • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い④ 左右のpaddingが加わり、かつbox-sizing: border-box;をかけると・・・

ブロック要素の場合

  • width: auto; padding: 0 50px; box-sizing: border-box;
    • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
  • width: 100%; padding: 0 50px; box-sizing: border-box;
    • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

インライン要素の場合

  • width: auto; padding: 0 50px; box-sizing: border-box;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; padding: 0 50px; box-sizing: border-box;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

  • width: auto; padding: 0 50px; box-sizing: border-box;
    • 横幅　＝　コンテンツ分 + 左右50pxの余白
  • width: 100%; padding: 0 50px; box-sizing: border-box;
    • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

表で比較するとこんなかんじ

①width指定のみ

ブロック要素 インライン要素 インラインブロック要素
width: auto; 幅いっぱい コンテンツ分 コンテンツ分
width: 100%; 幅いっぱい ×（上と同じ） 幅いっぱい

②width・margin指定

ブロック要素 インライン要素 インラインブロック要素
width: auto;
margin: 0 50px; 		幅いっぱい
＋
左右にmargin		 コンテンツ分
＋
左右にmargin		 コンテンツ分
＋
左右にmargin
width: 100%;
margin: 0 50px; 		幅いっぱい
＋
左右にmargin		 ×（上と同じ） 幅いっぱい
＋
左右にmargin

③width・padding指定

ブロック要素 インライン要素 インラインブロック要素
width: auto;
padding: 0 50px; 		paddingを含めて
幅いっぱい		 コンテンツ分
＋
左右にpadding		 コンテンツ分
＋
左右にpadding
width: 100%;
padding: 0 50px; 		幅いっぱい
＋
左右にpadding		 ×（上と同じ） 幅いっぱい
＋
左右にpadding

④width・padding・box-sizing指定

ブロック要素 インライン要素 インラインブロック要素
width: auto;
padding: 0 50px;
box-sizing: border-box; 		paddingを含めて
幅いっぱい		 コンテンツ分
＋
左右にpadding		 コンテンツ分
＋
左右にpadding
width: 100%;
padding: 0 50px;
box-sizing: border-box; 		paddingを含めて
幅いっぱい		 ×（上と同じ） paddingを含めて
幅いっぱい

まとめ

なんか画面外にまでスクロールできてしまったりするとき、この指定が適切でない場合がよくあります。

コーディングに慣れているととくに意識せず、適切なものを指定できるようになりますが、
コーディング初心者の頃はなんとなくで指定してしまいがちです。

自分で理解できていないソースはデザインが崩れてしまう要因になりやすいので、なんとなくではなくしっかり理解して考えられたコーディングが必要です。

実際に背景色を入れながら試してみると、それぞれの違いがよくわかると思いますのでやってみてください。

おそまつ！

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

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

CSSで三角形を表現する方法

サンプル

See the Pen triangle by pd_kosaka (@pd_kosaka) on CodePen.

解説

borderを使って表現します。
※詳細はサンプルをSassを参照

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

Qiitaのトレンド表示が改悪された

2020/11/30あたりにQiitaトップページのレイアウトが変更されました。

  • トレンドにNewの表示が出なくなった。
  • 訪問済リンクの色が変わらなくなった。

結果として、その記事を既に閲覧したかどうかが全く判別できない。

a.png

なんで:visited入れてくれないの？？？

あとLGTMだけで1行取るのってわりと無駄な気がする。

解決策

Stylusとかに↓のCSSを突っ込めばいいです。

.css-81mxb5 a:visited {
    color: #f00;
}

css-81mxb5とかは自動生成と思われるのでいつまでも使えるかは怪しいですが、idはHomeArticleTrendFeed-react-component-433a141c-64f3-4ee8-bf53-e3dce809f355とかなのでさらに役立ちそうにない。
誰かがもっとちゃんとしたセレクタを書いてくれるはず。

02.png

※SS撮影のため履歴を全消しした

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

CSS postion absolute / relative

positionプロパティ

positon = 要素を配置する基準を指定するプロパティ
基準の場所を区別する為に、absolute(絶対位置)とrelative(相対位置)がある。

absolute(絶対位置)

移動するときの基準がウィンドウ、もしくは親要素になる。
absoluteで指定した場合、他の要素を無視して左上（top:0、left:0の位置）が基準になる。

.クラス名 or #id名 {
    position: absolute;     
}

relative(相対位置)

移動するときの基準が元々いた位置(positionを記述する前に配置されていた場所)になる。
親要素にrelativeを指定することで、親要素の位置を基準に子要素を移動させることもできます。

.クラス名 or #id名 {
    position: relative;     
}

参考元はこちら
こちらのサイトにて画像でわかりやすく説明されていますので是非ご覧ください。
（https://uxmilk.jp/63409）

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

object-fitで画像をうまく調整する

はじめに

現在、質問アプリケーションの開発を個人で行っています。
新しく画像を非同期で保存し、プレビューに表示させる機能を実装するにあたって
object-fitという簡単に画像を指定したサイズに調整してくれるcssプロパティを使用したので学習メモとして残します。

object-fitとは？

CSSのobject-fitプロパティは、置換要素、例えばimgタグやvideoタグなどの中身を、コンテナーにどのようにはめ込むかを設定します。
参考:object-fit MDN web docs

※置換要素とは、コンテンツが現在の文書のスタイルに影響されない要素のこと。一般的な置換要素は、iframeタグ・videoタグ・embedタグ・imgタグなど。
参考：置換要素 MDN web docs

object-fitで画像を指定のサイズに切り取ったり、縦横比を維持しながらリサイズしたりと様々な設定ができる。

プロパティ一覧 object-fit: ◯◯;

・fill

初期値。要素に合わせるため縦横比は維持されない（画像が伸びたり縮んだりしてしまう）。

・contain

画像の縦横比は維持されつつ、指定の画像領域に収まるよう大きさが調整される。

・cover

要素に余白がでないようにしつつ、縦横比は維持し要素からはみ出ている部分はトリミングする。

・none

画像のリサイズはされず、画像オリジナルのサイズのまま表示される。

・scall-down

要素より画像が大きい場合は、「contain」を、小さい場合は「none」を指定する。
つまり画像が大きい場合は縦横比を維持しつつ、要素内に収まるよう調整され、小さい場合は画像オリジナルのサイズで表示される。

参考サイト

こちらのサイトに、object-fitのそれぞれの使用イメージが記載されていてとてもわかりやすいです。
object-fit CODE KITCHEN

まとめ

今回は、object-fitというCSSプロパティについてまとめました。
CSSについては、まだまだ便利なものが沢山あるので使いながらどんなものがあるか知っていきたいと思います。

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

なぜJSが必要なのか？　(JS学習アウトプット)

あいさつ

初めての人は初めまして！知っている人はこんにちは！
Atieです！
実は一度qiitaのアカウントを消したのですが「web系エンジニアになろう(勝又さん)」の本を読んで「qiitaのアカウントは必要」ということだったのでまた作りました！
qiitaでは主に学習のアウトプットをしていきます！
今回はJSのアウトプットをしていきます！JSはもともと学んでいたのですが「もう一度基礎からしたい！」と思ったのでしまぶーのIT大学さんの動画を参考に学ばせてもらいました！わかりやすくイラストも使っておりなおかつ「元Yahoo Japan!エンジニア」すごいですよね！さらに無料です！
いい時代になりました...

では！

なぜJSが必要なのか？

皆さんはなぜwebサイトにJSが必要かわかりますか？
「JSを学ぶのにそこから？」
と思った方「木を見て森を見ず」です
しまぶーのIT大学さんが言っていました
「普通学習するときは”文法”から入るけどそれはお勧めしない。まずは全体像をみて一つの技術を掘り下げていくほうが”文法”を使うタイミングなどがわかる」と
なのでまずは”文法”ではなく「なぜ必要なのか？」というところから学んでいきます

話を戻します
「JSはなぜ必要なのか？」わかりますか？
それは「JS未使用のwebサイト」と「AJAXを使ったwebサイト」の二つを解説する必要があるのでまずはそこから

JS未使用のwebサイト

最近はどんなwebサイトでもJSが使われるようになりました
それは便利だからです
どこが便利なのか？それは通信を見てもらうとわかると思います

JS未使用の通信
「example.comを見たい！」　→　ブラウザがexample.com(サーバー)にreq(リクエスト)を送る　→　サーバーがres(レスポンス)を返す(htmlファイル) →　ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
大まかにこのような仕組みになっています(DBがどうのこうのなどは省略しています)
この方式だとページを移動するときにいちいちサイレンたリングしなければいけないので少し不便です

JS使用のwebサイト

では逆にJSを使っているwebサイトの通信はどうでしょうか
例として「ToDoListのwebアプリケーション」を見てみます
例えばタスクを追加するたびにページが再レンダリングされてはめんどくさいですよね？
さらにこの方法だと追加はできても個人個人で保存ができません

JSを使った場合はサーバーにreqを投げてDBに追加してもらったり消してもらったりしています(JSはセキュリティ上DBに直接操作することはできませんただNode.jsなどは例外)
こういうのを「AJAX」という
AJAXを使うことでページをいちいち再レンダリングせずに追加や削除ができます

このAJAXを使った最たる例が「Googl Map」です
自分は最近JSを学び始めたので昔のことは知りませんでしたが
昔のマップは画面に矢印が付いていてそれを押すことでその方向に移動する仕組みだったらしいです
そしてその移動するたびに再レンダリングが必要

しかし今のGoogle Mapは画面に矢印がなくさらに直感的に使えるようになっていますよね？そしていちいち再レンダリングすることもない
すごく使いやすいですよね！

従来のwebが
・JSがなくてもHPが見れる
・resで返されるのはhtmlファイル
・ページを移動するたびに再レンダリングする必要がある

JSを使ったwebサイトの仕組み

先ほどではJSが必要な理由について解説しました
ここでは具体的にどんな通信かを見ていきます

「example.comを見たい！」　→　ブラウザがexample.com(サーバー)にreq(リクエスト)を送る　→　サーバーがres(レスポンス)を返す(htmlファイル) →　ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
ここまでは同じです
しかし「お問い合わせページに行きたい！」となったとき従来の方式ではもう一度上の方法が繰り返されますがJSを使うとresで返されるデータがhtmlではなくjsonというJSのデータが返ってきます
JSのデータとは配列などです

jsonデータの例

data.json
[
    {"id":"1", "name":"dog"},
    {"id":"2", "name":"cat"}
]

このようなデータがresで帰ってきます

AJAXを使用するとページを移動する際に「最低限」のレンダリングで済みます
例えば大体のHPの場合は「ヘッダー」と「フッター」は一緒のデザインになっていると思います
なのでメインであるところのみをレンダリングします
「フッター」と「ヘッダー」が再レンダリングされないので早いです

まとめ

JSを用いたweb

  • より体験がいいwebサイトが見れる
  • レスポンスで返すのは　JSON
  • ページ移動時に最低限のレンダリング (ほかにもたくさんありますがきりがないので...)

従来のweb

  • JSがなくてもHPは見れる
  • レスポンスとして返すのはhtmlファイル
  • ページを移動するたびに再レンダリングされる

JSすごいですね！

最後に

ここまで見ていただきありがとうございます！
最後に動画のurlがあるので「JSを学んでみたい！」という方は動画を見て学ぶのがお勧めです！
ではまた！

AtieのTwitter
しまぶーのIT大学さんのTwitter
勝又健太さんのTwitter

次回

学習,参考動画

【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 しまぶーのIT大学さん

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

日付別

タグ一覧