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

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

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

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の好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで... 続きを読む

コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前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には機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない... 続きを読む

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

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

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

接頭辞つきのクラス名にマッチする CSS セレクター – terkel.jp

2013/03/05 81 users terkel Grid Kraken セレクター 接頭辞つき

Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気が... 続きを読む

Y.A.M の 雑記帳: 「よりよいコードを求めて命名について頭をひねる会」のログ

2012/11/12 598 users 命名 雑記帳 ロク よいコード A.M

2012年11月13日火曜日 「よりよいコードを求めて命名について頭をひねる会」のログ http://www.zusaar.com/event/438105 アプリケーションを作る英語 の著者の西野さんを交えて、クラス名とかメソッド名とか変数名とか命名で困っている課題を1つ以上持ち寄りみんなで一緒に検討する勉強会をしました。 「アプリケーションを作る英語」 電子書籍 http://tatsu-zi... 続きを読む

Javaのクラス宣言5種+α - プログラマーの脳みそ

2012/03/08 351 users おさらい Javaファイル 脳みそ プログラマー Java

00:53 | Javaのクラス宣言には5種類ある。トップレベルクラス・ネストしたクラス・内部クラス・ローカル内部クラス・無名クラスの5種類だ。今回はこの5種類のクラス宣言のおさらい。 トップレベルクラスこれは普段使っているクラス。拡張子が.javaのファイルを作り、そのファイル名とクラス名を合致させなくてはいけない。そのjavaファイルのトップレベルに位置する。 ネストしたクラストップレベルクラ... 続きを読む

スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index Webサイト

2009/07/09 613 users tag CSS スタイルシート ID名 基本

見た目に関する情報を名前として使用すると、スタイルを変更した場合などに矛盾が生じてしまうことがあります。 left、right left や right などの位置を表す名前は、後で左右を入れ替えた場合などに矛盾が生じてしまいます。 red、blue ... red や blue などの色を表す名前は、後で色を変更した場合などに矛盾が生じてしまいます。 w300px、size12 ... サイズを... 続きを読む

よいCSS開発を行うための８のＴＩＰＳ:phpspot開発日誌

2009/03/31 264 users Tips phpspot開発日誌 wrapper Box 以下

8 methods to bring your front end coding to rockstar levels | StylizedWeb.com よいCSS開発を行うための８のＴＩＰＳとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。 ・IDやクラス名にはより意味のあるものをつけよう たとえば、boxとかwrapperとかcontainerとかは一般的ですね... 続きを読む

[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify | コリス

2009/03/02 230 users コリス フェード オルト キャプション 常設

画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションは... 続きを読む

中途半端に優秀なプログラマが「正しいプログラミングテクニック」だと妄信しがちな３つポイント - 分裂勘違い君劇場

2008/10/26 941 users スコープ 変数 オブジェクト メソッド プログラマ

「変数のスコープは狭いほど良い」と妄信する 変数でもメソッド名でもクラス名でも言えることだが、単純に「スコープは狭いほどよい」という方針でプログラムすると、逆に保守性も可読性も悪いプログラムができあがることがけっこうある*1。 実際、「あちこちから頻繁にアクセスするようなオブジェクトやメソッド」は、... 続きを読む

【レポート】PHP版Ruby on Rails? - DB操作クラスを自動生成する"PHP Object Generator" | エンタープライズ | マイコミジャーナル

2007/07/28 103 users エンタープライズ アトリビュート マイコミジャーナル POG

PHPのソースコードを自動生成するWebアプリケーションであるPHP Object Generatorの最新版「PHP Object Generator （以下、POG）3.0」が26日（米国時間）、公開された。PHPで開発されたWebアプリケーションで、The BSD Licenseのもとで公開されている。POGでは、クラス名とアトリビュートを指定することで同データを操作するためのPHPクラスが... 続きを読む