DigiPressによるコンテンツ装飾テスト

疑似ボタンを使ってみよう

表示サンプル

このサンプルのコード

Normal Button
Blue Button
Lightblue Button
Orange Button
Pink Button
Red Button
Primary Button
Green Button
Black Button
Disabled Button

見出しラベルで注目を集めよう

表示サンプル

Labelラベルサンプル
Newラベルサンプル
Blueラベルサンプル
Greenラベルサンプル
Primaryラベルサンプル
Orangeラベルサンプル
Pinkラベルサンプル
Redラベルサンプル
Blackラベルサンプル

このサンプルのコード

Labelラベルサンプル
Newラベルサンプル
Blueラベルサンプル
Greenラベルサンプル
Primaryラベルサンプル
Orangeラベルサンプル
Pinkラベルサンプル
Redラベルサンプル
Blackラベルサンプル

アイコンフォントと組み合わせてラベルを表示

表示サンプル

OK

Point!

Attention!

このサンプルのコード

OK

Point!

Attention!

画像を使わないWebフォントによるアイコン表示

以下のアイコンはすべてDigiPressに組み込まれているWebフォントによって表示しています。
アイコンを表示したいテキストやブロック要素のタグに、class="icon-star"などのクラスを指定するだけで表現できます。

フォントデータなので、Retinaなどの高精細ディスプレイでも画像のように解像度の問題で粗くなることもありません。

表示サンプル

DigiPressは、専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから でも でもフレキシブルにレイアウトを最適化します。

お問い合わせは 012-345-6789 まで。

このサンプルのコード


DigiPressは、専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから  でも  でもフレキシブルにレイアウトを最適化します。

お問い合わせは 012-345-6789 まで。

