エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY24.『サイトをより見やすくオシャレにするには』 #30DAYSトライアル

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

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

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

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

 

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

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

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

 

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

 

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

こっちがBEFORE↓

f:id:alpacajp:20190131204543p:plain

before

こっちがAFTER↓

f:id:alpacajp:20190131204600p:plain

after

 

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

 

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

知らないCSS文法があったら、とりあえず調べるのをくせにしていますw

text-align:justifyとは?

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

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

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

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

 

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

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

 

【例】

こ   ん   に   ち  は

ようこそホームページへ

 

みたいなやつです。

 

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

www.slideshare.net

 

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

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

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

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

 

 

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

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

 

【前回記事はこちらからどうぞ】