CSSのコードレビューのときに見ていること
社内のレビューで気をつけていることを書き出してみたらかなり一般的な内容だったので、せっかくだしQiitaに投稿します。なお👀のマークをつけている項目は「環境が整っていなければ確認しているけどフォーマッターに任せたい」項目です。それでは早速行きましょう！👀誤字がないこと・存在しないプロパティや値を指定していないことプロパティや値の誤字はフォーマッターでチェックしますclass名の誤字はフォーマッターで...
View ArticleClik here to view.
Backstop.jsでクリスマスを少し幸せにするリファクタリング
「見た目に変わりがないこと」を保証するのはつらい複数人で書いたコードのルールを統一したいページはできたものの時間の都合でコードがぐちゃぐちゃ開発環境を移行したい...
View Articlecssうんちをストーカーさせてみた
マウスストーカーマウスに追従するようなアニメーションのことをマウスストーカーというらしい。というわけでうんち追従させてやんよ💩単純にマウスカーソルを💩画像にするのは面白くないので、そこは違う形で実装するぞ！Let's Try↓画面内でマウスを動かしてみよう！ See the Pen unchi-stalker by petapetapeta (@petapetapeta) on...
View ArticleClik here to view.
【ライフハック】「背景とアイコンを同化させニキ」に対抗したい
TL;DRchrome extensionを自作したい！という人向けです。プロフィール画像を微妙に変更するchrome extensionを作る (chrome extensoionを自作して、特定のDOMに独自のcssを適用する)はじめに以下のようなことが、よくありますね。(?)_アイコン画像が真っ白なので、背景に同化してしまっています。...
View Article全部大文字のテキストに text-transform: capitalize が絶対に効かない理由
比較的ベーシックなプロパティであるtext-transformに知らない仕様があったのと、ちょうどCSSアドベンドカレンダーに空きがあったので投稿します!text-transformは、文字の大文字小文字の表示を変更するプロパティです。一番想定される使い方は、欧文の大文字／小文字の変換です。使えるキーワードと効果は次のように記憶していました。 1uppercase: 大文字に変換lowercase:...
View ArticleClik here to view.
年末まで毎日webサイトを作り続ける大学生 〜63日目 寿司屋の日常〜
はじめにこんにちは！@70days_jsです。寿司屋の日常を作りました。寿司屋の店主をホバーしたら客が「旨い！」と言うだけですがご了承ください。63日目。(2019/12/20)よろしくお願いします。サイトURLhttps://sin2cos21.github.io/day63.htmlやったことこれを作りました。(gif)↓html↓<body><h1>寿司屋の日常<...
View ArticleWebサイトってどうやって作るの？（具体的なことを全然知らない超初心者に読んでもらいたい。）
新参者、よろしくお願いします。 初めまして、今回記事を書かせていただく「じゅのす」です。始めに僕のプログラミング経験について。 ほぼ０に等しいです。笑以前に少しだけ"Python"っていうプログラミング言語を学んでいたのですが、別にそれを使って何か出来るというわけでもなく、もうほとんど覚えていません。...
View ArticleClik here to view.
Lightning Web Components における CSS の基礎と応用
Lightning Web Components (以下、LWC) に対するスタイルの設定方法を、Aura コンポーネントの場合との比較を交えつつ、様々な例を挙げて紹介します。なお、この記事では Salesforce Platform 上 の LWC の開発を前提としています。Lightning Design System の使用Salesforce...
View ArticleClik here to view.
自作WebサービスをXserverで公開するときの注意点と学び
1.はじめに2020年1月から転職活動を始める予定なのですが、ポートフォリオとして作成した自作WebサービスをXserverというレンタルサーバーにアップしました。その時の注意点や学びを書きますのでご参考になればと思います。このような方にはぜひ読んでいただきたい内容になっています。・プログラミングの勉強を始めてWebサイト、Webサービスを作成中の方・作成したサイト、サービスをこれからサーバーで公開...
View Articlerailsアセットプリコンパイルまとめ
javascriptscssjavascriptプロジェクトフォルダのapp/assets/javascript以下のファイルをすべて読み込む。...
View ArticleClik here to view.
条件によってテキストが変わるコンポーネントを分割して共通スタイルを適用する
こちらは、弁護士ドットコム Advent Calendar 2019 - Qiitaの 21 日目の記事です。要望条件によって中身が変わるからコンポーネントは分けたいけど、スタイルは共通化したい。 JS によるロジックは特にない。具体的なケースユーザーの権限によってテキストが変わるコンポーネント。共通のスタイルを使用したいのですが、一つのコンポーネントにまとめようとすると...
View ArticleCSSの継承〜親から子へ受け継がれる意志〜
アドベントカレンダー初挑戦！21日目（プラコレ的には◯日目）こんにちは！横田です。不適切なところがありましたらご指摘いただけると幸いです。よろしくお願いします！今一度見直したい「継承」フロントをやっていて、そこまで日は浅くないのですが、これまであまりcssプロパティの「継承」について深く考えたことがありませんでした。親要素からプロパティを指定していって、子要素で効いていなかったらまた指定しよう、ぐら...
View ArticleフィーリングでHTMLとCSSを書いていた新卒が模写コーディングをやった話
Ateam Lifestyle Advent Calendar 2019の21日目は株式会社エイチームライフスタイル...
View Articlerailsでapplication.scssと同じディレクトリのscssファイルが読み込まれないときの対処法
背景と対象usersコントローラを作成したときに生成された、app/assets/users.scssに記述したscssが反映されない。つまりはアセットパイプラインの仕組みが適用されていない状況になってしまっている状況。全部app/assets/application.scssに書けばcssの適用は出来ますがめっちゃ見ずらいのでやめた方がいいです。このような状況でつまっている方の役に立てればと思い書...
View ArticleClik here to view.
あなたの好きなCSSプロパティは何ですか？
次の中から選んでねtransform: translatemargin: 0 autoposition: absolutetransformが好きなあなた普通の人。みんな大好きtransform。要素を変形するには万能なCSSプロパティ。<divclass="box"></div><divclass="box...
View ArticleClik here to view.
初めてのtailwindcss (Vue.js + PurgeCSS)
この記事はCSS Advent Calendar 2019 21日目の記事です。気になってたtailwindcssを、Vue.jsでやってみましたという記事です。リポジトリはこちら→ https://github.com/hisako135/tailwindcss_vue_demoやったことは以下のような感じです。Vue.js...
View ArticleClik here to view.
CSSで描くパーティクルアニメーション
この記事は CSS Advent Calendar 2019 22日目の記事です。 CSSでこんなこともできるんだなぁぐらいの軽い気持ちでみていただけますと幸いです。パーティクルアニメーションとはパーティクルとは粒子のことで、粒子に対して色々な動きや変化を与えることで、神秘的な演出や派手な演出・キュートな演出など様々な表現ができます。CSSで描いてみた...
View Article