デイトラ1期 DAY24『サイトをより見やすくオシャレにするには』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

30DAYSトライアル1st DAY24.『サイトをより見やすくオシャレにするには』の解説です。

デイトラDAY24.『サイトをより見やすくオシャレにするには』

デイトラDAY24.『サイトをより見やすくオシャレにするには』ということで、bootstrapっぽさを無くすためのデザイン変更でした。

Bootstrapっぽさを無くす方法が参考になった

Bootstrapっぽさを無くす方法が参考になりました。

ショーヘーさんから提示されたURLはこちら↓

行間変えたり、文字間変えたり、フォント変えたりと、提示された方法は一通り試してみました。

こんな感じで変化しました!

こっちがBEFORE↓

before

before

こっちがAFTER↓

after

after

ちょっと分かりづらいですが、こんな感じでした。

 

知らないCSS文法を調べてみた

知らないCSS文法があったら、とりあえず調べるのをくせにすると良いですよ!

 

text-align:justifyとは?

text-alignプロパティは、コンテナ内の文章の揃え位置を指定します。

startは行の開始位置に揃える、endは行の終了位置に揃える、leftは左揃えにする…と言った感じです。

で、justifyとはなにかというと、「均等割付」です。

※justifyは、「just(ぴったり)」にさせる(他動詞)というイメージですね

 

均等割付とは、右端でうまいこと揃えるために、文字数が足りない行の文字間に空白を入れるものですね。

ウェブサイトで謎に空白が多い文字列があるのをよく見かけましたが、このtext-align:justifyを使っているっぽい!

 

【例】

こ   ん   に   ち  は

ようこそホームページへ

みたいなやつです。

 

下のスライドにブラウザごとの動作の違いがありました

www.slideshare.net

 

modal(モダールウィンドウ)とは?

そもそもmodal(モダールウィンドウ)とはなにか?

ボタンを押すと、ポップアップでウィンドウ(ダイアログ)が出てくるようなパーツのことです。

前面に出ている(ポップアップしている)モーダルウィンドウがある限り、裏側のメインウィンドウを操作できなくなるのが特徴です。

 

以上、DAY24.『サイトをより見やすくオシャレにするには』 でした。

デザインは奥深いですね…(灬╹ω╹灬)