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

CSS3 CSS

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

2016-03-04

要素の横並び＋複数行ならflex-wrapが便利

CSS3

CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なしまず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値は…

2015-12-25

【CSS】text-overflowとはなんなのか

CSS3

2015年もいよいよ佳境。そしてこのタイミングで出会った”text-overflow”というCSS。ちょっと深掘りしてみたいと思います。 Try it いじくり回して理解したい人は、こちらがオススメ。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_js_text-…

2015-10-31

ロシアップ ver2.3 「ドロップダウンメニュー」

ロシアップ Rails jQuery CSS3

ドロップダウンメニューを実装しました。前々から存在してはいたのですが、Bootstrapでの実装だったんですよね。それを自作しました。「自分で作れるものは自分で作る」です。あと、Bootstrapに頼ると余分なHTMLが入ってしまうので…。これがBootstarpによ…

2015-10-20

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

制作 CSS3 CSS

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

2015-10-19

個人サイト作成④ チャット風ボックスの実装と、テキストコンテンツの挿入

制作 CSS3 Slim

chuckです。引き続き、個人サイトを作成していきます。前回までで、基本的な動作は実装できました。今後微調整はあるかと思いますが、とりあえずスクリプトはいったん休止です。 chuckwebtips.hatenablog.com 今日はHTML側をいじって、肝心のコンテンツを…

2015-10-07

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

HTML Slim CSS CSS3 Sass 制作 CoffeeScript

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