知っておくべきCSSプロパティー
カスタムプロパティ (--*): CSS 変数 前はCSS変数なんてなくて変数をつけたい時はSCSS, SASSなどでつけるしかなかったですが、 今は --global--color-primary のように、頭に -- 接頭辞がつけられたプロパティはカスタムプロパティを表し、 var 関数を使用して他の宣言の中で使用することができる値を持ちます。...
View ArticleやさしくはじめるTailwindCSS 最初の3ステップ
TailwindCSSは、CSSフレームワークの１つです。 この記事は、これからTailwindCSSを学びはじめる方向けにオススメの学習手順をまとめました。 私のオススメの学習手順は、以下の通りです。 公式トップページをみる チートシートに目を通す 実際に書いてみる では、ひとつひとつの手順を見ていきましょう。 公式トップページをみる まず、あなたがTailwind...
View ArticleNext.jsで表示された画像が粗い場合、どうすればよいか？
結論 next/imageコンポーネントをインポートし、qualityの値を調整します。 調整方法 qualityの値は、1〜100まで指定可能。 default値は、75。 qualityは、画像毎に設定することができます。 import Image from 'next/image' <Image src="" quality={100} width={} height={} />...
View ArticleCSS Gridを使うときにSubgridを使うと楽＆事故りづらい
これは何 CSS Gridを使う際のTipsです イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります リポジトリとGitHub Pages この記事を書くために書いたコードは公開しています。 GitHub PagesにはSubgridの対応状況の関係でGitHub PagesにはFirefoxからアクセスしてください。 Subgridを使わないと...
View ArticleVuforia Studio CSS備忘録：スライダーウィジェットのスタイルを変更する
はじめに Vuforia Studioでは、よく使うウィジェットに、スライダーウィジェットがある。そのスライダーウィジェットのスタイルの変更例を備忘録としておく。 前提 Vuforia Studioで、ARコンテンツを独力で作成できる人が対象。 スライダーを配置する スライダーウィジェットをドラッグ＆ドロップで 2Dキャンパスの下部パネルに配置する。スタイル確認用に2つ配置しておく。...
View Article制作会社でコードレビューしてもらったのでメモ
アクセシビリティーの理解 アクセシビリティーとは 「ユーザーが快適にWebを使えるようにすること。」 マウスの故障でキーボード操作でページの閲覧をしている方、視覚障害などで音声ブラウザを使用している方など、色んなユーザーにとって優しいサイトである必要があります。 意識することで結果的に綺麗なコードになり、seo的にも役に立ちます。 今回指摘されたポイント ・role属性の必要性...
View ArticleHoly Grail layout
Holy Grail layout is CSS layout. Body is 3part divided. It's has header and footer.
View Article【初心者でもわかる】スクロールの途中でバナー広告画像を表示する方法
どうも7noteです。スクロールしたら途中でピョコッと出てくる画像の作り方を解説 ここ数年でwebのバナー広告がとても増えたように思います。その中でもスクロールしていたら急に出てくるバナー系。 個人的には視線を奪われるのでストレスになり嫌いなのですが、ちゃんと欲しい情報が出てるのならいい仕組みだなと思います。 今回は簡易的に「一定距離スクロールしたら画面の下から出てくるバナー画像」を作っていきます。...
View ArticleCSSでぷかぷか浮かぶタイトル
CSSでぷかぷか浮かぶタイトルを作りたい！ //css .title, .title span { position: relative; display: inline-block; } .title span { padding: .65em 4em; background: -webkit-linear-gradient(#fe5f95 , #ff3f7f); background:...
View Articleflashメッセージを実装（非同期通信）
現在RubyとJavaScriptを用いて記事投稿サイトを作成しています。 今回はお気に入り登録/解除の際、flashメッセージを表示できるようにしていきたいと思います。 お気に入り機能の実装はこちら ■仕様等 ・お気に入りアイコンをクリックするとページ上部にメッセージが表示される ・画面スクロールに追従する ・連続でアイコンを押下した際は最新のメッセージが割り込む ・jQueryを使用しない...
View Articleフロントエンドだけで見積書・納品書・請求書を一括生成するWebアプリ
法人であれ個人事業主であれ、他社との取引においては帳票生成が欠かせません。その度にわざわざExcelを開いて方眼紙を作って、、、なんてことはエンジニアたるものやりたくないですよね。そこで、単一のjsonファイルから見積書・納品書・請求書を一括生成できるツールを作ってみることにしました。 デモサイト https://studio-mizutama.github.io/Quotation/ 心掛けたこと...
View Article[SCSS/SASS] 変数でカラー管理をしていたら警告が発生した件の対処方法
環境情報 Nuxt: 2.15.6 sass: 1.32.13 経緯 nuxtでsassのバージョンアップしたらSCSSで警告が出るようになってしまった。 警告文 You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which...
View Article【初心者でもわかる】空中に浮いてる感を出すCSS
どうも7noteです。空中にふわふわ浮いてるような感じを出すCSS まるで浮いてるような風に見せるCSSです。 画面内にアニメーションを入れることで、視線を誘導しやすくなります。 ソース index.html <div class="floating"><img src="heart.png" alt=""></div> style.css .floating {...
View ArticleFlexboxが当たり前になった今、floatっていつ使うの？
これは何 要素のレイアウトでdisplay: flexが大活躍している2021年において、floatプロパティをどう使うかを書いた記事です また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります リポジトリとGitHub Pages この記事を書くために書いたコードは全て公開しています。 実際の見た目はGitHub Pagesからどうぞ。...
View Article[React Native] スタイル周りのTips
前書き ReactNativeで開発を行った際に、得たTipsをまとめています。 目次 1.複数のstyleをあてたい 2.要素を上下中央揃えにしたい 3.Androidでshadowが当たらないことがある 4.Android（機種依存かも）でダークモードにするとアプリのstyleが変更されてしまう 5.height、maxHeightを両方充てたのに、最大値がうまく機能しない...
View ArticleCSSの命名規則
はじめに 副業先でCSSの見直しを行うことになりました。 主に自分の確認用ですが、チーム開発の時の基準になるかもと思い、CSSの命名規則について整理しました。 副業先がBEMを使用しているので、命名規則もBEMを意識したものになっています。...
View Articlereact+Material-UI+Styled Components Part0
Material-UI + Styled Componentsでスタイリングを少しでも楽に コピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペで完結させたい… って常に思ってる。とくにCSS。 細部の調整は必要でもできうる限り楽したい。 できうる限り何とかしてみた。 とはいうもののmaterial-UIもstyled...
View Articletailwindcssを使ってレスポンシブデザインを実現するために考えたこと
はじめに こんにちわ、dtakkiyです! 今回、css fwameworkの1つであるtailwindcssを使って、サイトのレスポンシブ対応を行ってみました。 当初、tailwindcssに用意されたクラスだけで、実際のサイトのレスポンシブ対応がどこまでできるのか疑問だったのですが、実際に書いて学習を進めてみると、ほぼcssファイルに独自クラスを記述する必要がなくなりました。...
View Articleレスポンシブで正方形作るの難しいよね
はじめに ある日、レスポンシブで正方形を作り、さらにその中央にSVGのアイコンがあるスタイルの実装をしたときに難しく感じたので記事にしました。 ソースコード HTML index.html <body> <div class="container"> <div class="box"> <img src="./icon.svg"...
View Article【初心者でもわかる】supやsubがあるテキストでも下線を引く方法
どうも7noteです。supやsubだと下線がずれるので、対策方法を考える 上付き文字を指定できる<sup>や、 下付き文字を指定する<sub>などがありますが、 これらに下線を指定すると表示がちょっとおかしくなってしまいます。 【崩れてしまう例の画像↓】 index.html...
View Article