Corredor

ウェブ、プログラミングの勉強メモ。

CSS3

scroll-behavior: smooth と Scrollbar Anywhere の相性が悪い

わかるFirefox―人気ブラウザの「基本操作」から「アドオン」まで (I・O BOOKS)作者: I O編集部出版社/メーカー: 工学社発売日: 2011/05/01メディア: 単行本 クリック: 87回この商品を含むブログ (9件) を見る scroll-behavior: smooth というプロパティがで…

はてなブログの Amazon と楽天の商品リンクにアイコンを付けた

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: 単行本この商品を含むブログ (1件) を見る はてなブログの Amazon と楽天の商品リンクは、一見するとどちらが Amazon なのか楽天なのか、見分けが付…

スマホ向け Web アプリを作る時に使える CSS : user-select と -webkit-touch-callout

スマートフォンサイトのためのHTML5+CSS3 [リフロー版]作者: エ・ビスコム・テック・ラボ出版社/メーカー: マイナビ出版発売日: 2012/08/31メディア: Kindle版この商品を含むブログを見る 以前、overflow-scrolling という CSS プロパティを紹介した。スマ…

Cordova iOS アプリで -webkit-overflow-scrolling:touch を使った時の備忘録

PhoneGap 入門ガイド (Smart Mobile Developer)作者: アシアル株式会社出版社/メーカー: 翔泳社発売日: 2011/07/23メディア: 大型本 クリック: 15回この商品を含むブログ (5件) を見る Cordova アプリはデフォルトで DisallowOverscroll が false、つまりオ…

ハンバーガーメニューが矢印に変わる CSS アニメーションを真似してみた

作りながら学ぶ HTML/CSSデザインの教科書作者: 高橋朋代,森智佳子出版社/メーカー: SBクリエイティブ発売日: 2013/12/14メディア: 単行本この商品を含むブログ (11件) を見る 仕事で Backlog を使っている。Backlog のページには、左側のメニューを収納した…

transform:rotate() を使うと CSS だけでテキストにアンチエイリアスがかけられる

MS P ゴシックなどの ClearType でないフォントが使われてしまう場合に、CSS だけでテキストのジャギーを抑えてアンチエイリアスをかける方法があった。 CSS で、transform:rotate(0.001deg); を指定することでハードウェア・アクセラレーションを有効にし、…

img 要素に pointer-events:none; を指定すると、その画像を囲むリンクが効かなくなる件の回避方法

経緯 画像をむやみに右クリックで保存されないようにするため、img 要素に pointer-events:none; を指定した。 この CSS プロパティは、クリックや右クリックによるイベントを発火させなくするプロパティで、CSS の指定なのに JavaScript のイベント伝播にま…

CSS3 の gradient とか flex とかを使って凝ったデザインを作ってみた

アーケードゲーム用エミュレータとして知られる「MAME」のサイトのヘッダ部分の画像がカッコよかったので、CSS だけでどこまで再現できるか試してみた。 MAMEDEV.org | Home of The MAME Project 結果は以下。 CodePen で公開しているので、CodePen 上で広げ…

CSS だけでフキダシを作る

スラスラわかるCSSデザインのきほん作者: 狩野祐東出版社/メーカー: SBクリエイティブ発売日: 2014/09/26メディア: 単行本この商品を含むブログを見る 昔は可変長な角丸ボックスを作るだけでも、どうやって四隅に画像を置こうか、とか、画像を分けちゃうとリ…

textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。 neos21.hatenablog.com placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか…

懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。 第1弾は marquee 要素。 marquee 要素って? テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入したで、IE4 あたりから使えていたので、90年代のインターネットを彩る…

CSS3 のグラデーション背景をホバー時にアニメーションさせる簡単な方法

CSS の linear-gradient は transition で変化させることができないようで、困った挙句こんなやり方を発見。 グラデーションのかかった背景をCSSでふわっと変える方法 | web codery 以下、ロゴタイトル風に実装してみた。これは Neo's GitHub Pages のタイト…

幅・高さが不明な要素を上下左右中央配置する

昨日の記事の発展版。 neos21.hatenablog.com といっても特殊なことは全然なくて、やはり引き続き transform:translate を使う。 See the Pen 幅・高さが不明な要素を上下左右中央配置する by Neos21 (@Neos21) on CodePen. top:50% の他に left:50% も入れ…

高さが不明な要素を上下中央配置する

CSS で高さが分からない要素を上下中央揃えする方法。 今回は .wrapper というボックスが height:100% で1ページ分の画面の高さいっぱいに広がっていて、その中に .box というボックスがあるレイアウトで考える。よくポートフォリオ系のシングルページのサイ…

リンクホバーやメディアクエリでの簡単アニメーション

リンクホバー時に文字色をゆったり変化させたり、メディアクエリで画面幅に応じてレイアウトを変更させたりする時に、簡単にアニメーションする方法。 CSS で transition プロパティを使って変化するスピードを指定し、あとは :hover や Media Queries を指…

IE11 でページ読み込み時に Media Queries と transition を併用した要素がアニメーションしてしまう

メディアクエリを使って、幅○○px以下はメニューの形を変える、みたいなスタイルを書いておいて、その要素に transition を振っておくと、ウィンドウをリサイズした時にアニメーションしながら要素のスタイルを変更させることができる。 分かりやすくするとこ…

リンクホバー時に下線を引かせる CSS アニメーション

リンク文字列にマウスをホバーさせると、下線が左から右にニョキ~っとアニメーションで出てくる CSS アニメーションのサンプル。使っているのは CSS のみ。 See the Pen adRXEV by Neos21 (@Neos21) on CodePen. ソースは上記 CodePen よりご覧ください。 t…