2017
12.13

アピールしたい文字をCSSで中央配置センターリングしよう!

Bootstrap, CSS, HTML

CSSでカンタンにセンターリングできる

コードは実際に描いてみないとピンと来ないかと思うので、分りやすいようにサンプル掲載します。

今回は既にあるソースコードを使って、実践しました。

サンプルソース

See the Pen Simple Responsive Table in CSS and nice Button by Yukyco (@yukyco) on CodePen.

参考:CSSで中央配置(センターリング)する方法
http://www.css-lecture.com/log/css-beginner/026.html

ポイントはシンプルな頭でシンプルに理解する! これだけです。
margin: auto 0;
width: 100%;
text-align: center;

実際に一つのページで一つのブロックを作った場合にセンタリングするのは、カンタンですが・・・!

沢山のブロックをセンタリングしたい場合はどうなるのでしょう。

Bootstrapでコードを書く時の注意点

今の主流は、スマホユーザーがほとんどです。

レスポンシブデザインであるかどうか、気にするエンジニアと気にしないエンジニアがいますが、デザイナーは気にしないと飯が頂けません!

Booststrapは フレームワークなので、グリッドについての理解が必要で、
コードをスラスラと書けるまでになるには、覚える必要があったりします。

参考: Bootstrap 4.0 入門

Bootstrapを使うメリット

最初はなかなか覚えられないものですが、遊びながら使っているうちに親しみを覚えていき、
更には使いこなせるようになれると思います。

そんなグリッドの理解が必要なBootstrap。一途に覚えたいと思えますか?

何が良くて使うのでしょうか。

明確なことは言えませんが、複数ページのあるサイトを

・「カンタンにカッコいいサイトを作れるから」

・「デザインを考えなくてもいいから」

という理由だと考えます。

実際には、使う機会がないと覚えられないもの。

使う時になって奮闘しながら作るのも楽しみの一つ・・といえるでしょう♪

実際にBootstrapの公式サイトをじっくり読んでみるといいです。
読んでいるうちに、ソースを書きたくなってきます。

以下のスクリプトはクラス設定するときのBootstrap要素名で、

決まった書き方をすることでカンタンにサイトをデザイン出来るという訳ですね。

ヘッダーに下記のソースを入力するだけで、CSSを読み込んでくれて、すぐの利用も可能です。

無料利用が可能なので、初心者にもとても便利なシステムですよね !

おすすめはダウンロードですが、ちょっと試しに使うだけなら、公式サイトから以下のリンクをコピペして読み込むといいでしょう。

サンプルページ

文字を目立つようにCSSで装飾する際のポイント

肝心の大きく魅せたい文字について・・・前回ご紹介した h1~h6タグでコーディングするのが一般的でが、背景色等の配色によっても文字が目立つか目立たないか、変わって来ます。

組み合わせ方が問題であり、悩みどころとなるので、とっても重要です。

他にもLine Height とFont Weight, Font Family, Font Faceは文字を大きく見せるCSSを描く際に理解が必須ですので、こちらも参照させて頂きました。

(font-weight)参考ページ
https://techacademy.jp/magazine/6336

デザインに関するソースは、あげるとキリがありませんので、コピペで使えるものは使わせて頂くのがいいと思います。

次回はFluid Designと Responsive Designの違いについて、投稿しよう思います!

最後までお読み頂きありがとうございました。

【PR】


コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。