Sanctuary-It

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

8541 views
約18分

案件状況

当社にて、ご提供してる業種の割合「Finance」、「Logistics」、「WEB」、「Infrastructure」、「Telecom carrier」等
様々な、案件多数実績がございます。

高額案件に入りたい」、「テレワークがある案件がいい」等、さまざまなご要望に応えれるよう
当社では、案件を提供いたします。

%
Finance(金融系)
%
Infrastructure(インフラ系)
%
WEB(WEB系)
%
Other
%
お客様満足度

achievements

過去の案件の業種別の一例とります
The following is a list of past projects we have handled.
see more ⇒

Topic

※現在改装中:最新のニュースのお届け
We are currently undergoing renovation work. We apologize for any inconvenience this may cause.

通信キャリア/インフラー Carrier / Infrastructure ー

大手インターネットインフラ会社や大手通信キャリア会社での多岐にわたる実績がございます。

通信キャリア

Telecommunications Carrier
通信キャリア向けの各業務システム(CRM、メール配信システム、キャリア課金等)

インフラ

Infrastructure
ITインフラ「ネットワークエンジニア」や「サーバーエンジニア」における、運用・サーバーの設計や構築等に携わっております

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

表示サンプル

このサンプルのコード

<a class="btn" href="#" role="button">Normal Button</a>
<a class="btn btn-blue" href="#" role="button">Blue Button</a>
<a class="btn btn-lightblue" href="#" role="button">Lightblue Button</a>
<a class="btn btn-orange" href="#" role="button">Orange Button</a>
<a class="btn btn-pink" href="#" role="button">Pink Button</a>
<a class="btn btn-red" href="#" role="button">Red Button</a>
<a class="btn btn-primary" href="#" role="button">Primary Button</a>
<a class="btn btn-green" href="#" role="button">Green Button</a>
<a class="btn btn-black" href="#" role="button">Black Button</a>
<a class="btn disabled" role="button">Disabled Button</a>

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

表示サンプル

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

このサンプルのコード

<span class="label">Label</span><span>ラベルサンプル</span>
<span class="label label-blue">New</span><span>ラベルサンプル</span>
<span class="label label-lightblue">Blue</span><span>ラベルサンプル</span>
<span class="label label-green">Green</span><span>ラベルサンプル</span>
<span class="label label-primary">Primary</span><span>ラベルサンプル</span>
<span class="label label-orange">Orange</span><span>ラベルサンプル</span>
<span class="label label-pink">Pink</span><span>ラベルサンプル</span>
<span class="label label-red">Red</span><span>ラベルサンプル</span>
<span class="label label-black">Black</span><span>ラベルサンプル</span>

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

表示サンプル

OK

Point!

Attention!

このサンプルのコード

<p class="label label-green icon-ok">OK</p>
<p class="label label-primary icon-pencil">Point!</p>
<p class="label label-pink icon-search">Check!</p>
<p class="label label-red icon-attention">Attention!</p>

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

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

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

表示サンプル

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

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

このサンプルのコード

<div class="al-c">
<a class="ft22px btn btn-green icon-android">Download App</a> <a class="ft22px btn btn-black icon-apple" href="#">Available on App Store!</a> <a class="ft16px btn icon-basket" href="#">Add to cart</a> <a class="icon-mail btn btn-red" href="#">E-Mail</a> <a class="btn btn-blue icon-facebook" href="#">Like</a> <a class="btn btn-lightblue icon-twitter" href="#">Tweet</a> <a class="btn btn-pink icon-pocket" href="#">Pocket</a>
</div>
DigiPressは、<i class="icon-wordpress ft30px blue"></i>専用のサイトテンプレートです。
レスポンシブ・ウェブ・デザインだから <i class="icon-tablet"></i> でも <i class="icon-desktop"></i> でもフレキシブルにレイアウトを最適化します。

お問い合わせは <a href="tel:0123456789" class="icon-phone ft25px"><span class="serif i b">012-345-6789</span></a> まで。

利用可能なアイコン

  • 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-ie
  • 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
Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly
Send to LINE