CSS【CSS】HTMLを入れ子にせずに、要素の内側に線を引く方法
エリアの枠やボタンなどで登場しがちな、少しだけ内側に線が引いてあるデザインを再現する方法について考えます。見出しなどにも応用できるので覚えておくと重宝します。 HTMLを入れ子にする方法 要素を入れ子にして、いちばん外側の要素...
CSS
CSSPhotoshopの「光彩（外側）」を、CSSで再現トライ！
PhotoshopでWebページのデザインを作成するときにテキスト領域に「光彩（外側）」をつける。 デザイナー兼コーダーの身としては絶対やりませんが、支給されたデザインで遭遇したことがあります。そして、自分ではやらないくせに、支給デ...
WordPressWeb制作の知識がなくてもWordPress使いたい！初心者でもWordPressを使えるサービスをご紹介
WordPressでサイトやブログを構築するには、ある程度Web制作の知識があった方が自由度が増しますが、知識がないけどWordPressを使いたい！もしくは、そもそもWordPressって何？という方もいると思います。今回はそんな人向け...
CSS【CSS】番号付きリスト（ol）の番号を装飾する方法
番号付きリスト（ol）の番号を装飾したいとき、ありませんか？デフォルトの数値を非表示にしてテキストで入力するのは、マークアップ的にスマートじゃない感じがしますし、番号が増減するとき更新が手作業になるのが面倒です。 ということで今回は...
CSS【HTML/CSS】iframeの下に謎の余白が空く問題
iframeで要素を埋め込んだとき、下の要素とピッタリつけたかったのに何故か隙間が空いていることに気づきました。探ってみると、盲点すぎる原因でした。 iframeタグは、インライン要素 早速ですが、下に、iframeの下にdi...
CSS【CSS】gridを使って要素を縦並びで複数カラムにする簡単な方法
要素を複数カラムで縦方向に並べるのって、結構悩みどころです。。今回は、gridを使って縦並びにする方法をご紹介します。 gridで縦並びにするカギは、grid-auto-flow gridを使った縦並びは、grid-auto-...
スキルアップWebデザインを「スクールで」学ぶメリットとデメリット、手軽に始められるスクールを紹介
これからWebデザイナーを目指そうという人、勉強の仕方は、動画・本・スクール等々ありますが、それぞれ一長一短ですので、ケースバイケースで自分に合ったものを選択したいところです。 今回は「スクール」に焦点を当てて、スクールで学ぶメリッ...
スキルアップWebデザインの勉強を「独学」でするメリットvsデメリット！
これから独学でWebデザイナーを目指そうという人に向けて、独学で学ぶメリットとデメリット、独学する人におすすめの書籍などをご紹介します。 私個人としては、独学で学ぶメリットはかなり大きいと思っています。独学推奨派がお伝えする独学の魅...
スキルアップWebデザイナーになるのってカンタンなの？これからWebデザインの勉強をする人に伝えたいこと
資格がいらない。参入障壁が低い。在宅で仕事するのも夢じゃない。という不思議な職業、それが「Webデザイナー」。 新型コロナの流行以降、Webデザイナーを目指して学習する人がますます増えているように感じます。 私自身、独学からス...
CSSCSSで画像や要素を反転させる方法
画像や擬似要素など、要素を反転したい機会って意外と多く遭遇します。 わざわざ新しく画像切りたくないし長々とスタイル加えたくない！そんなとき、transformを使うことで簡単に反転させることができます。 See the ...