HTML／CSS

My Circle Space

デモサイト
ダウンロード数：13回

QRコードをスマートフォンで読み込むと実機でデモサイトを確認できます。

このテンプレートについて

「My Circle Space」はオンラインイベントなどで頒布・展示する作品をまとめるためのWebページテンプレートです。

新作のピックアップ欄や、既出の作品をたくさん掲載できる横スクロールの機能など、作品の一覧をわかりやすくまとめることができます。

01. PCとスマホ共通のレイアウト

画面中央のメインコンテンツの幅はスマートフォンの幅に近いため、PCでもスマートフォンでのレイアウトのイメージをしながらWebページを作ることができます。

02. メインビジュアル

メインビジュアルでは画面いっぱいに画像が表示されるので、ご自身や作品などの世界観をPRできます。さらにそのイベントでの目玉となる新刊や新作を配置することができます。

03. 作品リスト

作品を大きく配置できる1カラムのパターンと、たくさん掲載できる横スクロールのエリアを設けました。

04. その他

通頒だけでなく展示でのご活用もおすすめです。また、SNSリンクをまとめられるプロフィール欄のご用意もあります。

利用料 無料
レスポンシブ 対応済み
デザイン 自由にカスタマイズOK
※著作権の明記について一部制限を設けています。詳しくはこちら
検索避け 対応済み

カスタマイズ

テキストの色や背景画像のカスタマイズはroot.cssで行うことができます。使い方はこちら。

※style.css内での値の適用箇所はダウンロード時点のものです。

Default(Gothic)

Preview
root.css
:root {
  --font-family:"Montserrat", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;/* ゴシック */
  --bg:url(../_img/bg_01.jpg) center center;/* 背景画像のパスと位置 */
  --color-hdrftr:#ffffff;/* header・footerのフォントの色 */
  --color-hdrftrshadow:rgba( 0, 0, 0, 0.3);/* header・footerのフォントの光彩色と濃度 */
  --color-text: #1a1a1a;/* フォントの色 */
  --color-pale: #e8e0e8;/* tableの背景色など */
  --color-accent: #ff386b;/* 強調色 */
  --color-link: #1a1a1a;/* リンク・ボタンの色 */
  --color-wh: #fff;
  --color-grey: #999;
  --color-mgrey: #dddddd;
  --color-lgrey: #f0f0f0;
}

Variation(Mincho)

Preview
root.css
:root {
  --font-family:"Libre Baskerville", "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;/* 明朝 */
  --bg:url(../_img/bg_02.jpg) center center;/* 背景画像のパスと位置 */
  --color-hdrftr:#ffffff;/* header・footerのフォントの色 */
  --color-hdrftrshadow:rgba( 0, 0, 0, 0.3);/* header・footerのフォントの光彩色と濃度 */
  --color-text: #1a1a1a;/* フォントの色 */
  --color-pale: #e8e0e8;/* tableの背景色など */
  --color-accent: #ff386b;/* 強調色 */
  --color-link: #1a1a1a;/* リンク・ボタンの色 */
  --color-wh: #fff;
  --color-grey: #999;
  --color-mgrey: #dddddd;
  --color-lgrey: #f0f0f0;
}

ダウンロードファイルの内容

HTML

トップページ
index.htmlトップページのサンプル
パーツページ
parts.htmlこのテンプレートで予めCSSの設定をしてある見出しやリストなどのデザインの一覧

CSS

「_css」フォルダ内
root.cssテキストの色や背景画像の設定
style.cssデザイン用のスタイルシート

JavaScript

「_js」フォルダ内
script.jsページ内リンクのスクロールの動作

画像

「_img」フォルダ内

継続して利用をする場合は配布元の規約をご確認ください。

bg_01.jpg
bg_02.jpg		背景画像

配布元：pixabay
book_01.jpg
book_02.jpg		表示サンプル用画像
ご自分の作品とは区別してください。

配布元：pixabay
book_size.jpg

icn_all.jpg
icn_18.jpg
icn_18G.jpg

icn_kikan.png
icn_sinkan.png
icn_new.png
icn_pickup.png		自作

色の変更など、加工は自由に行ってください。
他の素材と組み合わせて画像を作成する場合はその素材の規約に従ってください。
img_user.jpgプロフィールイメージ画像

配布元：pixabay
sns_01.png
sns_02.png
sns_03.png		利用しているSNS・サービスアイコンイメージ画像
画像の一部を加工しています。

配布元：MingCute Icon

※各種SNS・サービスの公式アイコンはダウンロードフォルダに同梱していません。取得についてはこちら

外部ファイルの読み込み

jQuery CDNhttps://releases.jquery.com/
Google FontsMontserrat
Noto Serif Japanese
Libre Baskerville

参考元

CSSアニメーションの参考にさせていただきました。

【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）

ダウンロードファイルの更新履歴

Version: 1.0.0リリース2024.12.10
  • このページをシェア

Page Top