Tailwind CSS を使う時に一緒に入れたいライブラリ

2024/02/04 119 users ライブラリ Tailwind CSS つの要素 HTML

Tailwind CSS を使う時に一緒に入れたいライブラリ 2024.02.03 Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並ん... 続きを読む

Tailwind CSSを使う時の疑問と解決方法

2024/01/24 17 users Tailwind CSS CSS 疑問 CSSファイル 結果

2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会... 続きを読む

CSS Modulesを型安全にする仕組み

2023/11/07 6 users CSS Modules 補完 ライブラリ CSSファイル

CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス... 続きを読む

VSCodeでEmmetを展開した時に閉じタグの後ろにID・クラス名のコメントを自動挿入する方法 | TechMemo

2020/06/29 6 users 抜粋 全文 フィード HTML Emmet

私はHTMLを書く時、どの開始タグと対になっているかをわかりやすくするために、閉じタグにクラス名をコメントで付けています。 例えば、こんな感じですね↓ これくらいの行数だったらコメントがなくてもわかりますが、行数が長くな… ※※※このフィードは記事の抜粋を表示したものです。全文を読むにはサイトにアクセスして... 続きを読む

CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス

2020/05/10 46 users CSSファイル Webクリエイターボックス CSS おなじみ

2020年5月11日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読... 続きを読む

これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet | コリス

2020/04/17 32 users BEM コリス UIコンポーネント CSS 命名規則

Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。 BEM Naming Cheat Sheet チートシートは3...記事の続きを読む 続きを読む

Javaのクラス名の形式まとめ - プログラマーの脳みそ

2020/04/14 11 users 脳みそ プログラマー Java nagise ユウキ

Javaのクラス名の表現方法で 「全部同じじゃないですか」 「ちがいますよーーっ」 「これだからしろうとはダメだ！もっとよく見ろ！」 をやっている?— なぎせ ゆうき (@nagise) April 14, 2020 Java言語を扱っていると何通りかのクラス名の表記法を見ることがある nagise.sample.Hoge.Piyo nagise.sample.Hoge$Piyo nag... 続きを読む

CSSのクラス名を決めるときに使うリストをつくりました - Qiita

2018/11/26 11 users 単語 英単語 設計手法 Qiita 英語

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読... 続きを読む

【Tips】Rubyソースコード内の全角スペースについて

2018/06/13 35 users Tips Ruby 挙動 例外 変数名

概要 Rubyは変数名メソッド名クラス名などに全角文字を利用することができる。それは全角スペース（全角空白）も例外ではない。そのため、コード内の全角スペースは変数名やメソッド名とみなされた上でのエラーメッセージが表示されるので注意する必要がある。 確認 全角スペースを変数名やメソッド名、クラス名の一部として利用してみる。半角スペースと間違えて全角スペースを挿入してしまった際の挙動に関しては こちら... 続きを読む

Sass：@eachや@forを使って繰り返し記述する手間を省く | NxWorld

2017/01/16 27 users Sass NxWorld each CSS 制御構文

Sassには`@each`や`@for`といった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。 例えばクラス名の一部と背景画像名だけ変更したものをいくつも記述するとか連番付きクラスをいくつも記述しながら一部プロパティだけ... 続きを読む

CSSのクラス名を決めるときに使うリストをつくりました - Qiita

2016/10/07 332 users 意味合い 単語 英単語 Qiita 設計手法

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作... 続きを読む

早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita

2016/07/11 592 users Qiita React Bootstrap ライブラリ 既存

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CS... 続きを読む

Railsで導入してよかったデザインパターンと各クラスの役割について - masato_hiのブログ

2016/03/20 397 users Rails KPT Keep 役割 単数形

2016 - 03 - 19 Railsで導入してよかったデザインパターンと各クラスの役割について 3年ほど Rails を書いてきてある程度知見が溜まってきたので、忘れないためのメモとして KPT と導入例を交えながらダラダラと書いています。 見出しの 命名規則 は クラス名/ディレクトリ名の単数形をupper camel caseにしたもの + KPT です。 Keepは今後も使うもの、Pro... 続きを読む

【保存版】プログラミングで使うやたら難しい英単語のかんたん解説15選

2016/02/25 432 users プログラミング 難しい英単語 保存版 retrieve 単語

プログラミングでコードを書くときは、99．9%英語を使いますよね。 クラス名やメソッド名をつけるのにも、欠かせません。 ですが、他人が書いたプログラムを見たとき、あなたはそこに書かれている英単語の意味を本当に理解していますか？ 知らない単語が混じっていて、困惑したことはありませんか？ fetch、acquire、retrieve…。 「よく分からないけど、まあいいや」ではすまされない！ コードの破... 続きを読む

プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく

2016/01/27 84 users ウェブ インフォメーション プログラミング HTML ヒント

今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ 「Hint.css」 のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで... 続きを読む

Python入門 - クラス

2015/08/23 40 users Python入門 クラス SEL def コンストラクタ

Python の クラス(class)は次のように定義します。クラス名は慣習的に大文字で始めます。 class MyClass: """A simple example class""" # 三重クォートによるコメント def __init__(self): # コンストラクタ self.name = "" def getName(self): # getName()メソッド return sel... 続きを読む

コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG

2015/06/17 417 users コンポーネント 株式会社LIG thumbnail 特徴

thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブログの著者情報などに用いられてます。 feature そのサービスの特徴を説明しているコンポーネント。 イメージ＋テキストでひとくくりになっていることが多いです。 overlay 要素の上に覆いかぶさるコンポーネント。 ... 続きを読む

SwiftでAuto Layoutがめっちゃ楽に書けるライブラリ「Crew」

2015/05/01 137 users CREW dictionary Storyboard イケ

みなさま、Auto Layout書いてますか。 あれ、コードで書くのめっちゃめんどいですよね。クラス名もメソッド名も長いし。 Visual Format使うと無駄にDictionary作る必要がある上にミスっててもコンパイルで教えてくれへんし。 Storyboardはチーム開発で泣きそうになるし。 そんなあなたに、めっちゃイケてるライブラリのご紹介です。 その名も”Crew“。 SPONSERD ... 続きを読む

html,css,markup - IDやクラス名でつかう英語の小話 - Qiita

2015/03/16 92 users Qiita 英語 小話

Sidebar 先日、イベントの懇親会での質問で、 レスポンシブ対応で、サイドバーのカラムと落とすのがモヤっとするんですよね、サイドバーなのに。 というのがあった。 これ、確かにCSSのカラムレイアウトとか勉強しはじめると、右側・左側に#sidebarと名付けられたものがあり、なんとなく「メインに対し、位置的に横にあるやつ」っていうイメージあるんですが、別にSidebarはレイアウト上の名前ってわ... 続きを読む

デザインパターン - Javaで書くBuilderパターンのパターン - Qiita

2015/02/15 86 users null Qiita オブジェクト String name

個人的にBuilderパターンはオブジェクトの生成制御や、ものによっては可読性が高くて好きなパターンなんですが、その実装には用途によっていくつかパターンがあるので、まとめてみました。 生成するオブジェクトの条件 クラス名:People フィールド:String name(必須), Integer age(必須), String hobby(オプション) 必須要素はnullを禁止 Peopleクラス... 続きを読む

pixivのCSSで使われるクラス名ルール

2014/12/04 121 users pixiv セレクター CSS 感触 ルート

pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない... 続きを読む

永和システムマネジメントを卒業してGMOペパボにjoinしました - diary.shu-cream.net

2014/08/01 38 users diary.shu-cream.net GMOペパボ 連番

永和システムマネジメントには、新卒で入社してから7年と4ヶ月お世話になりました。 永和のこと 学生時代に、キングファイルに綴じられたクラス名が連番になっている詳細設計書からプログラムを作成するバイトで精神を削られ、「まともなソフトウェア開発がしたい！」と会社を探している中で永和を見つけ、運良く入社できたことはとても幸運でした。 入社してからはお客様、プロジェクト、チームメンバーにも恵まれ、もう二度... 続きを読む

レスポンシブサイト用レイアウトフレームワーク「Grid」:phpspot開発日誌

2014/02/27 15 users Grid Bootstrap phpspot開発日誌 CSS

レスポンシブサイト用レイアウトフレームワーク「Grid」 2014年02月27日- Grid レスポンシブレイアウトフレームワーク「Grid」 Bootstrapにもレイアウトフレームワークがついていますが、こちらもモバイルファーストなレスポンシブ用のレイアウトフレームワーク レイアウト以外にもノーマライズ用のCSSがついていてモバイル端末間の差異を減らすようになっています クラス名がBootst... 続きを読む

BEMを使ったSassファイルの整理 - Weblog - Hail2u.net

2014/02/10 26 users BEM Sass Weblog hail2u.net 変数

このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBE... 続きを読む

BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

2013/10/29 553 users BEM MindBEMding アインシュタイン CSS 命名

BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。上記の2つの文書はどちらも@junyaさんが日本語に... 続きを読む