CSSシェアする特に非デザイナーの開発者やWeb制作の初心者によくあるとおもうのですが、自分でデザインしたページをいざコーディングしてみたら、思ってたのと違う印象になってしまうこと、ありますよね。そんな、ちょっと野暮ったいな、とか、もう少し洗練された印象にしたいな、というときに試してみたい3つの小技を紹介します。CodePen.内容は坂口安吾の随筆、「堕落論」の最後から。見ての通りパッとしない、いかにも手作り感のあるボックスです。微妙なシャドウをつけるまずはボックスに影をつけて、立体感を出します。CodePen.いかにもなシャドウは避け、背景色によっては気づかない程度の薄いシャドウのほうが品があって良いと思います。サンプルでは背景がグレーなので、シャドウも非常に薄くしてあります。CodePen.つぎにボックスの余白を調整します。余白が大きいとより洗練された印象になりますので、コンテンツの可読性を損なわない程度に大きめに取るほうがいいでしょう。行間も標準のままでは詰まり過ぎなので広げました。だいたい1.6~1.8あたりが読みやすいかな、と。サンプルではついでに見出しの文字を細くして白の面積をひろげ、薄い下線によって見出しであることを表現してみました。CodePen.最後にボックス角をほんの少しだけ丸くします。2pxとか3pxくらいで、よく見ないと気づかない程度で十分です。修正後↓このように、同じ内容ですがだいぶ印象が変わりました。余白だけ、シャドウだけなど、制作物全体とのバランスを見ながらぜひ取り入れてみてください。シェアするフォローするいのゆうこちらもおすすめ【CSS】属性セレクタの書き方メモ無駄に詳細度を上げない属性セレクタですが、けっこう便利な指定方法があるようなのでメモ。うまく使えばコードも少なくできそうだし単純に便利。selector)というのを最近知りました。このように見た目がフクロウの顔に見えるからフクロウ...記事を読む【CSS】リストにhoverしたときにhoverしていない要素のスタイルも変更する方法【コピペOK】ことばでうまく説明できないので、まずは実際に動作してるのを見てください。HTMLの構造としてはemmet記法でいうとul>(li>a)*...記事を読む【CSS】要素のスタッキング方法3種Webサイトを制作していれば必ず出てくる、要素のスタッキング。初歩的ではありますが、marginの相殺などで思ったようにスタッキングできないこともあるのではないでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。Blogのコンテンツは原則として筆者に属します。無断転載、特にまとめサイト、キュレーションサイトへの転載は掲載の方法および分量を問わず厳に禁止します。※オリジナルコンテンツを主とする個人のブログ、ウェブサイト等への正当な引用を妨げるものではありません。