コンパイラかく語りき

import { Fun } from 'programming'

CSS

【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というプラグインが紹介されていました。 なかなか面白そうだったのでさっそく試してみました! <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です。 昨日は家計簿アプリを作成し始めましたが、今日はカレンダーを作り始めました。 <a href="http://chuckwebtips.hatenablog.com/entry/2015/05/30/180007" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015…