読者です 読者をやめる 読者になる 読者になる

アプリ魂

はじめてのプログラミング生活

【117日目】コンテンツの高さをVHで指定して全画面表示してみた

f:id:seitokaii:20170118001514p:plain

@appdamacyですペコリ(o_ _)o))

ここ最近はウェブサイトのつくりかたを学ぶのにはまっています。「あれどうやってつくられてるんだろう」をどんどん解決していきたいなー。

コンテンツの高さをVHで指定

f:id:seitokaii:20170117224502p:plain

横幅をいっぱいに広げる時は「width:100%」を指定してあげればいいけど、縦はどうするんだろうとずっと疑問でした。

この一行だけで縦幅がいっぱいに・・・jQueryとか使って制御する方法があるのは知っていたけどCSSでも簡単にできるのは知りませんでした。

単位はピクセルとパーセントしか理解していないのでダメだ。もっとはやく調べてればよかった(・ω・)

背景の表示の仕方は普通にこんな感じです。

アイコンフォント「Ionicons」を導入

f:id:seitokaii:20170117230623p:plain

Ionicons: The premium icon font for Ionic Framework

f:id:seitokaii:20170117231019p:plain

このブログのアイコンフォントには「Font Awesome Icons」を使っているのですが、Ioniconsのハンバーガーメニューのほうが好みだったので試してみることにしました。

使い方はCDNを読み込んでクラスに好みのアイコンを設定するだけ。以下のサイトから好みのアイコンをクリックしてコピペしましょう。

ヘッダーにサイトタイトルを設置

f:id:seitokaii:20170117230317p:plain

絵が強いとこれだけでもさまになる!ファッション系とかビジュアルを押し出したサイトで全画面表示が使われてる気がします。

むずかしそうだと思っていることも調べてみるとすぐにできたりするので、疑問におもったらすぐ調べる癖をつけたいです。でも寒い時期は誰でも動けないよね?

明日も練習がんばりますペコリ(o_ _)o))

2016 アプリ魂
Powered by Hatena Blog.