作成者別アーカイブ: KIKO

KIKO

KIKO について

元漫画家です。今後は、似顔絵作家&Webデザイナーに転身したいと思い、只今勉強中です。 Webの知識はほとんどなく、パソコンの操作自体も慣れてない状態ですが、やりたいことなのであきらめずに頑張ります!! 趣味はパワーリフティング、トレッキング、旅、カメラ、英語です。 どうぞよろしくお願いします!

学習履歴:

職業:

clearfix_title

clearfixについてのまとめ

2014-5-02の勉強会にて学んだclearfixについてまとめます。現在私は初めてのサイトを制作中で、<footer>内のナビゲーションがfooter画像内におさまらないという問題が発生し、先生に質問しました。

image01

→原因は、<main>の高さが0だから。

image02

中身がすべてfloatしている親要素の高さは0になる。floatをかけると別の次元になり、親要素の中にいない状態になる。上の図の場合、2つの<div>は<main>の中にいない状態になる。つまり、親要素の<main>は2つの<div>を覆っていない状態である。

●解決法

  1. 親要素に固定の高さを指定する。 →しかしこれでは、どのくらいの数値かわからない。
  2. 自動的に高さがつくようにclearfixを指定する。
  3. overflow:hidden; を指定する。

2と3はどちらでもよいが、overflow:hidden; を使用すると、幅を超えてしまったテキストや画像を隠してしまうという問題が生ずる。clearfixの方が安全である。※両方指定しないこと。

●clearfixの使い方

・clearfixしたい要素は中身がすべてfloatしている親要素。
・親要素にクラスを指定しておく。ここでは「class=”clearfix”」とする。
今回の例でいうと、
html

css

↑after疑似要素とcontentプロパティを利用して、中身のfloatした要素の後ろに、内容が空のblock要素を生成。そのblock要素にclear:both; を指定している。

image03

これで親要素に高さがキープされ、中身の要素全体を覆うようになった。
ほかにもclearfixが必要な親要素に同じクラス名をつければ、複数回使用できる。

●「:before」「:after」とは

cssの疑似要素。(疑似要素とは、htmlにはかいていないが、cssで作れる要素のようなもの)
:beforeと:after疑似要素は位置を指定するもの。しかしIE7までは非対応。IE8から使用可。

:before →要素の直前にコンテンツを追加
:after   →要素の直後にコンテンツを追加

 

 

3/8勉強会 治療院チラシ

新メンバーのKIKOです。

今日の勉強会では、私が友人に頼まれたチラシについてアドバイスをいただきましたので、まとめを書きます。

・まずターゲット 誰に読んでほしいのか?を明確にすること。

・どんなシーンで使うのか?-ポスティングなのか、店の中に貼るのかなども考える。

・アイキャッチで注目をひく。まずは目にとまらせる。

ー基本面積の2/3使い、キャッチコピーがかぶってもいい。

-魅力的な顔のアップが強い。または文字だけで魅せる。

・ジャンプ率ー見出しは強力なメッセージになる。大きい方がアイキャッチ効果がある。読みやすい。本文は小さい文字でいい。

・箱組ー左右、上下のラインを揃える。これは意識しないと揃えられない。

・フォントの種類は多くても3種類。少ない方がいい。

・色の種類もあまり使わない。カラーポリシーがないのはだめ。

・ホワイトスペースを考える。はじまで文字を入れない。何かに注目させるために余白を作る。

・ドロップシャドウは使わない。

自分のチラシの悪かった点

・アイキャッチが弱い。

・ジャンプ率が低い。

・本文の文字はもっと小さくていい。→本文の文字も大きくしなくてはと思い(小さくするのが怖くて) 結果、すべてが同じ大きさになりアイキャッチがなくなってしまった。

・箱組ができていない。縦横のラインが揃ってなくてジグザグだった。

・ターゲットが曖昧だった。

・治療院の前の看板にさしておくチラシなので、治療院の名前は小さくてもいいとのこと。(院名を大きくすることばかり考えてました)

→チラシの目的、役割を整理すること!!

以上です。今日のアドバイスをふまえて、作り直してみます!!

タカハシ先生、今日のメンバーの皆さん、本当にありがとうございました!初参加の私に、皆さんフレンドリーに接してくれて、とても楽しかったです。正直、学校よりもためになる、内容の濃いすばらしい勉強会でした。また参加させてください!!