CSS
CSS Custom Propeties（いわゆるCSS変数）は便利です。 この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。 /* variables.scss（変数定義ファイル） */ $some-color: #64ff00; /* glob…
ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。 そのときに利用するのが classList です。 const target = document.querySelector('.target') target.classList.add('foo') target.c…
サンプル このように、CSS だけで四つ角に枠線を付ける方法。 コード 以下のように書けばOK。 <div class="box">ここにテキスト</div> .box { position: relative; } .box:before { content: ""; background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40…
React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…
解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …
状況 以下のようなスタイルを指定しているとする。 .element { width: 300px; overflow-x: scroll; } .element の内側の要素がはみ出した場合、横スクロールで表示される。この時、モバイルデバイスやトラックパッドを使用している場合、意図せずページ移動…
CSS グリッドレイアウトに関するチートシートです。自分用なので結構雑です。 developer.mozilla.org 用語 Grid container Grid item Grid column Grid row Grid track Grid area Grid cell プロパティ コンテナ系 display grid-template-columns, grid-temp…
長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-s…
今日デザイナーさんから良いこと聞いちゃいました。 CSSだけで、文末に…が付与できちゃうんですって！ やり方はスタイルを３つ指定するだけ。 overflow: hidden; white-space: no-wrap; text-overflow: ellipsis; 以上です。 これで、文字列がはみ出てしまう…
chuckです。cssのopacityについて。 １年前はopacityにベンダープレフィックスをつけていました。それがいつの間にか不要になっていたっぽいのでメモ。 www.htmq.com Can I Use で調べる ブラウザ毎のCSSの実装状況を教えてくれるのが、can i useというサイ…
どうも！chuckです。 今日コーディングしていて気になりました。 #FFF と #FFFFFFは同じなのか？？と。 なので、軽く調べてみました。
どうも！chuckです。 みなさんSass、使ってますか？？使おうとしないとなかなか身につかないですよね(；・∀・) 僕の場合、Sassで使ってるのって「入れ子」機能ぐらいですかね。変数とか使いたいんですけど、まだまだ習慣化されていない感じがあります。 なの…
どうも！chuckです。CSS3で作るシリーズですヽ(=´▽`=)ﾉ こちらの続きになります。 CSS3でつくる立体8面体（福引のガラガラみたいなやつ） - コンパイラかく語りきchuckwebtips.hatenablog.com あっ、この前Androidを持ってる友人に↑のやつを見てもらったんで…
どうも！chuckです。 今回はフロントエンドに関して。前々から気になっていたCompassを使ってみたいと思いますヽ(=´▽`=)ﾉ Sass + Compass を使って、効率良く css をコーディングしよう！lab.sonicmoov.com
どうも！chuckです。 今回はCSSの擬似要素である、afterやbeforeに関して書いていきます。 :before擬似要素−スタイルシートリファレンスwww.htmq.com :after擬似要素−スタイルシートリファレンスwww.htmq.com
どうも！chuckです。前回fontPicker(フォントピッカー)というfont-family選択ツールを作りました。が、不具合がありましたので改修しました。 CSSのfont-familyを一覧からカンタンに選べるツールを作った - コンパイラかく語りきchuckwebtips.hatenablog.com…
どうも！chuckです。 みなさん、cssのfont-familyってこだわってますか？それともぜんぜん気にしてない？？ 僕自身、font-familyはいつもどれを使うか迷います。で、いつも「CSS font-family 一覧」なんて検索しちゃってます。 というわけで今回は、font-fam…
どうも！chuckです。 コーディングしていて気づいたことがあるのでメモ。DOM要素のposition : leftの取り方について。（あるいはtopも同様）
どうも！chuckです。 CSSのdisplay（ディスプレイ）プロパティってあるじゃないですか。ブロックレベル要素とかインライン要素とか、そういうやつです(´ω`) 今回、主要なHTMLタグについて、デフォルトでのdisplayの状態をまとめてみましたヽ(=´▽`=)ﾉ
どうも！chuckです。 タイトルの通り。CSS3の勉強がてら、回転するフォトギャラリーを作りましたのでお披露目ヽ(=´▽`=)ﾉ
どうも！chuckです。 今回はCSSだけで画像をグレーアウトさせる方法について書いていきます。
どうも！chuckです 昨日参加したTriton.jsにて、Velocity.jsというプラグインが紹介されていました。 なかなか面白そうだったのでさっそく試してみました！ <a href="http://chuckwebtips.hatenablog.com/entry/2015/06/12/180000" data-mce-href="http:/…
どうも！chuckです！ cssのtext-alignというプロパティがあるじゃないですか。その値にstartとendという値があったんですね！ひょっとして常識？？(；・∀・) 個人的には新鮮な発見だったのでメモ。 text-alignの値まとめ start 開始位置揃え end 終了位置揃…
どうも！chuckです。 昨日は家計簿アプリを作成し始めましたが、今日はカレンダーを作り始めました。 &amp;amp;lt;a href="http://chuckwebtips.hatenablog.com/entry/2015/05/30/180007" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015…
