Corredor

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

CSS

Mac・iOS のシステムフォントを CSS で使う : 「-apple-system」

BENGTENG CSS Tシャツ スモーク XSメディア: ウェア&シューズこの商品を含むブログを見る FONT x FAN HYBRID出版社/メーカー: ポータル・アンド・クリエイティブ発売日: 2010/09/17メディア: DVD-ROM購入: 4人 クリック: 195回この商品を含むブログ (5件) を…

font-family 設定を動的に変更して確認できるページを作った

デザイナーが愛用したいこだわりフォントセレクション作者: フロッグデザイン出版社/メーカー: 秀和システム発売日: 2017/03/11メディア: 単行本この商品を含むブログを見る 前回の記事でオレオレパーフェクト設定を導いた font-family 指定だが、検証用に以…

2018年以降はコレで決まり!Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定

定番フォント ガイドブック作者: タイポグラフィ編集部出版社/メーカー: グラフィック社発売日: 2017/08/08メディア: 単行本(ソフトカバー)この商品を含むブログを見る 時折話題にしてきた、CSS での font-family 指定のベスト・プラクティスだが、様々な…

はてなブログに「目次記法」があることにいまさら気付いた

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る WordPress で作られたブログには、よく「目次」のリンクがあり、コ…

Cordova アプリでもユーザを簡単に隠し撮りできる。そのやり方を公開

クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ【電子書籍】[ 永井勝則 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,240円 【中古】 HTML5/JavaScri…

CSS で font-family: monospace 指定だと等幅フォントが適用されない?

定番フォント ガイドブック作者: タイポグラフィ編集部出版社/メーカー: グラフィック社発売日: 2017/08/08メディア: 単行本(ソフトカバー)この商品を含むブログを見る 以下のような CSS を書いたところ、li 要素が等幅フォントにならなかった。 li { font…

iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像作者: こもりまさあき,栄前田勝太郎,坂上北斗,塚口祐司,前川昌幸,松田直樹出版社/メーカー: エムディエヌコーポレーション発売日: 2017/09/20メディア: 単行本(ソフトカバー)この商品を…

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

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

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

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

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

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メディア: 単行本この商品を含むブログを見る 昔は可変長な角丸ボックスを作るだけでも、どうやって四隅に画像を置こうか、とか、画像を分けちゃうとリ…