2017年5月

素材

【無料素材】シンプルなのにかっこいい名刺が作れる!無料テンプレート7選

新しい年度がスタートしてはや2ヶ月弱。 これを機に名刺を新しく作りたい、リニューアルしたい、という方も多いのではないでしょうか。 でも予算が限られていたり、専門の会社に注文する予算がない場合は、 無料の素材を利用してみてはいかがでしょうか? 今回は、シンプルなのに相手に覚えてもらいやすく、かっこいい名刺の 無料テンプレートを紹介します。 グリーンの線がおしゃれな名刺 あまりごちゃごちゃした名刺にはしたくないという方にオススメ。 両面の緑のラインがアクセントで、余白たっぷりなデザインです。 また、電話番号や住所などのアイコンも、トレンドのアウトラインのミニマルデザイン採用です。 グリーンカラーをお好きな色に変えてみると、がらっと印象が変わりますよ。 グリーンの線の名刺テンプレートはこちらからダウンロードできます。(Ai形式) ブルー系の曲線の名刺 ネイビーブルーとターコイズブルーのストライブ曲線が優しい印象の名刺テンプレートです。 ブルー系で堅実感・清潔感があるのに、背景が実は真っ白じゃない、 こだわり感と可愛らしさもある印象です。 ブルー系の曲線の名刺テンプレートはこちらからダウンロードできます。(EPS形式) ブルー系のスクエアが散らばった名刺 躍動感のある名刺テンプレート。 意外とどんな業種でも使えそうな万能タイプのデザインです。 こちらも社名を覚えてもらいやすい、印象に残るデザインですよね。 ブルー系のスクエアが散らばった名刺テンプレートはこちらからダウンロードできます。(EPS形式) 弁護士さん向け!天秤がシンボルの名刺 弁護士さんといえば、信頼感が伝わるデザインが求められますが、 どうしても堅苦しくなりがち・・・ こちらのテンプレートなら、堅実感のあるライトブラウンの色合いに、 「正義」、「公平」を表す天秤が描かれた、堅くなりすぎない、 でもポップすぎない印象のデザインです。 天秤がシンボルの名刺テンプレートはこちらからダウンロードできます。(EPS形式) ヘアスタイリストさん向け!はさみがテーマの名刺 こちらも一発で職業が分かる名刺デザインです。 こんなデザインをもらうと「おおっ!」となりますよね。 美容師さんもオシャレさが大事! 名刺もついお客さんにあげたくなるデザインにしたいですよね。 あえてフォントは明朝系にすると、引き締まった印象になりますよ。 はさみがテーマの名刺テンプレートはこちらからダウンロードできます。(PSD形式) ラインとネットワークがモチーフの名刺 ネットワーク系やIT系の方の名刺は、ブルー系をよく見かけるのですが、 こちらの名刺テンプレートのイエローはとにかくおしゃれ。 ネットワークのラインも全面なのに全然うるさくない、 コントラストカラーで、社名や名前がパッと目に入るデザインです。 ラインとネットワークがモチーフの名刺テンプレートはこちらからダウンロードできます。(Ai・EPS形式) カメラマンさん向け!カメラがおしゃれな名刺 こちらも職業シリーズの名刺です。 アウトラインで描かれたカメラが、ひょこっとのぞくデザインがかわいくて、おしゃれな 名刺のテンプレートです。 しかも氏名欄がメインなので、お名前を覚えてもらえること間違いなし! ショップカードとしても使えますよ。 (カメラがおしゃれな名刺テンプレートはこちらからダウンロードできます。(Ai・EPS形式)

CSS

【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

グローバルナビや、メニューで、横並びリストをCSSで書くときに

で横並びにする人、多いかと思います。 これは正しいのですが、 困ったことに親要素のulタグが高さ0になってしまうこと、 ありませんか? ▼ 個々のリスト要素は高さがあるのに ▼ 親要素のulタグの高さが0になってしまう これは非常によくあるあるCSSで、マークアップをやっていく段階で 必ずといっても過言でないほど、当たる壁です。 【回避策 その1】親要素にoverflowを指定する 手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を 指定してあげます。

本来、overflow: hidden; は、 「要素(ボックス)からはみ出たコンテンツをカットして表示しない」 という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。 「【回避策 その1】親要素にoverflowを指定する」の場合のCSSソースコード例

【回避策 その2】:before, :after を利用する ulにoverflow: hidden;を使用してもよいのですが、 例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、 overflow: hidden;により表示されなくなってしまう場合があります。 そうなると回避策 その1は利用できなくなるため、別の回避策として 疑似要素を利用します。 具体的には次のサンプルコードの通りです。

ul本体には何も指定せず、 ul: before と、ul: after に 空の要素を置いてあげます。 空の要素の指定方法にも様々ありますが、ここでは、 ・中身が空(content: “”;)で、 ・回り込みを解除(clear: both;)し、 ・ブロック要素、つまり横幅100%(display: block;)の 要素を空要素としています。 そうすることで、なんということでしょう […]