コーディング

WEBデザイン

【コーディング備忘録】HTML上で文字色を指定できる「span style」

先日、コーディングをしている時に困ってしまったこと。 ひとつのキャッチコピーの中に複数の色や大きさの違う文字が使われていて、それぞれにどう指定したらいいか頭を悩ませました。なるべくスタイルシートの記述を増やさずに対処できないかなぁと...
WEBデザイン

【Illustrator】アートボード(カンバス)を回転させる「回転ビューツール」の使い方をご紹介

イラレを使っていて「アートボードが好きな角度で回転できればなぁ...」と感じたことはありませんか? きっとイラストを作成している方なら一度は思うはず。(デジタル絵描きの方はキャンバスをぐるぐる回転させながら細部を描き込んでいるイメー...
WEBデザイン

Macで.htaccessなどの隠しファイルを表示するショートカットキー

今回は、デフォルトで隠しファイルとなっている.htaccess(ドットエイチティアクセス)の表示の仕方がわからない!そんな時に役立ちそうな記事です。 .htaccsessとは? サイトの訪問者を新たな移転先へ自動で誘導したり、...
WEBデザイン

【コーディング備忘録】IE 環境でSVG画像が欠けた時の対処法

Internet ExplorerでSVGで書き出した画像がこのように欠けて表示されることはないでしょうか? 他の環境ではちゃんと表示されているのに、IEだとなぜか欠けてしまう...。今回は、IEだとうまく表示されないSVG...
WEBデザイン

【コーディング備忘録】CSSで画像やボタンを右寄せにする方法

コーディングをしていると要素を左右上下に寄せる場面が多々ありますよね。 私の場合、そんな場面で真っ先に思い浮かぶのがtext-align:〇〇(位置指定)なんです。しかし、text-alignが通用しない場面に遭遇してあたふたするこ...
WEBデザイン

【コーディング備忘録】テキストリンクにカーソルを置いた時に下線を表示させるCSS

テキストにaタグを使ってリンクを設定すると、デフォルトの状態だと デザインはじめました このように、ちょっと古くさい見た目で表示されてしまいますよね。文字色が青だと、配色が整ったデザインを損なってしまう恐れがあります。 ...
WEBデザイン

【コーディング備忘録】SVG形式で書き出したフォントが正しく表示されていないとき!〜アウトライン化と書き出し方法〜

本日は、お問い合わせページのコーディング中に起こったことについて。 電話番号と受話器のピクトグラムをまとめてSVGで書き出して、反映させてみたところ・・・ Windows環境では何故か明朝体→ゴシック体になって...
WEBデザイン

【コーディング備忘録】改行タグ<br>に余白を指定する方法

文章を改行する際に使用する<br>タグですが、文章の余白を調整するのにも便利だったりします。 今回は、長文を読みやすくするために行間や段落間の余白を空けたい時に有効な<br>の活用法を解説したいと思います。 See the...
WEBデザイン

【CSS】カーソルを乗せると画像が「ズームイン」するホバーエフェクトの使い方をご紹介

画像やリンクボタン等にカーソルを乗せた時の動きを「ホバーエフェクト」と呼びますが、調べてみると沢山の種類のエフェクトが紹介されていたりします。その中でもメジャーなズームイン系のホバーエフェクトを先日初めて使ってみたので、この場でおさらいし...
WEBデザイン

【コーディング備忘録】○番目の要素を指定する際の「nth-child」と「nth-of-type」について学ぶ

「○番目」や「奇数・偶数」などの特定の要素にだけ変化をつけたい、そんな時に便利な疑似クラス「nth-child」と「nth-of-type」について学んでみましょう。使う機会は多いものの、忘れたりごっちゃになったり、なかなか定着しないので...
タイトルとURLをコピーしました