お問合せはこちら【最短1営業日以内返信】

ホームページ制作・WEBサイト制作・グラフィックデザイン

CONTENT

ホームページのちょっとした装飾|吹き出し編

Posted:2016.10.06 | Category:

こんにちは!
アプリコットデザインの松澤です。

今回はホームページの中にいるアイコンにちょっとした装飾を施したいと思います!

まずはアイコンに登場して頂きます。

  • twitter
  • facebook


じゃーん!
今では知れ渡っているtwitterとfacebookのアイコンです。
今では有名になっているのでいいですが、知らない人から見たら「なにこのアイコン」ってなりますよね!

今回はそんなアイコンに吹き出しを作っちゃいます!

まずは骨組みを作っていきます。


<ul class="snsBtns">
<li><a href="#"><img src="https://apricot-design.com/wp-content/uploads/twitter-1.png" alt="twitter" /><span>twitter</span></a></li>
<li><a href="#"><img src="https://apricot-design.com/wp-content/uploads/facebook-1.png" alt="facebook" /><span>facebook
</span></a></li>
</ul>

こんな感じでhtmlを書いていきます!

この中のspanで囲んであるところが吹き出しで出てきます!

ちなみに今の状態だとこんな感じで表示されます。

  • twittertwitter
  • facebookfacebook


文字がそのまま出てしまっていますね(・ω・)

では、ここから一気に装飾していきます!!


ul.snsBtns {
	clear:both;
	padding:5%;
}
ul.snsBtns li {
	float:left;
	margin-right: 15px;
}
ul.snsBtns li a{
	display:block;
	position:relative;
}
ul.snsBtns li a span{
	color: #fff;
    display: block;
    position: absolute;
    opacity: 0;
    width: 80px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    top: -70px;
    left: -27px;
	border-radius: 5px;
    background: #55acee;
    text-align: center;
    transition: .3s;
    pointer-events: none;
    z-index: 10;
}
ul.snsBtns li a:hover span{
  opacity: 1;
  top: -40px;
}
ul.snsBtns li a span:after{
	position: absolute;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    top: 100%;
    left: 35px;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-top: 6px solid #55acee;
    content: "";
}


こんな感じでCSS(装飾用のコード)を書いていきます!

すると・・・!



アイコンの吹き出しの完成です!!
マウスをアイコンに当ててみてください!
吹き出しが降って来ます!

ul.snsBtns li a spanのtop、leftの部分の数値を変更すれば下から登場したり左右から登場したりと色々なパターンが作れるのでぜひ使ってみてください!!

こんな感じでホームページのちょっとした部分にも装飾し、閲覧している人にわかりやすくなるような工夫を盛り込むと、ボタンなどのクリックが増えること間違いなしです!

ホームページ制作・通販サイト制作 各種印刷物デザインならアプリコットデザイン

株式会社アプリコットデザイン

[長野オフィス]
〒381-2246 長野県長野市丹波島1-805
TEL.026-217-2184

[東京ブランチ]
〒107-0052 東京都港区赤坂8-4-14 8F
TEL.03-6670-5177

[松本ブランチ]
〒390-0851 長野県松本市大字島内4619-3 QuintetDoor 1階南室
TEL.0263-87-7486

SEARCH

  • デザインで全ての人を幸せに
  • ブランド戦略型WEBサイト
  • タブロイド紙作ります
  • 開業・企業パック
  • ブランディング
  • 信州ファーム
  • アプリコットマグ

AREA

対応エリア

長野市、松本市、上田市、岡谷市、飯田市、諏訪市、須坂市、小諸市、伊那市、駒ヶ根市、中野市、大町市、飯山市、茅野市、塩尻市、佐久市、千曲市、東御市、安曇野市、小海町、川上村、南牧村、南相木村、北相木村、佐久穂町、軽井沢町、御代田町、立科町、青木村、長和町、下諏訪町、富士見町、原村、辰野町、箕輪町、飯島町、南箕輪村、中川村、宮田村、松川町、高森町、阿南町、阿智村、平谷村、根羽村、下條村、売木村、天龍村、泰阜村、喬木村、豊丘村、大鹿村、上松町、南木曽町、木祖村、王滝村、大桑村、木曽町、麻績村、生坂村、山形村、朝日村、筑北村、池田町、松川村、白馬村、小谷村、坂城町、小布施町、高山村、山ノ内町、木島平村、木島平村、信濃町、小川村、飯綱町、栄村など長野県内全域

北海道、青森、岩手、宮城、秋田、山形、福島、東京、神奈川、埼玉、千葉、茨城、栃木、群馬、山梨、新潟、長野、富山、石川、福井、愛知、岐阜、静岡、三重、大阪、兵庫、京都、滋賀、奈良、和歌山、鳥取、島根、岡山、広島、山口、徳島、香川、愛媛、高知、福岡、佐賀、長崎、熊本、大分、宮崎、鹿児島、沖縄まで全国

TOPICSトピックス

2676 post

PICK UPピックアップ

  • デザインノートに掲載されました
  • デザインで人を幸せにする会社
  • ブランド戦略型ホームページ制作
  • 開業起業される方へ
  • アプリコットデザイン
  • コーポレートサイト
  • 信州ファームデザイン
  • 信州ファームマーケット
  • ポケット
  • アプリコットマグ
  • ブランシュール

CONTACTお問合せ

デザインで人々を幸せにしたい。
デザインにはその力があります。I want to make people happy by design.
Design has that power.

デザインが全てだとは決して思いません。
デザインの良し悪しだけで、ビジネスが左右されるとも思っていません。
だけど、デザインの力はとても大きいことも知っています。
私たちが考える良いデザインとは、お客様の伝えたい想いを
より的確に、効果的に表現する手段だと考えます。
伝えたい想いは、間違った伝え方をしてしまうと伝わりません。
また、人を惹きつけるデザインでないと見てもらうことすら困難です。
私たちは日々努力を重ね、今日もそれらデザインに磨きをかけています。
そして制作する過程において、デザインを作ることよりも、お客様の伝えたい想いを
汲み取る事の方が制作するよりも重要だと考えます。
それらの結果、見た目も効果も併せ持った、優れたデザインとなります。
優れたデザインはビジネスの成長を促し、収益をもたらします。
私たちは、デザインを通して、一人でも多くの人を幸せにしたいと考えます。
デザインには人を幸せにする力があると信じています。

アプリコットの想いアプリコットの想い