2021-04

WEBデザイン

【コーディング備忘録】固定ヘッダーによりページ内リンクの位置がズレてしまう問題を解決する〜CSS〜

本日はページ内リンクにまつわる、ちょっとしたコーディング備忘録です。 ページ内リンクを複数設定し、正常にリンクできているか確認を行っていたところ、飛んだ先の見出しに固定ヘッダーが重なっているのを発見しました。見出しからきれいに表示させ...
WEBデザイン

【コーディング備忘録】boldを使っていないのに、文字が太字になっているとき

本日もコーディング初心者が「なんでだろう?」とつまずいてしまった、何でもないようなことを書いていきますよ。 それは最初のページのコーディングが最終段階に入り、余白やフォントが適切かどうかデザインカンプを見ながら確認していたとき。文字の...
WEBデザイン

【コーディング備忘録】「display:inline-block」でリストを横並びにした時に生じる余白の対処法

グローバルナビなどリストを横並びにする時に発生してしまう余白について書き記しておこうと思います。 先日、リストタグに対して「display:inline-block」を使って要素を横並びにした時に、liとliの間に謎の余白が発生してい...
WEBデザイン

【Illustrator】色決めに迷ったときに役立つ「カラーガイド」の使い方

デザインの色決めをしていて、「色の方向性は何となく決まったけどイマイチしっくりこない...」となる事はありませんか? また、スウォッチパネルの初期カラーパレットばかり使っていると、毎回似たような色になりがちですよね。 本日は、少...
WEBデザイン

【コーディング備忘録】ヘッダーを固定させる方法と注意点

ヘッダーに何も設定していない状態だと、メニューを選択しにまたページトップまで戻る手間が生じてしまいます。 本日は、スクロールしても常にページの上部にヘッダーを固定表示させることができるCSSプロパティ「position:fixed」を...
WEBデザイン

【コーディング初心者向け講座】影をつけるCSSプロパティ「box-shadow」と「 drop-shadow」について学ぶ!〜CSS〜

先日、text-shadowという文章に影をつけるCSSプロパティをご紹介しました。 今回は画像やオブジェクトなどに影をつける「box-shadow」と「filter:drop-shadow」についてまとめたいと思います! box-...
WEBデザイン

【Illustrator】イラレで画像に枠線をつける方法

Illustratorで画像に枠線をつけようとして、スウォッチパネルの塗りと線から色を設定してみるも「何も起こらない...」という経験をしたことはありませんか? 実は画像に枠線をつける方法は別に2つあるんです。  アピアラン...
WEBデザイン

【コーディング初心者向け講座】文字に影をつけるCSSプロパティ「text-shadow」について学ぶ!〜CSS〜

IllustratorやPhotoshopでは「ドロップシャドウ」や「光彩」を使えば簡単に文字に影をつけることができます。 これをコーディングで再現するとき、text-shadowというCSSプロパティを使います。 text...
WEBデザイン

【コーディング初心者向け講座】text-alignについて学ぶ!〜CSS〜

先日、コーディングについて学んだことを記事にする!と宣言しました。 今後は「コーディング初心者向け講座」と題して使用頻度の高いプロパティや知識を一つずつ取り上げまとめる事で、このブログで逆引き辞書のように見返せればいいなと思ってます。...
WEBデザイン

コーディングはじめました。

ぽかぽか陽気でだいぶ春めいてきましたね。 本日から新年度ということで、新たな環境に身を置いて勉強・仕事に励む方も多いと思います。私にはそこまで大きな変化はないのですが、今週から少しだけ業務内容に変化が。 ついに業務でコーディング...
タイトルとURLをコピーしました