Corredor

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

CSS

自サイトの開発環境を作った

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/04/15メディア: 大型本この商品を…

はてなブログの 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、つまりオ…

window.getComputedStyle を今更知った

window.getComputedStyle() なる API があるのをいまさら知った。 普段 JS で DOM 要素のスタイルを操作する時は element.style を使うが、window.getComputedStyle() は対象の要素の表示仕様を決めている、計算済みの全てのスタイル定義を取得できる。 「計…

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

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

Cordova アプリでサクサク動く Google Map を実現する「cordova-plugin-googlemaps」

Google API Expertが解説する Google Maps APIプログラミングガイド作者: 勝又雅史,古籏一浩,石丸健太郎,安藤幸央出版社/メーカー: インプレス発売日: 2011/12/02メディア: 単行本(ソフトカバー)購入: 2人 クリック: 69回この商品を含むブログ (8件) を見…

CDN から CSS ファイルが読み込めなかった時のフォールバック対策方法

フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド【電子書籍】[ 株式会社モノサス/コーディングファクトリー ]ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子…

AdBlock が有効であることを判定する方法

Adblock Plus出版社/メーカー: Adblock Plus発売日: 2014/07/12メディア: アプリこの商品を含むブログを見る 最近、いくつかのサイトで「AdBlock を無効にしてください」というようなワーニングが出ることがあって、どうやって判定しているんだろうな~と思…

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

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

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

input[type="file"] のデザインを簡単に変える方法

ファイルを選択する input[type="file"] は、大抵テキストボックスとボタンで構成されているが、それらを個別にデザイン変更したりすることができない。 そこで、このファイル要素を label 要素で囲み、その中で別にボタンを作ってやることで、簡単にデザイ…

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

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

IE10 以降で表示されるようになったテキストボックスの×ボタンとパスワードの目ボタンを非表示にする CSS

IE10 以降、テキストボックスに×ボタンが表示されるようになった。これを押すと入力済の文章を全消しできる。どうもテキストボックスの幅が 90px 程度ないときは表示されないようだ。 同様に、パスワード入力欄にも目のマークが表示されるようになり、これを…

Npm-Run-All で複数の npm-scripts を実行・OS 環境に関わらず rm -rf する

前回の記事で、npm-scripts を使った CSS の圧縮処理を紹介した。 neos21.hatenablog.com 今回は、この npm-scripts をさらに便利なものにするパッケージを2つ紹介する。 複数のタスクを一括実行したい そもそもぼくが今回 npm-scripts で CSS を圧縮したい…

CSS を Minify (圧縮) する npm パッケージの Clean-CSS をコマンドラインで利用する「Clean-CSS-CLI」

CSS を圧縮する npm パッケージには色々あり、Gulp プラグインも色々ある。 いくつか比較して、今回は clean-css というパッケージを使おうと思ったが、どうやら最近コマンドラインツール部分と API 部分が分離されたらしく、まともな日本語文献がなかったの…

はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

前回の記事で、はてなブログ公式プラグインではなく、独自のシェアリンク・フォローボタンを作って差し替えたら、ページの表示速度が高速化したという話をした。 neos21.hatenablog.com この独自リンクの作り方を紹介する。 シェアリンク このブログに置いて…

Windows と Mac に標準でインストールされている日本語の等幅フォントってない…?

游ゴシックが Windows と Mac に標準搭載されるようになり、標準フォントのみで Windows と Mac とで同じ見た目を実現できるようになった。 これの等幅フォント版ってないのだろうか?で、できれば日本語も等幅表示されるヤツ。 というのは、はてなブログで…

ブログのテーマを大幅にカスタマイズしてみた

このブログのテーマを大幅にカスタマイズしてみた。 といっても、基本的なカラーリングやレイアウトはそのままなので、「若干フォント指定が変わったかな?」くらいにしか思われないと思う。 はてブロは色々と動作が重たいので、高速化を目的に CSS を軽量化…

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

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

CSS だけでフキダシを作る

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

複数の CSS や JS ファイルを HTML に読み込ませる時、head 要素内をスッキリさせる方法

複数の CSS ファイルや JS ファイルを読み込む必要がある時に、head 要素内がどうしても肥大化してしまう。 <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/print.css"> <script src="js/const.js"></link></link></link></link>

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store でプログラミング言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出し…

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. 原…

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

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