【html】html でlayoutの基本はdisplay: gridでよいのでは？ 　横に並べたり、縦に並べたり

-

シンプルなレスポンシブサイト構築なら、もうGrid Layoutで決まり！

最近、シンプルなレスポンシブサイトを構築する際、レイアウト方法に迷うことはありませんか？ そんな時は、CSS Grid Layout を使うのが、もう一番無難でオススメです！

特に、横並びで均等割りのレイアウトを実現したい場合、Grid Layoutは非常に強力なツールとなります。

例えば、横3列で均等に要素を配置したい場合、以下のCSSコードで簡単に実現できます。


display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;

このコードのポイントは、grid-template-columns: repeat(3, 1fr); の部分です。repeat(3, 1fr) は、「1fr」という単位を3回繰り返すという意味で、各列に均等なスペースを割り当てます。

列数を調整したい場合は、3 の部分を 2 や 1 に変更するだけでOK！ 簡単に列数を変更できるので、様々な画面サイズに対応したレスポンシブデザインも容易に実現できます。

さらに、要素間の隙間は gap プロパティで調整できます。gap: 16px; のように指定することで、要素間に16pxの隙間が生まれます。この値を調整することで、見た目のバランスを整えることができます。

Grid Layoutは、複雑なレイアウトもシンプルに記述できるだけでなく、レスポンシブデザインにも柔軟に対応できるため、現代のWebサイト構築において非常に強力なツールです。

ぜひ、Grid Layoutを活用して、効率的で美しいWebサイトを構築してみてください！

場所: 日本

コメント

コメントを投稿

このブログの人気の投稿

【iOS】SwiftでCGAffineTransformから角度・ラジアン・度数・スケールを計算する方法

-
メモ Swift 4 でtransformから角度、ラジアン、ディグリー、スケールを求める 忘れがちなので・・・。 let transform = view.transform let radians = atan2(transform.b, transform.a) let degrees = radians * 180 / .pi let scale = sqrt(abs(transform.a * transform.d - transform.b * transform.c)) import CoreGraphics extension CGAffineTransform { var angle: CGFloat { return atan2(b, a) } var radians: CGFloat { return angle } var degrees: CGFloat { return angle * 180.0 / CGFloat.pi } var scale: CGPoint { return CGPoint(x: sqrt(a * a + c * c), y: sqrt(b * b + d * d)) } } // 例として、適当な CGAffineTransform を作成 let transform = CGAffineTransform(rotationAngle: CGFloat.pi/4).scaledBy(x: 2.0, y: 1.5) let angleInRadians = transform.radians let angleInDegrees = transform.degrees let scale = transform.scale print("Angle in radians: \(angleInRadians)") print("Angle in degrees: \(angleInDegrees)") print("Scale: \(scale...
続きを読む

【Android】WebViewのズームボタン（ピンチイン・ピンチアウト）を非表示にする方法

-
androidでWebView画面を作成する時に、 ピンチインとピンチアウトを有効にした場合、 拡縮コントローラーのボタンを非表示にしたい時のメモ。 (ズームイン、アウトするボタンの事です。) あれが表示されると、結構うざい時がありますよね？ // WebViewのインスタンスを取得 WebView webview = findViewById(R.id.webview); // WebSettingsを取得 WebSettings settings = webview.getSettings(); // ピンチイン・ピンチアウトを有効にする settings.setSupportZoom(true); // 内蔵ズームコントロールを有効にする settings.setBuiltInZoomControls(true); // ズームコントロールのボタンを非表示にする settings.setDisplayZoomControls(false); // ←これが大事 この設定はAndroid APIレベル11以上でサポートされています。 ちょっと検索かけると、 消す方法がリフレクションして消すような古い記事しかなかったので探すのに苦労しました。
続きを読む

【iOS】UILabelでヒラギノフォントの上下が切れる問題と対処法

-
イメージ
iOS で開発していると、フォント指定がありますが、 ヒラギノフォントを指定した場合、 UILabel ( UIButton ) で表示しようとすると文字が切れるやつがいます。 特に、sizeToFit() を呼ぶと結構悲惨です。 切れる可能性がある文字たちは下記 ① gjpqy Ä Ö Ü ß ĀĂĄąĆĈĊČĎ Ņ gjの文字が消えないように検索したら、 他のサイトでは、 NSAttributedString.Key.baselineOffset: NSNumber(value:1.0) とか位置少し上にずらして attributedText に入れるとか記載がありますが完全ではありませんでした。 Ä Ö Ü の「..」のなどの部分が切れてしまいます。  そこで、どうしてもだめだったら、完全では無いですが、 下記を試して見てください。 clipsToBounds = false 意外と盲点だったりします。 まぁ、画面上下ピッタリの場合はだめかも知れませんが. こんな感じに表示可能です。（赤が本来のViewの領域）
続きを読む