読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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