Corredor

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

CSS

Stylish 拡張機能で Tumblr のダッシュボードを tmbrtext 化する

普段、Tumblr でテキストを読みたくて tmbrtext という iOS アプリを使っているのだが、最近何やら Text ポストの中に img 要素が埋め込まれていて、画像を含んだポストに遭遇することがある。 面白画像なんかであればまだ良いのだが、NFSW な画像が開くのは…

ギターのスケール図を生成する Angular アプリを作った

趣味の融合。 最近めっきり弾かなくなったものの、ギターを趣味としているので、Angular アプリでギターのスケール表の一つや二つ作れないといかんぞ (?) ってなって、作った。その名も Guitar Scale Generator。 https://neos21.github.io/angular-utiliti…

「Web フォント」を使って OS 依存しない日本語対応の等幅フォント Noto Sans Mono CJK JP を適用する

最近の Windows と Mac は、「游ゴシック体」という同一のサンセリフ・フォントを標準搭載するようになった。メイリオとヒラギノ、MS P ゴシックと Osaka のように、OS ごとに標準フォントが異なり、ウェブサイトの見栄えが OS によって異なってしまう問題を…

Twitter の埋め込みツイートを中央寄せする方法

Twitter の個別ツイート画面右上のメニューより、「このツイートをサイトに埋め込む」を選ぶと、次のような HTML コードが取得できる。 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> …… (以下略) コレを Web ページに貼り付けると、埋め込みツイートが表示できるワケだが、このブロックが左寄せで表示さ</p></blockquote>…

iPhone XS のノッチが気になったので CSS で再現してみた

【Spigen】 スマホケース iPhone X ケース 背面クリア 耐衝撃 米軍MIL規格取得 ウルトラ・ハイブリッド 057CS22129 (マット・ブラック)出版社/メーカー: Spigen Japanメディア: Wireless Phone Accessoryこの商品を含むブログを見る iPhone XS・XS Max・XR …

CSS3 の hsl() で色を指定してみる

CSS3 から、カラーコードや rgb() による色指定の他に、hsl() という関数で色指定ができるようになった。コレは「HSL 円柱座標方式」というモノで、Hue (色相)、彩度 (Saturation)、輝度 (Lightness) の3要素から色を指定する方法らしい。色相だけ変えれば、…

iOS Safari で、タップ時に :hover や :active を有効にする方法 詳細調査

前回の記事で、「スマホで :hover 時のアニメーションを有効にする」方法について触れた。 neos21.hatenablog.com タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、<body ontouchstart=""> と書けば実現できるようだ。 参考:タッチデバイスでCSSの:ac</body>…

ポートフォリオサイトっぽいモノを GitHub Pages に作ってみた

フリーランスとして活動する気もないし、会社にも自分のアカウントは表立って知らせていないので、何のために作ったのかは分からないが、プログラマとしてのアテクシを自己紹介する的なページを作ってみた。 Neo : Front-End Web Engineer GitHub Pages とし…

js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。 Angular Utilities - JavaScript Beautifier … JSON 整形にも対応 …

ruby 要素によるルビとスタイリング

