コンパイラかく語りき

import { Fun } from 'programming'

CSS

Sass の変数を CSS Custom Properties として利用

CSS

CSS Custom Propeties(いわゆるCSS変数)は便利です。 この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。 /* variables.scss(変数定義ファイル) */ $some-color: #64ff00; /* glob…

【JavaScript】classList は Array 化することで順序削除、一致削除などができる

ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。 そのときに利用するのが classList です。 const target = document.querySelector('.target') target.classList.add('foo') target.c…

【CSS】四つ角にだけ枠線をつける

サンプル このように、CSS だけで四つ角に枠線を付ける方法。 コード 以下のように書けばOK。 <div class="box">ここにテキスト</div> .box { position: relative; } .box:before { content: ""; background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40…

【Recharts】スタイル指定に CSS Custom Properties を利用する方法

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…

【CSS】display: flex 指定の子要素の高さが伸びてしまう問題への解決策

解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …

【CSS】横スクロールし切った時に勢い余ってページバックするのを防ぐ

状況 以下のようなスタイルを指定しているとする。 .element { width: 300px; overflow-x: scroll; } .element の内側の要素がはみ出した場合、横スクロールで表示される。この時、モバイルデバイスやトラックパッドを使用している場合、意図せずページ移動…

自分用 CSS Grid チートシート

CSS

CSS グリッドレイアウトに関するチートシートです。自分用なので結構雑です。 developer.mozilla.org 用語 Grid container Grid item Grid column Grid row Grid track Grid area Grid cell プロパティ コンテナ系 display grid-template-columns, grid-temp…

table-layout: fixed; せずに text-overflow: ellipsis; する

長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-s…

CSSだけで文末に「…(三点リーダー)」をつける方法

CSS

今日デザイナーさんから良いこと聞いちゃいました。 CSSだけで、文末に…が付与できちゃうんですって! やり方はスタイルを3つ指定するだけ。 overflow: hidden; white-space: no-wrap; text-overflow: ellipsis; 以上です。 これで、文字列がはみ出てしまう…

【CSS3】opacityがいつの間にかベンプレ不要になっていた

CSS

chuckです。cssのopacityについて。 1年前はopacityにベンダープレフィックスをつけていました。それがいつの間にか不要になっていたっぽいのでメモ。 www.htmq.com Can I Use で調べる ブラウザ毎のCSSの実装状況を教えてくれるのが、can i useというサイ…

#FFF と #FFFFFF って同じ色??

CSS

どうも!chuckです。 今日コーディングしていて気になりました。 #FFF と #FFFFFFは同じなのか??と。 なので、軽く調べてみました。

Sassのmixinでベンダープレフィックスをカンタンにつける

どうも!chuckです。 みなさんSass、使ってますか??使おうとしないとなかなか身につかないですよね(;・∀・) 僕の場合、Sassで使ってるのって「入れ子」機能ぐらいですかね。変数とか使いたいんですけど、まだまだ習慣化されていない感じがあります。 なの…

CSS3とjQueryでつくるルーレット(っぽいやつ)

どうも!chuckです。CSS3で作るシリーズですヽ(=´▽`=)ノ こちらの続きになります。 CSS3でつくる立体8面体(福引のガラガラみたいなやつ) - コンパイラかく語りきchuckwebtips.hatenablog.com あっ、この前Androidを持ってる友人に↑のやつを見てもらったんで…

CSSの常識が変わると噂のCompassを導入!

どうも!chuckです。 今回はフロントエンドに関して。前々から気になっていたCompassを使ってみたいと思いますヽ(=´▽`=)ノ Sass + Compass を使って、効率良く css をコーディングしよう!lab.sonicmoov.com

CSSの擬似要素である::beforeと::afterを使えば、表現の幅が広がるよ!

CSS

どうも!chuckです。 今回はCSSの擬似要素である、afterやbeforeに関して書いていきます。 :before擬似要素−スタイルシートリファレンスwww.htmq.com :after擬似要素−スタイルシートリファレンスwww.htmq.com

CSSのfont-familyを一覧から選べる!FontPickerを作った(改修編)

どうも!chuckです。前回fontPicker(フォントピッカー)というfont-family選択ツールを作りました。が、不具合がありましたので改修しました。 CSSのfont-familyを一覧からカンタンに選べるツールを作った - コンパイラかく語りきchuckwebtips.hatenablog.com…

CSSのfont-familyを一覧からカンタンに選べるツールを作った

どうも!chuckです。 みなさん、cssのfont-familyってこだわってますか?それともぜんぜん気にしてない?? 僕自身、font-familyはいつもどれを使うか迷います。で、いつも「CSS font-family 一覧」なんて検索しちゃってます。 というわけで今回は、font-fam…

jQueryでposition leftの値を取得する時は、.css( )よりも.position( )を使う方がいい理由

どうも!chuckです。 コーディングしていて気づいたことがあるのでメモ。DOM要素のposition : leftの取り方について。(あるいはtopも同様)

主要なHTMLタグのdisplayプロパティを調べてみた

どうも!chuckです。 CSSのdisplay(ディスプレイ)プロパティってあるじゃないですか。ブロックレベル要素とかインライン要素とか、そういうやつです(´ω`) 今回、主要なHTMLタグについて、デフォルトでのdisplayの状態をまとめてみましたヽ(=´▽`=)ノ

CSS3とjQueryで回転するフォトギャラリーを作った

どうも!chuckです。 タイトルの通り。CSS3の勉強がてら、回転するフォトギャラリーを作りましたのでお披露目ヽ(=´▽`=)ノ

CSSだけで画像をグレーアウトさせる方法

CSS

どうも!chuckです。 今回はCSSだけで画像をグレーアウトさせる方法について書いていきます。

jQuery風にCSSアニメーションが実装できる「Velocity.js」を使ってみた

どうも!chuckです 昨日参加したTriton.jsにて、Velocity.jsというプラグインが紹介されていました。 なかなか面白そうだったのでさっそく試してみました! &lt;a href="http://chuckwebtips.hatenablog.com/entry/2015/06/12/180000" data-mce-href="http:/…

text-alignにstartとendがあるって知ってました?

CSS

どうも!chuckです! cssのtext-alignというプロパティがあるじゃないですか。その値にstartとendという値があったんですね!ひょっとして常識??(;・∀・) 個人的には新鮮な発見だったのでメモ。 text-alignの値まとめ start 開始位置揃え end 終了位置揃…

シンプルなカレンダー(表側だけ)を作りました

どうも!chuckです。 昨日は家計簿アプリを作成し始めましたが、今日はカレンダーを作り始めました。 &amp;amp;amp;lt;a href="http://chuckwebtips.hatenablog.com/entry/2015/05/30/180007" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015…