コンパイラかく語りき

import { Fun } from 'programming'

CSS

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; 以上です。 これで、文字列がはみ出てしまう…

個人サイト作成⑤ 文字サイズとナビゲーション・メニューをスマホ対応

chuckです。 引き続き個人サイトを作成しています。 今回は、前回できなかったスマホ対応をしましたのでメモ。 できたやつ http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow6.html ※これはスマホ用画面なので、PCからアクセスすると…

Railsでロシア語単語帳ver2.0を目指す day.4 デザイン崩れ対応

chuckです。 今回はver1.0でのデザインの崩れを修正します。 どんな崩れ? こんな崩れ。 これは「接続詞」で絞り込んだ結果画面になります。 単語の数が少ないとこのようになります。まあCSSの問題なんですが。パッと見では原因がわかりませんね。 余計なhei…

個人サイト作成① スワイプ動作を実装…できなかった

chuckです。 自分のための個人サイトを作成しているので、作成過程を記録します。 ちなみに、現状↓ http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow.html まあ、クリックイベントならスライドできます。 ここにスワイプ動作も付け加…

【HTML・CSS】オシャレなベルトっぽい部品を作った

chuckです。 HTMLとCSSでオシャレなベルト風アイテムを作ってみたいと思います。 ひとまずの完成図はこちら。 こちらをベースにして試行錯誤していこうかなと思います。

【HTML・CSS】列の間にだけボーダーをつける

chuckです。タイトルはちょっと意味不明かもしれません。 画像で見たほうが早いですね。 要はこれを こうしたいというお話。 つまり、列の枠線としてではなく、列の区切りとしてボーダーをつけたいという使い方ですね。 HTML まずHTML的にはこうです。 gist3…

【CSS3】rotate(プラスの角度)とrotate(マイナスの角度)

chuckです。 いまフロントエンドのコーディングをしていて気づいたことがあったのでメモ。と言ってもすごく単純なことですがw css3でtransform : rotateを指定する時、角度も指定できるじゃないですか。こんな感じで。 今までは値の正負を気にしていなかっ…

【HTML】画像を動画っぽく表現してみる

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている(ように見える)んですよね。 面白いなーと思ったので、自分なりに再現してみます。

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

CSS

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

ロシア語単語帳のデザイン追加

どうも!chuckです。 夏に作成したこのロシア語単語帳「ロシアップ」ですが、作ったままずっと放置していました…笑 russiup.herokuapp.com なので、そろそろ機能追加していこうかなと。まずはRailsのリハビリがてら、デザイン追加をしていきます笑

ちょっと待って!#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

文系プログラマーがRailsでロシア語アプリケーションをつくる⑲ ~Bootstrapでデザイン追加~

どうも!chuckです。 ついに!ロシア語アプリケーションをHerokuにデプロイしました! <a href="http://chuckwebtips.hatenablog.com/entry/2015/08/01/104716" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015/08/01/104716">Herokuにデプロイしたいのに、gem pg install できずに苦労した話。 - コンパイラかく語りき</a>chuckwebtips.hatenablog.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とCSSで作るスライド画像

どうも!chuckです。 いま会社でスマホサイトの制作を行っています。その中で画像のスライドを作成しているので、ここでも手法を記録しておきます。 ちなみに、まだスワイプ操作に対応しておらず動きもショボイですヽ(´Д`;)ノアゥア… 挙動の洗練化はまた後日!…

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

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

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

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

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

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

CSS3でつくる立体8面体(福引のガラガラみたいなやつ)

CSS

どうも!chuckです。 こんなの作りました。ので、公開します。 わかりにくいですが、8面体です。面が8枚あります(´゚д゚`)

CSS3とjQueryでボックスをぐるぐる回す解説。

どうも!chuckです。 前回、こちらの作品を紹介しました。 http://chuck0523.github.io/graduationPage/rotateAnime.html <a href="http://chuckwebtips.hatenablog.com/entry/2015/06/28/000000" data-mce-href="http://chuckwebtips.hatenablog.com/entry/2015/06/28/000000">jQueryとCSSでぐるぐる回るボックス - コンパイラかく語りき</a>chuckwebtips.hatenablog.com …

jQueryとCSSでぐるぐる回るボックス

CSS

作った、というか作ってました。今年の3月に大学を卒業したのですが、その記念に作りました。 せっかくなのでgithubにあげてブログでも公開しますヽ(=´▽`=)ノ http://chuck0523.github.io/graduationPage/rotateAnime.html 時間経過でぐるりと回ります。1周…

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…