いちばんよくわかるHTML5&CSS3デザインきちんと入門 [ 狩野 祐東 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 2,678円 ふと思い立って、ruby 要素を使った時のルビを CSS でスタイリングできないか調べてみたが…

CSS だけでテキストを虹色のグラデーションでアニメーションさせる

Webポートフォリオ・デザインブック SNS時代のクリエイティブの見せ方・伝え方作者: 小島幸代,草野恵子,北川貴清,久保靖資出版社/メーカー: エムディエヌコーポレーション発売日: 2018/02/27メディア: 単行本(ソフトカバー)この商品を含むブログを見る あ…

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

はてなブログの Amazon 商品リンク枠と、楽天商品リンク枠に、それぞれのサービスのロゴを表示させるカスタマイズ、第2弾。 経緯 発展版を作成した 動作サンプル CSS コードを公開 実装詳細 Amazon アイコンの作り方 IE11 は background-clip: text が効かな…

Google AdSense 自動広告の「アンカー広告」がページを押し下げないようにする

Google AdSense 成功の法則 57作者: 染谷昌利出版社/メーカー: ソーテック社発売日: 2014/07/19メディア: 単行本この商品を含むブログ (4件) を見る Google AdSense に導入された「自動広告」のうち、「アンカー広告」という広告ユニットが、ページ全体を押…

左右均等配置にした Flexbox の最終行を左寄せにする

Flexbox in CSS作者: Estelle Weyl出版社/メーカー: O'Reilly Media発売日: 2017/05/25メディア: Kindle版この商品を含むブログを見る HTML5&CSS3 Flexboxの仕組みが分かるチートシート作者: DreamApps発売日: 2017/05/23メディア: Kindle版この商品を含むブ…

2018年版 Edge のみ適用する CSS ハック (@supports) の書き方

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化作者: Ilya Grigorik,和田祐一郎,株式会社プログラミングシステム社出版社/メーカー: オライリージャパン発売日: 2014/05/16メディア: 大型本この商…

IE11 のみ CSS を適用させる CSS ハック

CSSシークレット ―47のテクニックでCSSを自在に操る作者: Lea Verou,牧野聡出版社/メーカー: オライリージャパン発売日: 2016/07/23メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る CSS Grid を調整するため、IE11 のみ適用したい CSS …

IE11 で CSS Grid を使うのが大変だった

Web担当者よ、古いIEを捨ててモダンブラウザに今すぐ対応せよ【電子書籍】[ 物江修 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 380円 display: grid で実現できる CSS…

オレオレノーマライズ CSS「Neo's Normalize」を作った

Normalize.css や、Bootstrap 4 から採用されている Reboot などの思想を基に、オレオレノーマライズ CSS を作った。その名も「Neo's Normalize」。 GitHub - Neos21/neos-normalize: Neo's Normalize いちばんよくわかるHTML5&CSS3デザインきちんと入門 (De…

ブログのデザインを変更:はてなブログのカスタマイズに関する知見まとめ

昨日紹介したメインサイト Neo's World のリニューアル記に続いて、本ブログ Corredor のデザインを変更した話。 見た目的には、リキッドレイアウトになったことと、コンテンツ部分のフォントサイズがウィンドウ幅に応じて拡大・縮小される点ぐらいか。 今回…

メインサイト Neo's World のデザインを変更した

メインサイトといいつつ、開設開始からの日数が一番長いだけという Neo's World だが、2018年2月4日にデザインを変更した。今回はその詳細を書き留めておく。 伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール作者: 高橋佑磨,片山な…

Chrome 64 からリンクの下線が途切れる:text-decoration-skip-ink プロパティについて

CSSシークレット ―47のテクニックでCSSを自在に操る作者: Lea Verou,牧野聡出版社/メーカー: オライリージャパン発売日: 2016/07/23メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る Chrome 64 から、リンクの下線の一部が途切れているこ…

Google AdSense 自動広告の画面上部から出てくる広告がページ全体を押し下げる件

Google AdSense が、ページを解析して自動的に最適な広告を表示する「自動広告」を始めた。 元Google AdSense担当が教える 本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60作者: 石田健介,河井大志出版社/メーカー: ソーテック社発売日: 2018…

overflow でスクロールバーを表示させると padding-right・padding-bottom が効かなくなる事象と対策

CSS

現場でかならず使われているCSSデザインのメソッド [ 北川貴清 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 3,024円 現場でかならず使われている CSSデザインのメソッド【電子書籍】[ 北川 貴清 ]ジャンル: 本・…

レスポンシブルにフォントサイズを変更するための SASS Mixin を作った

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ作者: 平澤隆,森田壮出版社/メーカー: インプレス発売日: 2017/09/15メディア: 単行本(ソフトカバー)この商品を含むブログを見る 以前紹介した、レスポンシブルにフォン…

Web ページ中の画像が読み込めなかった時に処理させる

HTML&CSSとWebデザインが 1冊できちんと身につく本作者: 服部雄樹出版社/メーカー: 技術評論社発売日: 2017/07/21メディア: 大型本この商品を含むブログを見る Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集作者: 久保田涼子出版社/メーカ…

チェックボックスを利用した、CSS だけでできる言語切替ページの作り方

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ作者: 谷拓樹出版社/メーカー: インプレス発売日: 2014/07/24メディア: Kindle版この商品を含むブログ (1件) を見る チェックボ…

スクロールバーの幅を取得する JavaScript

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)作者: 磯博出版社/メーカー: SBクリエイティブ発売日: 2017/03/18メディア: 単行本この商品を含むブログを見る Web ページに表示され…

レスポンシブルにフォントサイズを変更し、最小サイズ・最大サイズを指定する方法

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)作者: 菊池崇出版社/メーカー: アスキー・メディアワークス発売日: 2013/07/30メディア: 大型本この商品を含むブログ (3件) を見る メディアクエリで実現するレスポ…

CSS の font-family に書くフォント名の調べ方

デザインの現場で役立つ フリーフォントセレクション1000作者: GOLDEN AXE出版社/メーカー: standards発売日: 2017/03/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る CSS の font-family にどんなフォント名を書いたらいいのか調べる方法。…

HTML ファイル内に CSS や JS をインライン挿入する「html-inline」

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト出版社/メーカー: ボーンデジタル発売日: 2017/11/04メディア: 単行本(ソフトカバー)この…