Design
レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、ol の順番を途中から始めたかった start 属性を使えばOK start で指定した数字からの番号リストになる <ol start="10"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> ↓ 10. item 1 11. item 2 12. item 3 value 属性を使…
WEB サイトのコンテンツの主体は文章です。 その文章を日本語でもエディトリアルの禁則のようにいい感じにしてくれるプロパティを知ったのでメモ line-break プロパティ The line-break CSS property sets how to break lines of Chinese, Japanese, or Kore…
webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイ…
Tailwind の md:flex みたいなレスポンシブのクラスみないな prefix のあるクラスと楽に作れる mixin を作りたかった 環境 sass: 1.42.1 (Dart Sass) レスポンシブ用の prefix を付けたクラスを生成する _breakpoints.scss $breakpoints: ( xzs: 0, xs: 23.3…
新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。 カラーバリエーションを生成する // デフォルトの…
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)…
text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう!
ことの発端 macOS CatalinaのChrome 77のフォント問題。勘違いしている人が多いので説明。Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる↓該当するフォントがなくなったため、Sans Serifが明朝体で表示される↓フォント指…
単純に文字列を1文字づつ追加していくだけのものですが See the Pen Text Typewriter with Javascript Promise by KIKIKI (@chaika-design) on CodePen. ※ 表示エフェクトはForkしたものですが、表示ロジックは丸っと作り直ました PromiseはsetTimeoutを繰り…
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 でCSSでlist-style: noneが指定されているにも関わらず、・や 1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。 調べているとIEでもこの問題はあったようで 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / l…
WacomのFAQのサイトのURLが変わってしまっていて、新しいURLにリダイレクトされない為、記事中にあるhttp://tablet-faq.wacom.co.jp/faq/のリンクは無意味になっています m(_ _)m 2019 6.5 追記 このAI?が描いた絵を認識して当ててくれるゲームのようなサー…
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… またお前か! 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 で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった... 発生…
三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描…
イラレ(Adobe Illustrator)でデータを作る時に表やテーブルを作成したい時は段組設定が超絶的に便利です。 作成したい表の大きさの四角形を作成 メニューバーから オブジェクト > パス > 段組設定 を選択 設定メニューから作成する表の行数と列数を選択 セル…
Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート…
IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…
パターンで付けた柄をオブジェクト化(アウトライン化?)する方法。 オブジェクトを選択して、メニュバーからオブジェクト > 分割・拡張...を選択すればOK ダイアログが出るのでそのままOKを押せばパターンがオブジェクトに変換されます イラレで印刷に出すの…
スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…
パッケージのデザインなどをしている時に印刷所からテンプレートをダウンロードすると、たいてい印刷範囲のガイドが引かれています。ぴったり合わせた様なデザインを作成したい時、ガイドが直線的なものならまだ良いのですが曲線だったり複雑なものとかだっ…
21世紀のビジネスにデザイン思考が必要な理由作者:佐宗 邦威発売日: 2015/08/04メディア: 単行本(ソフトカバー) を読みました。そういえば僕は元々デザイナーだったのでしたw 良い機会なので意識高い系っぽくデザインについて思ってることも踏まえて感想を…
px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ!と言うことでrem指定にチャレンジしてみた所、…
フォームのイマココ!とか表示できるシンプルなステップバーを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%アプリが止まってクラッシュしてしまう現象に悩まされていました。illustratorが止まってしまっている時に何が起きているかコンソールを起動してモニタしていた所、下…
CSS 頭のいい人のSASSテクニック集。 | SAITEI no CHINJUU!!!(最低の珍獣) SCSSに限らずstylsとか最初にテンプレートとして作っておいて、プロジェクトのたびに読み込ませるようにすると便利そう アイコンフォントからSVGへ!より手軽にベクター画像を表示…
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 - …