利用可能なアイコン

  • icon-feedly
  • icon-cloud-upload
  • icon-cloud-download
  • icon-mail-alt
  • icon-edit
  • icon-resize-exit-alt
  • icon-resize-full-alt
  • icon-headphones
  • icon-phone
  • icon-open
  • icon-sale
  • icon-diamond
  • icon-tablet
  • icon-music
  • icon-picture
  • icon-pictures
  • icon-th
  • icon-space-invaders
  • icon-retweet
  • icon-chart
  • icon-phone2
  • icon-gmail
  • icon-skype
  • icon-pocket
  • icon-up-bold
  • icon-right-bold
  • icon-down-bold
  • icon-left-bold
  • icon-ok
  • icon-home
  • icon-chrome
  • icon-safari
  • icon-opera
  • icon-firefox
  • icon-link
  • icon-new-tab
  • icon-facebook-rect
  • icon-facebook
  • icon-twitter
  • icon-twitter-rect
  • icon-flickr
  • icon-pinterest
  • icon-pinterest-rect
  • icon-pinterest-circled
  • icon-instagram
  • icon-rss
  • icon-vimeo
  • icon-cupcake
  • icon-raceflag
  • icon-speaker
  • icon-th-large
  • icon-lock
  • icon-unlock
  • icon-alarm
  • icon-clock
  • icon-coffee
  • icon-building
  • icon-metro
  • icon-automobile
  • icon-bus
  • icon-shipping
  • icon-warmedal
  • icon-crown
  • icon-doc
  • icon-docs
  • icon-download
  • icon-upload
  • icon-plus
  • icon-minus
  • icon-evernote
  • icon-martini
  • icon-trophy
  • icon-podium
  • icon-google
  • icon-popup
  • icon-pencil
  • icon-blocked
  • icon-checkbox-checked
  • icon-quote-right
  • icon-quote-left
  • icon-cmd
  • icon-terminal
  • icon-finder
  • icon-bookmark
  • icon-star
  • icon-star-half
  • icon-star-empty
  • icon-yahoo
  • icon-eye
  • icon-wordpress
  • icon-podcast
  • icon-connection
  • icon-volume-up
  • icon-volume-off
  • icon-404
  • icon-paypal
  • icon-visa
  • icon-mastercard
  • icon-mobile
  • icon-desktop
  • icon-logout
  • icon-food
  • icon-facebook-circled
  • icon-twitter-circled
  • icon-rss-rect
  • icon-rss-circled
  • icon-tumblr
  • icon-gift
  • icon-movie
  • icon-attach
  • icon-videocam
  • icon-list
  • icon-equalizer
  • icon-ok-circled
  • icon-menu
  • icon-torigate
  • icon-christmastree
  • icon-left-circled
  • icon-right-circled
  • icon-up-circled
  • icon-down-circled
  • icon-video-play
  • icon-youtube
  • icon-youtube-rect
  • icon-search
  • icon-cross-circled
  • icon-minus-ciecled
  • icon-plus-circled
  • icon-apple
  • icon-windows
  • icon-android
  • icon-linux
  • icon-tag
  • icon-tags
  • icon-comment
  • icon-comments
  • icon-user
  • icon-users
  • icon-folder
  • icon-folder-open
  • icon-folder-alt
  • icon-folder-open-alt
  • icon-comment-alt
  • icon-floppy
  • icon-dropbox
  • icon-heart-empty
  • icon-heart
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-right-hand
  • icon-left-hand
  • icon-up-hand
  • icon-down-hand
  • icon-cog
  • icon-print
  • icon-plane
  • icon-zoom-in
  • icon-zoom-out
  • icon-laptop
  • icon-globe
  • icon-angle-circled-left
  • icon-angle-circled-right
  • icon-angle-circled-up
  • icon-angle-circled-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-mail
  • icon-calendar
  • icon-starburst
  • icon-written-doc
  • icon-camera
  • icon-login
  • icon-basket
  • icon-email
  • icon-left-open
  • icon-right-open
  • icon-down-open
  • icon-up-open
  • icon-info
  • icon-triangle-right
  • icon-triangle-up
  • icon-triangle-down
  • icon-triangle-left
  • icon-leaf
  • icon-bookmark-narrow
  • icon-bag
  • icon-info-circled
  • icon-attention
  • icon-help-circled
  • icon-help
  • icon-ccw
  • icon-cw
  • icon-safe
  • icon-dollar
  • icon-dollar2
  • icon-basket2
  • icon-credit
  • icon-ambulance
  • icon-cogs
  • icon-hospital
  • icon-arrow-left-pop
  • icon-arrow-right-pop
  • icon-arrow-up-pop
  • icon-arrow-down-pop
  • icon-code
  • icon-palette
  • icon-trash-empty
  • icon-trash-full
  • icon-dot
  • icon-left-light
  • icon-right-light
  • icon-up-light
  • icon-down-light
  • icon-spaced-menu
  • icon-triangle-up-down
  • icon-finger-tap
  • icon-finger-pinch-in
  • icon-finger-pinch-out
  • icon-finger-point
  • icon-book-open
  • icon-man
  • icon-woman
  • icon-baby
  • icon-database
  • icon-keyboard
  • icon-powercord
  • icon-beer
  • icon-amazon
  • icon-game-pad
  • icon-hatebu
  • icon-piano
  • icon-ticket
  • icon-play
  • icon-stop
  • icon-pause
  • icon-backward
  • icon-forward
  • icon-first
  • icon-last
  • icon-next
  • icon-previous
  • icon-spinner
  • icon-spinner2
  • icon-spinner3
  • icon-spinner4
  • icon-spinner5
  • icon-spinner6
  • icon-spinner7
  • icon-spinner8
  • icon-spinner9
  • icon-spinner10
  • icon-creativecommons
  • icon-spam
  • icon-microphone
  • icon-microphone-off
  • icon-microphone2
  • icon-box
  • icon-box-opened
  • icon-box2
  • icon-zip
  • icon-book
  • icon-minus2
  • icon-plus2
  • icon-cross
  • icon-cake
  • icon-update
  • icon-html5
  • icon-css3
  • icon-yen
  • icon-coin-yen
  • icon-location
  • icon-location2
  • icon-cube3
  • icon-cube4
  • icon-dot-menu
  • icon-dot-menu2
  • icon-code2
  • icon-soundcloud
  • icon-soundcloud2
  • icon-sun
  • icon-sun2
  • icon-moon
  • icon-moon2
  • icon-share
  • icon-bed
  • icon-sofa
  • icon-diving-goggle
  • icon-sports-shoe
  • icon-sports-shoe2
  • icon-display
  • icon-edge
  • icon-wakaba-mark
  • icon-t-shirt
  • icon-bicycle
  • icon-ferry
  • icon-train
  • icon-walk
  • icon-rest
  • icon-window
  • icon-disc
  • icon-key-a
  • icon-one-finger-swipe-left
  • icon-one-finger-swipe-right
  • icon-one-finger-swipe-up
  • icon-one-finger-swipe-down
  • icon-yen2
  • icon-lamp
  • icon-store
1 2 3 4
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次