[B! 装飾] masakaz77のブックマーク

masakaz77 id:masakaz77

装飾に関するmasakaz77のブックマーク (3)

女性の心をキャッチ！「かわいいデザイン」をつくるレイアウト&効果の小ワザ参考例
みなさんは、女性をターゲットにした広告を制作するとき、どんなことに気をつけていますか？女性は、男性よりも細かいところまで視線を向けているそうです。そのため、デザインでほんの少しの変化や動き、工夫をつけることで、女性の心をくすぐり、結果的に印象に残りやすい広告を制作することができます。広告を制作するときに大切にしたいのが、女性の心をつかむ「フック」をたくさん用意しておくこと。それが結果的に、効果のある広告につながると思います。いくつかの事例を参考に考察していきましょう！装飾をふやす例えばこちらは、「箱根スイーツコレクション 2014」の広告。箱根で行われているスイーツの祭典。毎回、可愛らしいポスターやパンフレットが街を彩っています。ターゲットは恐らく「若い女性」。温泉街にはあまり行かない、若い層に関心を持ってもらうためのイベントだと予想します。だから、温泉のイメージを一掃し、思いっ
masakaz77 2016/03/09
デザイン

ターゲット

装飾
リンク
[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）
あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。ブログやサイトのUIを作
masakaz77 2016/01/20
CSS

装飾

数字

ol

丸付き
リンク
画像なしで表現するリストマークのサンプルいろいろ｜ Tips Note by TAM
行頭記号やリストマークなどの装飾を、画像なしで実現する方法で普段よく使うものをリストアップしてみました。今回は、先頭に何かしら装飾をつける 2行目以降の先頭を1行目と揃える以上の2点をリストアップの条件にしました。サンプルはこちらです。 sample1 装飾文字を直接記述（全角のみ対応）サンプルはこちらまずはシンプルに、直接HTML上で行頭に「※」を挿入する方法。 2行目以降の先頭が1行目と揃うように、text-indentで「※」の1字分下げてやります。そのままだと行の先頭が1字分左に寄ってしまうので、その分左マージンを取って調整します。 p { text-indent: -1em; margin-left: 1em; } ※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト sample2 装飾文字を直接記述（全角・半角どち
masakaz77 2016/01/08
リスト

装飾

アイコン

インデント

CSS
リンク
1