かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Design

favicon をダークモード対応したい

webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイ…

Sass mixin の中で呼び出される @content に引数を渡したい

Tailwind の md:flex みたいなレスポンシブのクラスみないな prefix のあるクラスと楽に作れる mixin を作りたかった 環境 sass: 1.42.1 (Dart Sass) レスポンシブ用の prefix を付けたクラスを生成する _breakpoints.scss $breakpoints: ( xzs: 0, xs: 23.3…

Sass カラーバリエーションをまるっと作りたい

新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。 カラーバリエーションを生成する // デフォルトの…

CSS :nth-child(n) の順番についてのメモ

CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ 相談を受けたHTML と CSS HTML <body> <header></header> <section>section 1</section> <section>section 2</section> <section>section 3</section> </body> CSS section:nth-child(2)…

CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる

text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう!

Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ

ことの発端 macOS CatalinaのChrome 77のフォント問題。勘違いしている人が多いので説明。Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる↓該当するフォントがなくなったため、Sans Serifが明朝体で表示される↓フォント指…

JavaScript タイプライターみたいなエフェクト作ってみた。

単純に文字列を1文字づつ追加していくだけのものですが See the Pen Text Typewriter with Javascript Promise by KIKIKI (@chaika-design) on CodePen. ※ 表示エフェクトはForkしたものですが、表示ロジックは丸っと作り直ました PromiseはsetTimeoutを繰り…

CSS アニメーションのメモ

transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈… transition transition: <property> <duration> <timing-function> <delay> transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指</delay></timing-function></duration></property>…

Microsoft Edge リスト要素の記号が消えないバグ(list-style: none が効かない)にハマる。

Microsoft Edge でCSSでlist-style: noneが指定されているにも関わらず、・や 1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。 調べているとIEでもこの問題はあったようで 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / l…

WACOM Mac ペンタブレットIntuosのペンが反応しなくなった

WacomのFAQのサイトのURLが変わってしまっていて、新しいURLにリダイレクトされない為、記事中にあるhttp://tablet-faq.wacom.co.jp/faq/のリンクは無意味になっています m(_ _)m 2019 6.5 追記 このAI?が描いた絵を認識して当ててくれるゲームのようなサー…

印刷用CSSのメモ

WEBページを印刷する需要ってもうそんなに無い気もするのだけれど、必要になったのでメモ。 印刷用のCSS 1. 印刷用のCSSをmedia="print"指定した別ファイルで読み込ませる <link rel="stylesheet" type="text/css" href="main.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> 印刷用のスタイルは print.css だけで完結する 2. メディアクエリ @media print で</link></link>…

IE11バグ display table, table-cell 内で max-width が効かない

IE11… またお前か! max-widthのバグが多いですねw display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。 <div class="table"> <div class="table-cell"> <img class="max-width-100per"> </div> </div> table-layout: fixed を使うと max-width が効く display: table …

IEバグ inline-block 内の要素に max-width が効かないにハマる

コーディングをしていて IE で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった... 発生…

CSSで三日月を描く

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描…

イラレで表を作りたい

イラレ(Adobe Illustrator)でデータを作る時に表やテーブルを作成したい時は段組設定が超絶的に便利です。 作成したい表の大きさの四角形を作成 メニューバーから オブジェクト > パス > 段組設定 を選択 設定メニューから作成する表の行数と列数を選択 セル…

CSSで文字にボーダー(縁取り)をつけたい。

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート…

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…

Adobe illustrator パターンをオブジェクトにしたい

パターンで付けた柄をオブジェクト化(アウトライン化?)する方法。 オブジェクトを選択して、メニュバーからオブジェクト > 分割・拡張...を選択すればOK ダイアログが出るのでそのままOKを押せばパターンがオブジェクトに変換されます イラレで印刷に出すの…

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…

Adobe illustrator ガイドをパスにしたい

パッケージのデザインなどをしている時に印刷所からテンプレートをダウンロードすると、たいてい印刷範囲のガイドが引かれています。ぴったり合わせた様なデザインを作成したい時、ガイドが直線的なものならまだ良いのですが曲線だったり複雑なものとかだっ…

本の感想とか: 21世紀のビジネスにデザイン思考が必要な理由

21世紀のビジネスにデザイン思考が必要な理由作者:佐宗 邦威発売日: 2015/08/04メディア: 単行本(ソフトカバー) を読みました。そういえば僕は元々デザイナーだったのでしたw 良い機会なので意識高い系っぽくデザインについて思ってることも踏まえて感想を…

Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?

px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ!と言うことでrem指定にチャレンジしてみた所、…

CSS フォームとかで使えるステップバー作ってみた。

フォームのイマココ!とか表示できるシンプルなステップバーをCSSだけで作ってみた。 当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STE</li></ol>…

Mac illustratorが保存時に100%クラッシュしてしまうので困っていた

Macで印刷データを作成する時にillustratorを使うことが多いのですが、 最近保存時に100%アプリが止まってクラッシュしてしまう現象に悩まされていました。illustratorが止まってしまっている時に何が起きているかコンソールを起動してモニタしていた所、下…

めも。CSSやデザイン関連。

CSS 頭のいい人のSASSテクニック集。 | SAITEI no CHINJUU!!!(最低の珍獣) SCSSに限らずstylsとか最初にテンプレートとして作っておいて、プロジェクトのたびに読み込ませるようにすると便利そう アイコンフォントからSVGへ!より手軽にベクター画像を表示…

Photoshop CC 2014でスペースキーのコマンドが効かなくなった時の治療法

Photoshopを使っている時選択ツールの時にcmd+スペースやalt+スペースで画面の拡大縮小など多様するのですが、突然スペースキー関連のショートカットが全く認識しなくなりました。 Macデフォルトの言語ソース切替のショートカットがバッティングしているわけ…

めも。気になるフォントなど

最近Mac Mountain Lion からシステムフォントにAvenir入ってったことを知って驚愕しました。 フォント タイトル文や見出しに利用したいフリーフォント30選まとめ【2014年上半期】PhotoshopVIP | これが欲しかった!フリーフォント22選【日本語対応/商用可/…

めも。

■ Design ブランディングデザインやコンセプトデザイン制作時に便利なフリーのモックアップ素材 #4 | NxWorld 5 Examples of Inspiring Launching Soon Pages | Coming Soon Websites Browse our premium and free tumblr themes - Theme Cloud Land-book - …