WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

サイトのコンテンツに被らずフッターを下に固定するCSS

2年の森本です。

以前私が小夏先輩に教えていただいて、皆さんにも、と伝言を頼まれていた、サイトのコンテンツに被らずフッターを下に固定するCSSをお伝えします。

ブログがなかなか上手く書けず伝えるのが遅くなってしまい大変申し訳ないです。

 

皆さんはサイトのコンテンツが少なくてフッターの下に余白が開いてしまうという経験はあるでしょうか。仮にもし、フッターの下に余白があるページを行き来すると、フッターがガタガタ動くように切り替わり表示されてしまうので、少しみっともないと思います。

そういった事態にならないためのCSSが下記になります。また、この方法ではbodyの中身を全て囲むdivをつくって使います。今回はそのつくったdivを#page、フッターを#footerとして表しています。

 

まず、実際のコードになります。

#page {
    position: relative;
    padding-bottom: 80px; /* フッターの高さ+フッターの上の余白の高さ */
    box-sizing: border-box;
    min-height: 100vh;
}
#footer{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px; /* フッターの高さ */
}
 
このコードでは、#pagemin-heightをつけることで「コンテンツの高さが小さかったとしても#pageは最低ウィンドウの高さ分(100vh)高さをもつ」という設定をしています。そして、#pageを親、#footerを子としてpositionを使い、#footer#pageの下に固定にしています。
 
上記の設定でフッターは固定できますが、これだけではウィンドウを縮小した時にも
ウィンドウ下にフッターが固定されるため、コンテンツに#footerが被って表示されてしまいます。そこで#footerheightをpxで指定し、#pagepadding-bottomを使って、#footerheightと、#footerとコンテンツの間に空けたい余白の高さを足した領域をつくります。これで#footer#pagepadding-bottom部分の上に表示されるので、ウィンドウを縮小した場合もコンテンツに被らずスクロールで見ることができるようになります。
 
コード自体は簡潔なのですが、文章だと分かりにくいかもしれないので、ぜひ一度実際に試してみてください。

ストーリーテリングについて

こんにちは、Web部担当の加藤です。

ちょっと古いかもしれませんが、以前から気になっていた「ストーリーテリング」について紹介します。

続きを読む

aria-hidden属性について

こんにちは、佐々木です。

2年生のみんなは五輪に向けてがんばっている真っ只中です。
テスト週間に入る前に私もWeb活を!と思ったので、記事を書かせていただきます。

aria-hidden属性について

若年の時にえいちゃんと発見した、aria-hidden属性についてまとめます。

font awesomeなどのアイコン用フォントを使用する際に、aria-hidden="true"を設定すると、その要素と子要素はユーザエージェント(Webブラウザやスクリーンリーダなど)に認識されないようになります。

ナビゲーションや見出しのアイコンは、デザイン的な理由で装飾されているものなので、Webサイトの内容には関係がありません。ですが、そのまま使用するとスクリーンリーダで関係のない言葉が読まれたり、同じ言葉が繰り返されて読またりしてしまいます。

そこで、aria-hidden="true"を設定してHTML内の意味を持った要素ではなく、装飾として認識されるようにします。

例:ホームのナビ
<a href="index.html"><i class="fa fa-home" aria-hidden="true"></i>ホーム</a>

 

逆にアイコンのみでボタンを作成する際には、title属性を設定して画面を見ているユーザにも文字でアイコンの意味を伝わるようにする必要があります。

例:Twitterのボタン
<a href="twitter.html"><i class="fa fa-twitter" aria-hidden="true" title="Twitter"></i></a>

 

また、アイコンそのままではなく別の言葉で読み上げてほしい場合はaria-label属性を設定します。

例:検索のアイコン
<i class="fa fa-search" aria-label="検索"></i>

 

 

アイコンを使用したデザインは好きなのですが、スクリーンリーダ越しの自分のWebサイトは関係のない言葉が入り交じっているのかと思うと恐怖です。

font awesomeを使用する際には気を付けたいと思います。

 

