Corredor

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

CodePen

サイドバーのスクロール制御のアイデア

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集作者: 久保田涼子出版社/メーカー: SBクリエイティブ発売日: 2017/06/16メディア: 単行本この商品を含むブログを見る とあるサイト (リンクするとアレなのでボカします) のサイドバーのスクロ…

マウス座標からカラーコードを取得する

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく作者: 磯博出版社/メーカー: SBクリエイティブ発売日: 2017/03/18メディア: Kindle版この商品を含むブログを見る 大昔に作ったものを今更載せてみたり。 …

ハンバーガーメニューが矢印に変わる 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 のイベント伝播にま…

ブラウザのステータスバーに遷移先 URL を表示しないようにできるか

社内で「ブラウザのステータスバーに遷移先 URL を表示しないようにしたい」というバカげた要件が出てきていて解決方法を探っているチームがいて、数日迷っていたので以下の StackOverflow を見せてみた。 参考:javascript - HTML - overRide statusbar lin…

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

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

CSS だけでフキダシを作る

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

IE11 で大量のテキストボックスを一括で非活性にする処理が重すぎる

IE11 は他のブラウザと比べても element.disabled = true; とかする処理が重たい。 ワケあって、テーブルの中に1行20個、150行程度のテキストボックスがあって、これらを一括で非活性にしたり、戻したりしなくてはいけなくなった。何も考えず document.getEl…

複雑な条件が絡むデータの持ち方

作りたいもの 区分を選択するプルダウンが2つあって、親区分のプルダウンを選択すると子区分のプルダウン中身が切り替わって、合計15パターンぐらいの区分がある感じ。 一方、画面に5個ぐらい項目があるんだけど、プルダウンで選択した区分に従って、「この…

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

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

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…

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

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

テキストエリアのリサイズ機能を CSS で制御する

Firefox はテキストエリアの右下をドラッグすると、テキストエリアの幅や高さをリサイズできる。 ブラウザのデフォルト機能で、ユーザやウェブサイト作成者が制御できるものではないと思っていたが、CSS で resize というプロパティを使うと制御できる様子。…

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

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

IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件

まずは以下の CodePen でサンプルを。「IE Default (simulate)」が、IE での見え方を CSS で再現したもの。 See the Pen IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件 by Neos21 (@Neos21) on CodePen. 原…

ブログに貼り付けた CodePen の表示領域の高さを変える

前回の記事で、少し縦長な CodePen の Embed を貼り付けた。その方法。 neos21.hatenablog.com ブログに貼り付けたコードは以下のとおり。これは CodePen の「Embed」からコピペできる「HTML (recommended)」タブに出るコード。 <p data-height="450" data-theme-id="0" data-slug-hash="zrQWQo" data-default-tab="result" data-user="Neos21" class='codepen'>See the Pen </p>

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

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

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

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

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

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