Corredor

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

CSS3

OS 設定に沿って Web サイトもダークモード化させる CSS

最近は PC でもスマホでも取り入れられている「ダークテーマ」。OS 設定でダークモードに切り替えると、ウィンドウのカラーテーマが暗くなったりする。 今回は、OS 設定でダークモードを選択した時に、Web サイトもダークモードに合わせてスタイル変更するた…

複数行のテキストを CSS だけで省略表示する -webkit-line-clamp を試してみた

Webkit 系 (Chrome や Safari) でのみしか使えない CSS プロパティだが、-webkit-line-clamp というプロパティを使うと、複数行に折り返されたテキストでも省略表示ができることが分かったので、使ってみた。 text-overflow: ellipsis は1行テキストにしか対…

ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解

拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ?@font-face で游ゴシック Medium を指定してるのにな?」と思い、設定を見直したと…

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

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

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要素から色を指定する方法らしい。色相だけ変えれば、…

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

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

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

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

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

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

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

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

左右均等配置にした 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 から、リンクの下線の一部が途切れているこ…

チェックボックスを利用した、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件) を見る メディアクエリで実現するレスポ…

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

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

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

追記:第2弾も作ったのでコチラもドウゾ。 neos21.hatenablog.com はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: 単行本この商品を含むブログ (2件) を見る はてなブログの 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、つまりオ…

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

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

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

CSS だけでフキダシを作る

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