事業紹介

SERVICE

GeneratePressのデモ

http://demo.generatepress.com/

見出しサンプル

h1見出しサンプル

h2見出しサンプル

h3見出しサンプル

h4見出しサンプル

h5見出しサンプル
h6見出しサンプル

リストサンプル

  • リストサンプル
  • リストサンプル
  • リストサンプル
  1. リストサンプル
  2. リストサンプル
  3. リストサンプル

テーブルサンプル

見出し 本文 本文
見出し 本文 本文
※Bootstrap仕様 その他参考:HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点 https://liginc.co.jp/web/html-css/html/86739

定義リストサンプル

項目をここに書きます
ここに項目の説明などを書きます
項目2
サンプルサンプルサンプル
項目3
サンプルサンプルサンプルサンプル
項目4
サンプルサンプルサンプルサンプルサンプル

リンク・ボタンサンプル

リンクサンプル ボタンサンプル

グリッドレイアウト

グリッドレイアウトはunsemanticを利用(http://unsemantic.com/css-documentation
grid-80でpush-10の見本(左右に余白)
順番入替え(デスクトップではこちらが右になる・モバイルではこちらが上になる)
順番入替え(デスクトップではこちらが左になる・モバイルではこちらが下になる)
I am third, on desktkop. I am second, on mobile.
I am first, on desktop. I am first, on mobile.
I am second, on desktop. I am 100% wide on mobile.
I’m 30% wide, followed by…
Another 30% column, with 40% empty space between.
デスクトップで非表示
タブレットで非表示
スマホで非表示

テーマについて、tools.css

■ このテーマ GeneratePress(+GP Premium) https://generatepress.com/ ※ダッシュボードの外観>カスタマイズからテーマのスタイルの変更が各種可能です。 ※ヘッダー・フッターへのJSやCSS追加や各所のフックは、外観>GP Hooksから設定できます。 ■ CSSフレームワーク Unsemantic http://unsemantic.com/css-documentation ■ CSSの上書きについて 下記CSSは子テーマ内のcss/tools.cssに収められています。 上書きする場合は子テーマのstyle.cssに記述してください。 ■ ロゴについて(ロゴのバランスを考えてサイズは適宜調整して下さい) ヘッダーロゴ:表示縦幅50px 実際にアップするロゴの縦幅100px フッターロゴ:表示縦幅50px 実際にアップするロゴの縦幅100px ※レスポンシブ対応のため2倍で作成

見出しの装飾例

見出しテキストttl-01サブタイトル

見出しテキストttl-02サブタイトル

見出しテキストttl-03

見出しテキストaddsubサブタイトル

見出しテキストttl-04

見出しテキストttl-04-lv2

見出しテキスト


その他見出し

■ シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 http://fit-jp.com/cssheading20/ ■ シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 http://www.nxworld.net/tips/50-css-heading-styling.html ■ HTMLとCSSのコピペですぐに実装できる見出しデザイン14選 http://uxmilk.jp/52953

マーカー

黄色のマーカー ライムのマーカー 水色のマーカー ピンクのマーカー

ボタンの種類

アイコンはfontawesomeを参照(http://fontawesome.io/icons/

その他ボタン

■ CSSのみで実装するボタンデザインやホバーエフェクト 20+α http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html ■ CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ http://photoshopvip.net/archives/80846 ■ CSSで実装できる、思わず押したくなるボタン用コードスニペット38個まとめ http://photoshopvip.net/archives/88684 ■ コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ http://photoshopvip.net/91115

その他エフェクト・コードスニペット集

■ PhotoshopVipのスニペット一覧 http://photoshopvip.net/tag/html%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88 ■ 今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペット27個まとめ http://photoshopvip.net/archives/86971 ■ 2016年を先取り!コピペで学ぶ HTML/CSS スニペット60個まとめ http://photoshopvip.net/archives/85260 ■ CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ http://photoshopvip.net/archives/80725 ■ CSSスタイリングで表現できる!すごいテキストエフェクト33個まとめ http://photoshopvip.net/archives/75067

リスト装飾

  1. スタップ1の説明
  2. ステップ2の説明
  3. ステップ3の説明
  4. ステップ4の説明
  5. ※ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明
  6. ステップ5の説明
  7. ※ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明
  8. ステップ6の説明
  9. ※ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明
■ CSSで作るリストデザイン30選!オシャレな箇条書きを実現 https://www.yuu-diaryblog.com/2017/03/14/list-design/ ■ コピペで使えるリストデザイン例34選:CSSでおしゃれな箇条書きを作ろう https://saruwakakun.com/html-css/reference/ul-ol-li-design ■ 画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 http://www.nxworld.net/tips/no-image-css-list-icon.html

FAQ装飾

Q

質問内容質問内容質問内容質問内容質問内容質問内容質問内容

A
答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え 答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え

画像装飾例

テキストテキスト

テキストテキスト

■ 画像の上におしゃれに文字やボタンをのせる方法 https://saruwakakun.com/html-css/reference/image-text