fontawesome.io

qiita.com

jQueryでのテキスト読み込み

こんにちは、WEB部担当の加藤です。

先日ようやく工芸サイトが完成して、一安心していたとき、
「Edgeで読み込みができていないんだけど」
と言われました。

確認すると、やはり読み込みができていない!!

さっそく偉大な先輩こなつ様に聞いてみました。

続きを読む

タッチパネルについて

こんにちは!

2年生の千賀です。

今回は、あまりwebには関係がないような気がし、また、もうすでに皆さんが知っていることかもしれませんが、もし知らなければ利用してほしいので記事を書かせていただきます。

 

いつも、コーディングをする際にタッチパネルに手があたってしまい、困ったりしていませんか?

一年生は、慣れてないノートパソコンで苦労している人もいるのではないかな、と思います。

私もいつもタッチパネルに悩まされています。

オフにしてしまうとマウスを出さずにちょっと使いたいだけ、って時に困ったりしてしまいますね…。

そこで、設定を少しいじるだけで、マウスが接続されてない時には使用でき、マウスが接続されていれば使用できない、という風にすることができます!

続きを読む

色選択に悩んだら

WEB部担当の加藤です。

いよいよ1年生にとって初めてのサイト制作の時期になりました。

今回はそんな1年生に向けて、色選択に悩んだときのツールを紹介します。

 

サイトテーマに沿ってメインカラーを決めるところまでは割と簡単にできると思います。

さて、その他の色に悩んだら、こんなツールがあります。

www.color-fortuna.com

2・3年生は前回のWCANでお話を聞いた坂本さんのフォルトゥナが作った配色ツールです。メインとなるカラーを決めると、それ以外の色を表示してくれてとても便利です。

コードも表示されるので、そのまま使用できます。

色選択に悩んだら、ぜひ試しにやってみてください!

テーマ変えについて考えてみました

こんにちは、佐々木です。
テーマ変えがあるかもしれないと事前に知ってはいるものの、実際テーマが全く違うものに変わってしまったら焦ってしまうのではないかと思い、私なりにテーマ変え対策を考えてみました。

参考にした記事はこちらです。

catcher-in-the-tech.net


もしテーマ変えがあった際に、この記事の「Webサイトのコンセプトを固める」で紹介されていた明確にしたい項目を書き出せばせばまとまるのではと思いました。

 

昨年を例にしてみます(競合は除いて考えました)

 

城南交響楽団
  • サイト運営の目的
    野外コンサートの告知、城南大学の地域貢献としての活動、「音を出す」という連絡
  • サイト運営の目標
    多くの人にコンサートに来てもらう、城南大学について知ってもらう
  • ターゲットユーザー
    コンサートに興味がある人(老若男女幅広く)
  • ターゲットユーザーの目的
    野外コンサートの詳細(日程、場所や詳しい内容など)を知る
  • Webサイトのニーズ
    野外コンサートの詳細を知る
  • このサイトの強み
    当日の天気予報、ロゴマークのアニメーション

トレッキングツアー
  • サイト運営の目的
    トレッキングツアーの告知、城南大学の地域貢献としての活動
  • サイト運営の目標
    多くの人にトレッキングツアーに来てもらう、城南大学について知ってもらう
  • ターゲットユーザー
    コンサートに興味がある人(ツアーに参加できる体力がありそうな年代)
  • ターゲットユーザーの目的
    トレッキングツアーの詳細(日程、場所や詳しい内容など)を知る
  • Webサイトのニーズ
    トレッキングツアーの詳細を知る
  • このサイトの強み
    当日の天気予報、ロゴマークのアニメーション

告知や大学の活動という目的や強みは変わっておらず、トレッキングツアーになったら、「音を出す」という連絡の部分を「必要な持ち物」に変えたりといった内容のみ変えればいいのだと分かりました。

 

こうしてみると、内容やテーマカラーを考えればテーマ変えが起きても十分対応できそうだなと思いました。
普段設計するときに考えていることと同じですが、次からは書き出してまとめてようと思いました。