Corredor

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

CSS

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

前回の記事で、「スマホで :hover 時のアニメーションを有効にする」方法について触れた。 タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、<body ontouchstart=""> と書けば実現できるようだ。 参考:タッチデバイスでCSSの:activeや:hoverを機能させ</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メディア: 単行本(ソフトカバー)この…

ラインマーカーを引いたような蛍光ペン風の効果を付ける CSS

世界一わかりやすいWordPress 導入とサイト制作の教科書 (世界一わかりやすい教科書)作者: 安藤篤史,岡本秀高,古賀海人,深沢幸治郎出版社/メーカー: 技術評論社発売日: 2017/06/17メディア: 大型本この商品を含むブログを見る いちばんやさしいWordPressの教…

CSS text-shadow でネオン発光風のテキストを実装する

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

CSS だけで実装する宇宙空間

はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 (KS情報科学専門書)作者: 松下孝太郎,山本光,沼晃介,樋口大輔,鈴木一史,市川博出版社/メーカー: 講談社発売日: 2017/10/31メディア: 単行本(ソフトカバー)この商品を含むブログを見る KeithClark と…

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メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る 時折話題にしてきた、CSS での font-family 指定のベスト・プラクティスだが、…