タグ class
人気順 5 users 10 users 50 users 500 users 1000 usersCSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
2024/07/11
129 users
CSS
class名
関数名
単語リスト
BEM
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Class... 続きを読む
Amazon.co.jpでもれなく20％還元！スマートフォンアプリ「Vポイント」のキャンペーン！｜クレジットカードの三井住友VISAカード
2023/02/01
143 users
Amazon.co.jp
三井住友VISAカード
smcc
キャンペーン内容</p>\r\n","@type":"smcc/components/content/title"}}" id="anc01" class="cmp-title"> キャンペーン内容 期間中、Amazon.co.jpにてスマートフォンアプリ「Vポイント」で決済するだけで、ご利用金額（税込）の20％をもれなく還元します！（上限500円分）</p>\r\n","@type":"smcc/components/content/te... 続きを読む
Java9から17で入った新機能ピックアップ
2022/03/19
163 users
Java9
Record
コンポーネント
フィールド
レコード
Java9から17で入った新機能で、実際コード書く上で使いそうなものをピックアップします。 Java8を使い続けていた人向けです。 レコード (Java16) 不変なデータを保持するクラスを簡単に定義できるようになりました。 classの代わりにrecordで定義します。 名前の後に、フィールドのリスト(コンポーネントと呼ばれます)を... 続きを読む
現代のオブジェクト指向の class の割れ窓化と宣言的プログラミング
2021/01/21
300 users
きし
オブジェクト指向
切り口
ガラケー
プログラミング
オブジェクト指向には、カメラがやっとついたころのガラケーのイメージがある - きしだの Hatena の件。基本的には同意。ただちょっと切り口が違うので自分の意見を言っておく。ただ、このテーマで何度か書こうとして失敗していて、今回も成功しているとはいえない。 宣言的プログラミングの時代 現代の主流は「宣言的プ... 続きを読む
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
2020/08/17
758 users
Qiita
document.querySelector
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するとい... 続きを読む
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス
2020/03/30
165 users
コンポーネント
CSS
CSSリセット
ダークモード
コリス
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用で... 続きを読む
HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス
2019/11/11
447 users
コリス
ホバー時
フォーカス時
エフェクト
デスクトップ
シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方... 続きを読む
狐との恋!?「CLASSY.」が「着回し」に込めたフェミ的結婚観（はらだ 有彩） | FRaU
2019/09/22
114 users
FRaU
CLASSY
類型
昔話
フェ
「狐男」との恋を着回しページで展開した、光文社の雑誌「CLASSY. 2019年10月号」。ネット上ではこのストーリーについて、人間と動物など異類との結婚をモチーフにした昔話の類型である「異類婚姻譚」ではないか、と話題になった。 この着回しストーリーについて、「異類婚姻譚として新しい」と指摘するのは、昔話をフェ... 続きを読む
div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス
2019/09/18
149 users
コリス
矩形
ユーザーインターフェイス
div要素
CSS
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む
昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog
2019/09/13
633 users
昨今
aoma blog
JavaScript
プルリク
引退
はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClas... 続きを読む
Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io
2019/03/14
175 users
jxck.io
構文
挙動
created_at
導入
created_at: 2019-03-14 updated_at: 2019-03-14 tags: [private,javascript] Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field D... 続きを読む
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス
2019/01/28
149 users
コリス
stylesheet
スクリプト
Libs
Ajax
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む
エンジニア以外にも知ってほしい Android の UI Components｜NUmero｜note
2018/10/27
106 users
Note
Android
bot
エンジニア以外
ガイドライン
Android で使用する基本的な UI Components の紹介をしていこうと思います。 エンジニアが実装する時の Class 名と Material Design の名称が違うものもあるのですが、デザイナーは Material Design のガイドラインを参考にすることが多いと思うので、基本はガイドラインの名称を使っています。 # NavigationDrawer、Bot... 続きを読む
JavaScript初心者にclassを伝える
2018/09/16
222 users
学級
JavaScript
初め
サンプルコード
最初
初めに この記事ではJavascriptのclassについて解説します。 多くの初心者にとってclassは「何だこれ？？？」と躓くポイントだと思います。 （実際、自分も最初眺めた時は意味が分からず頭が学級崩壊してました。） なので、本記事ではサンプルコードと共に、 「何だこれ？？？」を「なるほど！！！」に 変えていけるよ... 続きを読む
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
2018/08/10
289 users
CSS
CSS flexbox
スニペット集
Flexbox
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al... 続きを読む
これはかっこいい！要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css | コリス
2018/07/17
143 users
ポパー
コリス
コンテナ
HTML
ナビゲーション
Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作...記事の続きを読む 続きを読む
CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート | コリス
2017/12/13
105 users
コリス
ヘキサゴン
div要素
CSS
CSS Grid
シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-... 続きを読む
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
2017/11/19
394 users
Qiita
React
jsx
CSS
カスタムデータ属性
いきなり結論を書くと、 id や class はスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。 先に断っておくと主にreactについての話で、JSXを前提とします。 はじめに ご存知の通り、ロジックとスタイルは別物です。 もしスタイルの変更のためにclass名を変えて、ロジックのテストが落ちるなんてことはあってはならないのです。 cssに... 続きを読む
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox | コリス
2017/11/07
102 users
コリス
HTML
CSS
スタイル
ラジオボタン
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 ...記事の続きを読む 続きを読む
【酷過ぎ】宣伝会議「コピーライター養成講座」がヤバかった体験記
2017/07/02
754 users
コピーライター養成講座
宣伝会議
体験記
コトバ
https
「コトバは時々奇跡を起こす」 などの広告で有名なあの講座「コピーライター養成講座」。 92500円(税別)と割高めの講座料金でこれは酷い。(企業の研修でもよく使われてるので)企業の研修担当の方、広告の勉強意欲がある方はほんとお気をつけください。 通っていたのは、 コピーライター養成講座拡散クリエイティブコース。 ↓公式 https://www.sendenkaigi.com/class/detai... 続きを読む
大規模プロダクトにおけるフロントエンドの1年間の変化 - Qiita
2016/12/19
118 users
Rails
Qiita
Sprockets
サーバーサイド
プロダクトに関わるエンジニアは40人近くいて、弊社ではフロントエンド/サーバーサイドといった明確な線引きがないため全員がフロントエンドに触れる機会が有りえます。開発チームチーム・コード共にそれなりに大規模と言えるのではないでしょうか。 やったこと モジュール間の依存解決 もともとRailsのSprocketsに沿ってjsを書いていたため、classは全て一つのグローバル変数に格納され、全てのjsが... 続きを読む
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス
2016/03/17
412 users
コリス
Bootstrap
Flexbox
グリッド
単位
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む
AdBlock - アドブロックをしてるユーザーにページを見させない最もシンプルな方法(JS不要) - Qiita
2015/12/19
192 users
Qiita
Adblock
github.com
ライブラリ
ユーザー的にはウェブページが軽くシンプルに見れて嬉しいのですが、サイト運営してる人からすれば広告無しにページを見られちゃうと困るって人は多いと思います。 https://github.com/sitexw/FuckAdBlock みたいなadblock対策のライブラリまで登場していますが、もっとシンプルなAdBlock対策を思いついたので、書いてみました。 対策方法 広告っぽい名前のClassを見... 続きを読む
Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方 | コリス
2015/06/17
269 users
グリッドシステム
コリス
Bootstrap
フレームワーク
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing B... 続きを読む
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ | コリス
2015/03/30
413 users
コリス
GitHub
BOD
Body
スクリプト
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bod... 続きを読む