かもメモ

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

Design

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のレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 1. text-stroke を使う方法 text-stroke サポート状況 IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現…

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

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

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

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

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

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

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

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

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

21世紀のビジネスにデザイン思考が必要な理由作者: 佐宗邦威出版社/メーカー: クロスメディア・パブリッシング(インプレス)発売日: 2015/08/04メディア: 単行本(ソフトカバー)この商品を含むブログ (3件) を見る を読みました。そういえば僕は元々デザイナ…

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 - …