[B! CSS] moeggのブックマーク

[レスポンシブ対応]メガメニューの作り方

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initiascale=1.0,user-scala ble=no" /> <title>グローバルナビ：メガメニュー、レスポンシブ対応</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" /> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="conta

moegg 2022/06/28

リンク

うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。

なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。欧文をベースに設計されたBootstrapをそのまま