WEBデザイン 【Figma】書き出したSVGデータが崩れていた時に確認すること【対処法】
こんにちは。すっかりご無沙汰の更新になってしまいました。 思わず「書かねば！」と急き立てられるトラブルに直面したのであります。 それがタイトルの「FigmaでエクスポートしたSVGデータぶっ壊れ問題」です。 たまに起こってはいたのですが、書...
コーディング
WEBデザイン 
WEBデザイン 【コーディング備忘録】letter-spacingとline-heightの計算方法
コーディングしていると、ついつい忘れてしまうのがletter-spacing（字間）とline-height（行間）の計算方法です。 毎度「どっちがどっちだっけ？」と混同してしまうんですよね...。 しっかりインプットするためにも、計算方法...
WEBデザイン 【コーディング備忘録】文字の下線を2行目（複数行）以降にも引く方法
先日、cssで下線を引く方法をご紹介しました。 下線を引いた見出しをPC向けに実装すると、タブレットやスマホでの表示にちょっとした問題が発生します。 レスポンシブで画面幅が狭まると1行で収まっていた見出しが複数行になることが多々あります。こ...
WEBデザイン 【コーディング備忘録】border-bottomだけじゃない！cssで下線を引く方法。
文字に下線を引くとき、私が毎回使うのが「border-bottom」 こちらは、直線だけでなく点線や破線にもできるので大変便利なプロパティです。 See the Pen border-bottom by M S (@attlabo_m-s)...
WEBデザイン 【コーディング備忘録】CSSで文字を斜めにする方法
最近、CSSで文字に角度をつける方法を学びました。デザインソフト上で文字を斜めにすることはあっても、コーディングでは意外と機会がなくやってこなかったんですよね。 またいつか役立つかもしれないので忘れないうちに共有しておきます！ font-s...
WEBデザイン 【コーディング備忘録】CSSで文字を縁取る
cssの進化が凄まじい昨今。cssだけで作ったスロットゲームなんてのもあったりします。 私は加工の施された見出しを実装する際、基本はSVGやPNGで書き出す事が多いのですが、これはcssで出来るのだろうか？とふと疑問に思ったものが出てきまし...
WEBデザイン 【Googleマップ】ピンを立てた地図をブログやサイトに埋め込む方法
今現在、業務で観光施設のLPのコーディングをやらせてもらっています。 観光系のサイトでは必ず出てくるのがアクセスマップ。 観光施設などの複数のスポットが一箇所に集約された地図が載っていると大変便利ですよね。ルートや場所決めの後押しになったり...
WEBデザイン 【コーディング備忘録】HTML上で文字色を指定できる「span style」
先日、コーディングをしている時に困ってしまったこと。 ひとつのキャッチコピーの中に複数の色や大きさの違う文字が使われていて、それぞれにどう指定したらいいか頭を悩ませました。なるべくスタイルシートの記述を増やさずに対処できないかなぁと模索して...
WEBデザイン 【Illustrator】アートボード（カンバス）を回転させる「回転ビューツール」の使い方をご紹介
イラレを使っていて「アートボードが好きな角度で回転できればなぁ...」と感じたことはありませんか？ きっとイラストを作成している方なら一度は思うはず。（デジタル絵描きの方はキャンバスをぐるぐる回転させながら細部を描き込んでいるイメージがあり...
WEBデザイン Macで.htaccessなどの隠しファイルを表示するショートカットキー
今回は、デフォルトで隠しファイルとなっている.htaccess（ドットエイチティアクセス）の表示の仕方がわからない！そんな時に役立ちそうな記事です。 .htaccsessとは？ サイトの訪問者を新たな移転先へ自動で誘導したり、アクセス制限を...