Tailwind CSS のカスタマイズのオススメ
はじめに こんにちは、スタートアップでフロントエンドエンジニアをしているひろです。 今回はフロントエンドの開発でよく使われている Tailwind CSS について自分がよくするカスタマイズをまとめてみました。 なにかの参考にして頂けたら幸いです。 （久しぶりの投稿なので優しい目で見てもらえたら幸いです〜！！） 目次 1.カラーパレットの追加 2.コンテンツの高さ、幅の指定したい時...
View Article疑似要素にsvgアイコンを使用する
SVGアイコンの大きさを変えたい &::after { content: ''; background-image: url('svgのurl'); width: 12px; height: 12px; display: inline-block; background-repeat: no-repeat; //画像をリピートしない background-size: contain;...
View Article【css】a:hoverが効かない時
【問題】「画像はリンクホバーa:hoverが効くのにdivはきかない！？」 【解決回答】div要素に聞かせたいホバーはcssにdisplay: block;を追記。 いつもは画像素材を用いて、その素材をホバーで変色させることが多かったのですが、 以下のようなhtmlに:hoverでカーソルを乗せた時にdiv要素を少し透明にしようとしたら効かず。 scssファイルを考え直す。 元コード .html...
View ArticlegrayでもgreyでもCSS的にはいいんですね
「グレー」はgray？ grey？ たぶん常識だったんだろうけど知らなかったので…。 私は前者「gray」だけだｚと思っていたのですが、CSS的には「両方OK」らしいです。 ライトグレーとかも両方OK。 辞書的には、アメリカ英語とイギリス英語の違い、らしいです。 https://dictionary.goo.ne.jp/word/en/grey/#ej-37411 gray, (英)grey...
View ArticleSemantic UI ReactのInputコンポーネントのinputタグにクラスを追加したい
経緯 以前Semantic UI Reactを使って画面を作ってるときに、inputタグにクラスを追加してCSSを適用するのに苦労したので記録用に。 多分、編集不可のdisableが白っぽくて嫌だったので、灰色にしたかったけど、普通にクラスを追加して「.class input{~}」ではCSSが利かなかったので、今回の方法をとりました。 Semantic UI Reactについて...
View ArticleリセットCSSとは？
リセットCSSとは リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのこと 仕組み ブラウザが元々持っているデフォルトのCSSの設定を上書きするように、ブラウザ毎に異なるスタイルを持つ特定のセレクタに対してプロパティを指定してブラウザ間の表示を揃えるという仕組み...
View Articleバナー職人だった私が、業務でコーディングするようになって感じたこと
元々は社内でバナー職人みたいな立ち位置だった私ですが、ここ1〜2年で、少しずつサイトのデザインやコーディングも任せて頂く機会が増えました。 今回は業務でコーディングをしてみて感じたことを書いてみたいと思います。 ※HTML,CSS,jQueryのみを使った静的サイトのコーディングのお話です ① 綺麗にHTMLマークアップをする...
View ArticleWEBページで CSS セレクタと XPath の検証・評価をする
Google Chrome の dev tools を利用すれば、CSS セレクタと XPath の検証を実施できる。 CSS セレクタの検証 CSS セレクタの検証をしたい WEB ページを開き、Google のデベロッパーツールを開く コンソールを開いて、式フィールドに JavaScript で document.querySelectorAll('xxxxx') を入力する xxxxx...
View Article【CSS】約1年フロントエンドを開発して見えてきた本当によく使うCSSプロパティまとめ【入門】
はじめに 1年前、僕が新卒エンジニアとしてデビューした当時はCSSをほとんど書いたことがありませんでした。当時は padding と margin の違いすらわからず、デザイナーに用意して頂いた Figma を見ても CSS...
View ArticleCSSのみで縦横比を維持してトリミングされたサムネイルを作って横並びにしたい
やりたいこと CSSのみで縦横比を維持したい サイズも縦横比もバラバラな画像をCSSのみでトリミングしたい 横並びにしたい IE11も対応したい やってみたこと サイズ・縦横比の違う画像を用意しました。 HTML <div class="flexBox"> <!-- 1枚目 800*533 --> <div class="item"> <div...
View ArticleCSS-in-JSでStylelintを使えるようにした
概要 EmotionなどのCSS-in-JSにもStylelintを適用したい。 少し苦戦したのですが、うまくいった方法をメモしておきます。 どなたかの参考になれば幸いです！ ※ここでは stylelint14系での対処法を紹介します。 環境 stylelint: v14.3.0 emotion: v11.6.0（@emotion/styledを使用） そのままだとどうなる...
View ArticleHTML/CSSの基礎の基礎[初心者向け]
WEBサイトを作る上で必ず触ることになると思われるHTMLとCSS。 ざっくりいうと「タグで囲むやつ」とか「見た目を調整するやつ」なんですが、最近これらはどういったものか説明する機会があったので、今回自分なりの解釈を書いておこうと思います。 既に習熟されている方には今更な内容だと思いますのでスキップ推奨です。 HTMLとはなんぞや 「Hyper Text Markup...
View Articleタイプライターのようなエフェクト【CSSだけ】
See the Pen typewriter by Shiho Sakoda (@sakodashiho) on CodePen. animationと@keyframesプロパティを使用して、タイプライターのようなアニメーションができるようです。 CSSだけでこういったアニメーションができちゃうのは便利ですね。 入力する文字数に合わせて、CSSのwidthとsteps()の数字を変更します。...
View ArticlePublishでカスタムテーマを作成する方法(Swift)
「PublishでWebサイトを構築する」は4部構成です。 記事を順番に読み進めると、PublishでWebサイトが構築できるようになります。 第1部: セットアップ&使い方 第2部: カスタムテーマの作成 ←イマココ 第3部: プラグインのインストール 第4部: プラグインの作成（未投稿） はじめに Publishでテーマをカスタマイズする方法を紹介します。 環境 OS：macOS...
View ArticlePythonでCSSを全力で小さくする！
ごあいさつ こんにちは、非リア系高校生のLaddgeです。 明日から高3になります。留年回避万歳 最近Web系の開発をよくやっていて、先日リリースした静的サイトジェネレーター「tanuky」についての記事は、たくさんの人に見ていただけて本当に嬉しいです。 ありがとうございます。 気が向いたらそっちも見てみてください↓ 「PageSpeed Insights」で100点を取りたい...
View ArticleReact の String Style CSS におけるセミコロン戦略
この記事は何か？ 最近個人開発に力を入れており、CSS は String Style で記述しています。 3ヶ月ほど開発してきて知見が溜まってきたので、現時点での自分のベストプラクティスとして記事を書くことにしました。 といっても内容はしょうもないです。 「CSS の末尾のセミコロンは付けたほうが良いの？付けなくてもいいの？」という内容です。...
View ArticleCSS または JavaScript におけるブレンドモード対応
過去記事から分離、追記、一部変更。 参考「ImageMagick で PSD のレイヤー情報を JSON 形式で取り出す & 関連情報 - Qiita」 本記事で使用した ImageMagick のバージョンは 6.8.9 です。 1. ブレンドモード対応 1.1. 早見表 ブレンドモードの表記の対応は以下の表のようになっています。 記載する内容は以下の通り: ブレンドモード名...
View Article【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい！
概要 この記事は、Gridレイアウトの基本的な書き方をもとに、 Gridレイアウトを使う時に知らないといけないCSSプロパティについてを解説します。 Gridレイアウトのショートハンド（一括指定）ができるようなCSSについての解説はしていません。 あくまで【入門】になるので、わかりやすい・理解しやすいように 使うプロパティはわかりやすくしています。...
View ArticleCore Web Vitals（コアウェブバイタル・CWV）改善の施策を考える
Core Web Vitals（コアウェブバイタル・CWV）改善の施策を考える はじめに Core Web Vitals（コアウェブバイタル・CWV）のスコアを改善する機会があったため、勉強も兼ねてスコア改善するためにどのような方法があるかをまとめたいと思います。 コアウェブバイタルは ・LCP（ページの読み込み速度） ・FID（インタラクティブ性、応答性）...
View Article