diff --git a/aboutus.html b/aboutus.html new file mode 100644 index 0000000..7fdd073 --- /dev/null +++ b/aboutus.html @@ -0,0 +1,190 @@ + + + + +ゼロとは？ - 東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + +
+ +
+ +
+ +

ゼロとは？

+ +

活動内容

+

山形県酒田市を中心に、ご高齢の方々に向けたスマホ教室・相談会を定期的に開催しているサークルです。
+ 依頼や要望に応じて、酒田市以外に庄内地方各地でもスマホ教室・相談会を開催しています。 +

+

スマホ教室・相談会

+ +

サークル誕生の経緯

+

ゼロが行っているスマホ教室・相談会は、大学が行っている課題挑戦型インターンシップから始まりました。
+ 山形県 酒田市役所様より「高齢者がスマホを使いこなせるようにするには？」のテーマをいただき、実際に酒田市内で通信会社に依存しない学生が主体のスマホ相談会を実施し、好評の声をいただきました。
+ その後、このインターンシップに参加した学生を中心にサークル「ゼロ」を立ち上げました。 +

+ +

メンバー募集中！（公益大生向け）

+

現在、活動体制の強化に向けて新規サークルメンバーを募集中です！
詳しくは、下記ボタンからチラシをご確認ください！
+
+ サークルへの加入やご質問は、サークルメンバー か お問い合わせ よりお気軽にお問い合わせください！ +

+

メンバー募集チラシ + お問い合わせ

+ +
+ +
+ + +
+ +
+ +

見出し

+ + + +
+ + +
+ + +
+ +
+ + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..0c69615 --- /dev/null +++ b/contact.html @@ -0,0 +1,184 @@ + + + + +お問い合わせ - 東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + +
+ +
+ +
+ +

お問い合わせ

+ +

ゼロ メールアドレス

+

サークルゼロへのメールでのお問い合わせは、下記アドレスまでお願いします。
※返信には数日程度お時間をいただく場合がございます。

+

koeki.zero＠gmail.com

+ +

ゼロ 公式SNS

+

サークルゼロの活動報告のほかに、各種相談もInstagramやFacebook、LINEで受け付けております。

+

Instagram + Facebook + LINE

+ +

東北公益文科大学 地域共創センター

+

一部のお問い合わせは、 東北公益文科大学 地域共創センター でも受け付けております。

+

地域共創センター　ホームページ

+ +
+
+ + +
+ +
+ +

お問い合わせ

+ + + +
+ + +
+ + +
+ +
+ + + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..567ed31 --- /dev/null +++ b/css/style.css @@ -0,0 +1,1225 @@ +@charset "utf-8"; + + + +/*リセットCSS（sanitize.css）の読み込み +---------------------------------------------------------------------------*/ +@import url("https://unpkg.com/sanitize.css"); + +/*slick.cssの読み込み +---------------------------------------------------------------------------*/ +@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"); + +/*Font Awesomeの読み込み +---------------------------------------------------------------------------*/ +@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"); + + +/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定） +---------------------------------------------------------------------------*/ +:root { + + --primary-color: #825330; /*テンプレートのメインまたはアクセントとなる色*/ + --primary-inverse-color: #fff; /*primary-colorの対として使う色*/ + +} + + +/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用） +---------------------------------------------------------------------------*/ +@keyframes animation1 { + 0% {left: -200px;} + 100% {left: 0px;} +} + + +/*opa1のキーフレーム設定（汎用的） +---------------------------------------------------------------------------*/ +@keyframes opa1 { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + + +/*全体の設定 +---------------------------------------------------------------------------*/ +body * {box-sizing: border-box;} +html,body {height: 100%;} + +body { + margin: 0;padding:0; + font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; /*フォント種類（ゴシック）*/ + -webkit-text-size-adjust: none; + background: #fff; /*背景色*/ + color: #444; /*文字色*/ + line-height: 2; /*行間*/ + border-top: 5px solid var(--primary-color); /*上の線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/ + animation: opa1 0.2s 0.3s both; /*0.3秒の間だけ非表示にし、その後0.2秒かけてフェードイン表示*/ +} + +/*リセット*/ +figure {margin: 0;} +dd {margin: 0;} +nav {margin: 0;padding: 0;} + +/*table全般の設定*/ +table {border-collapse:collapse;} + +/*画像全般の設定*/ +img {border: none;max-width: 100%;height: auto;vertical-align: middle;} + +/*videoタグ*/ +video {max-width: 100%;} + +/*iframeタグ*/ +iframe {width: 100%;} + +/*他*/ +input {font-size: 1rem;} +section + section { + margin-top: 3rem; +} + + +/*文字サイズの設定。 +もしデフォルトを「大」にしたい場合は、js/fontSizeChanger.jsの中のコメント箇所を読んで下さい。 +---------------------------------------------------------------------------*/ +/*「大」ボタンを押した時の文字サイズ*/ +html.f-large { + font-size: 24px; +} + +/*「小」ボタンを押した時の文字サイズ*/ +html.f-small { + font-size: 16px; +} + + +/*リンクテキスト全般の設定 +---------------------------------------------------------------------------*/ +a { + color: #444; /*文字色*/ + transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/ +} + +/*マウスオン時*/ +a:hover { + filter: brightness(1.1); /*少しだけ明るくする*/ +} + + +/*コンテナー（サイト全体を囲むブロック） +---------------------------------------------------------------------------*/ +#container { + height: 100%; + display: flex; /*flexボックスを使う指定*/ + flex-direction: column; /*子要素を縦並びにする*/ + justify-content: space-between; /*並びかたの種類の指定*/ + max-width: 1800px; /*サイトの最大幅。これ以上広がらない。*/ + margin: 0 auto; +} + + +/*コンテンツ（フッター関連「以外」を囲むブロック） +---------------------------------------------------------------------------*/ +#contents { + flex: 1; + padding: 0 3% 100px; /*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/ + background: url(../images/footer_bg.png) repeat-x center bottom / auto 50px; /*下部の背景画像の読み込み。最後の50pxというのが画像の高さの指定部分です。*/ +} + + +/*header（ロゴが入った最上段のブロック） +---------------------------------------------------------------------------*/ +/*ヘッダーブロック*/ +header { + padding: 10px 0; /*上下、左右へのブロック内の余白*/ + position: relative; /*文字サイズボタンや、言語ボタンを絶対配置する為に必用な指定*/ + min-height: 130px; /*最低限の高さ*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*ヘッダーブロック*/ + header { + display: flex; /*flexボックスを使う指定*/ + align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ + padding-right: 230px; /*文字サイズや言語ボタンと重ならないようにする為、適当に余白をとっておきます*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*ロゴ*/ +#logo { + margin: 0; + margin-bottom: 10px; /*下に空けるスペース*/ + width: 150px; /*幅*/ +} + +/*大きな端末用のロゴを非表示に*/ +.pc-logo { + display: none; +} + + + /*画面幅500px「以下」の追加指定。言語バーにロゴが重ならないようにする為。*/ + @media screen and (max-width:500px) { + + /*ロゴ*/ + #logo { + width: calc(100% - 220px); /*ロゴの幅。220pxというのは、言語サイズのボックスと、ハンバーガーアイコンを合わせたおおよその幅で、それを差し引いたサイズをロゴの幅とします。*/ + } + + }/*画面幅500px「以下」の追加指定ここまで*/ + + + /*画面幅650px以上の追加指定*/ + @media screen and (min-width:650px) { + + /*ロゴ*/ + #logo { + margin-bottom: 0; + margin-right: 3%; + width: 300px; /*幅*/ + } + + /*小さな端末用のロゴを非表示に*/ + .sh-logo { + display: none; + } + + /*大きな端末用のロゴを表示する*/ + .pc-logo { + display: block; + } + + }/*画面幅650px以上の追加指定ここまで*/ + + +/*ヘッダーの中央に配置するブロック*/ +#header-center { + display: none; /*非表示にする*/ + text-align: center; +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*ヘッダーの中央に配置するブロック*/ + #header-center { + display: flex; /*flexボックスを使う指定*/ + align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ + width: calc(100% - 300px); /*pxの数値はロゴのwidth*/ + } + #header-center * { + margin: 3px; /*サンプルテンプレートでは、バナー同士に空けるスペースで使っています。*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*ヘッダー右側の言語ボタン +---------------------------------------------------------------------------*/ +/*言語ブロック全体*/ +ul#lang { + margin: 0;padding: 0; + list-style: none; + position: absolute; /*headerに対して絶対配置する*/ + right: 0px; /*右からの配置場所*/ + bottom: 10px; /*下からの配置場所*/ + display: flex; /*flexボックスを使う指定*/ + font-size: 0.85rem; /*文字サイズ。85%*/ +} + +/*ボタン１個あたり*/ +ul#lang a { + display: block;text-decoration: none; + border: 1px solid #ccc; /*枠線の幅、線種、色*/ + border-radius: 5px; /*角を少しだけ丸くする指定*/ + padding: 0 1rem; /*ボタン内の余白。上下、左右へ。*/ + margin: 2px; /*ボタンの外側にとるスペース。ボタン同士の隙間部分です。*/ + background: #fff; /*背景色*/ +} + + +/*文字サイズ変更ボタン +---------------------------------------------------------------------------*/ +/*ボタンブロック全体*/ +#f-size { + background: #fff; /*背景色*/ + box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/ + border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/ + display: flex; /*flexボックスを使う指定*/ + align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ + padding: 10px 15px; /*ブロック内の余白。上下、左右へ。*/ + position: absolute; /*headerに対して絶対配置する*/ + right: 0px; /*右からの配置場所*/ + top: 0px; /*上からの配置場所*/ +} + + /*画面幅900px「以下」の追加指定。ハンバーガーアイコンが出る分、位置をずらす。*/ + @media screen and (max-width:900px) { + + #f-size { + right: 80px; + } + + }/*画面幅900px「以下」の追加指定ここまで*/ + + +/*「文字サイズ」のテキスト*/ +#f-size p { + margin: 0; + margin-right: 10px; /*右側に空けるスペース。ボタンとの間にとるスペースです。*/ + font-size: 0.85rem; /*文字サイズ*/ +} + + /*画面幅500px「以下」の追加指定。*/ + @media screen and (max-width:500px) { + + #f-size p { + display: none; /*画面が狭くなるので、非表示にする*/ + } + + }/*画面幅500px「以下」の追加指定ここまで*/ + + +/*「小」「大」を囲むブロック*/ +#f-size ul { + list-style: none;margin: 0;padding: 0; + display: flex; /*flexボックスを使う指定*/ + align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ +} + +/*「小」ボタン設定*/ +#f-size ul li#f-small::before { + display: block; + content: "小"; /*「小」の文字を出力*/ + font-size: 16px; /*文字サイズ*/ + width: 40px; /*幅*/ + line-height: 40px; /*高さ*/ + text-align: center; /*内容をセンタリング*/ + background: #eee; /*背景色*/ +} +#f-size ul li#f-small { + margin-right: 5px; /*右側に空けるスペース。「大」との間の隙間です。*/ +} + +/*「大」ボタン設定*/ +#f-size ul li#f-large::before { + display: block; + content: "大"; /*「大」の文字を出力*/ + font-size: 30px; /*文字サイズ*/ + width: 50px; /*幅*/ + line-height: 50px; /*高さ*/ + text-align: center; /*内容をセンタリング*/ + background: #eee; /*背景色*/ +} + +/*選択中の設定*/ +#f-size li#f-large.current::before, +#f-size li#f-small.current::before { + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ + color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/ +} + +/*マウスオン時にリンクテキストと同じような手のマークが出るように*/ +#f-size li { + cursor: pointer; +} + + +/*メニューブロック初期設定 +---------------------------------------------------------------------------*/ +/*メニューをデフォルトで非表示*/ +#menubar {display: none;} +#menubar ul {list-style: none;margin: 0;padding: 0;} + +/*上で非表示にしたメニューを表示させる為の設定*/ +.large-screen #menubar {display: block;} +.small-screen #menubar.display-block {display: block;} + +/*3本バーをデフォルトで非表示*/ +#menubar_hdr.display-none {display: none;} + +/*ドロップダウンをデフォルトで非表示*/ +.ddmenu_parent ul {display: none;} + +/*ドロップダウンの親メニューのカーソル表示を変更*/ +a.ddmenu {cursor: default;} + +/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/ +a.ddmenu::before { + font-family: "Font Awesome 6 Free"; /*Font Awesome Free版を使う指定*/ + content: "\f078"; /*使いたいアイコン名（Font Awesome）をここで指定*/ + font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/ + margin-right: 1em; /*アイコンとテキストとの間に空けるスペース*/ + font-size: 0.9rem; +} + + +/*大きな端末、小さな端末共通のメニューブロック設定 +---------------------------------------------------------------------------*/ +/*メニュー１個あたりの設定*/ +#menubar a { + display: block;text-decoration: none; + padding: 0.5rem 0; /*上下、左右へのメニュー内の余白*/ +} + + +/*大きな端末用のメニューブロック設定 +---------------------------------------------------------------------------*/ +/*メニューブロック全体の設定*/ +.large-screen #menubar > nav > ul { + display: flex; /*横並びにする*/ + justify-content: space-between; +} + +/*メニュー１個あたりの設定*/ +.large-screen #menubar li { + flex: 1; /*個々のメニューを均等にし、幅いっぱいまで使う設定*/ + position: relative; /*ドロップダウンの幅となる基準を作っておく*/ + text-align: center; /*テキストをセンタリング*/ +} +.large-screen #menubar li a { + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ + color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/ +} + +/*「大」の文字の選択時のメニューブロック*/ +.f-large #menubar nav ul { + flex-wrap: wrap; /*メニューの折り返しを許可する*/ +} + +/*「大」の文字の選択時のメニュー１個あたり*/ +.f-large #menubar nav > ul > li { + flex: auto; + width: 33%; /*６つのメニューを２段にする為に幅を指定。１段あたり３個になるので、この数字です。*/ +} + + +/*大きな端末、小さな端末、共通のドロップダウンメニュー設定 +---------------------------------------------------------------------------*/ +/*ドロップダウンブロック*/ +.large-screen #menubar ul ul, +.small-screen #menubar ul ul { + animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/ +} + + +/*大きな端末用のドロップダウンメニュー +---------------------------------------------------------------------------*/ +/*ドロップダウンメニューブロック全体*/ +.large-screen #menubar ul ul { + position: absolute;z-index: 100; + width: 100%; +} + + +/*小さな端末用の開閉ブロック +---------------------------------------------------------------------------*/ +/*メニューブロック設定*/ +.small-screen #menubar.display-block { + position: fixed;overflow: auto;z-index: 101; + left: 0px;top: 0px; + width: 100%; + height: 100%; + padding-top: 90px; + background: rgba(0,0,0,0.9); /*背景色*/ + animation: animation1 0.2s both; /*animation1を実行する。0.2sは0.2秒の事。*/ +} + +/*メニュー１個あたりの設定*/ +.small-screen nav > ul:not(.submenu) > li { + border: 1px solid #ccc; /*枠線の幅、線種、色*/ + margin: 1rem; /*メニューの外側に空けるスペース*/ + border-radius: 5px; /*角を丸くする指定*/ + padding: 0 2rem; /*メニュー内の余白。上下、左右へ。*/ +} + +/*文字色*/ +.small-screen #menubar, .small-screen #menubar a { + color: #fff; +} + + +/*３本バー（ハンバーガー）アイコン設定 +---------------------------------------------------------------------------*/ +/*３本バーを囲むブロック*/ +#menubar_hdr { + animation: opa1 0.2s 0.5s both; /*0.5秒待機後、0.2秒かけてフェードイン表示*/ + position: fixed;z-index: 101; + cursor: pointer; + right: 30px; /*右からの配置場所指定*/ + top: 30px; /*上からの配置場所指定*/ + padding: 16px 14px; /*上下、左右への余白*/ + width: 46px; /*幅（３本バーが出ている場合の幅になります）*/ + height: 46px; /*高さ*/ + display: flex; /*flexボックスを使う指定*/ + flex-direction: column; /*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/ + justify-content: space-between; /*並びかたの種類の指定*/ + background: rgba(0,0,0,0.5); /*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/ +} + +/*バー１本あたりの設定*/ +#menubar_hdr span { + display: block; + transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/ + border-top: 1.5px solid #fff; /*線の幅、線種、色*/ +} + +/*×印が出ている状態の3本バーの背景色*/ +#menubar_hdr.ham { + background: #ff0000; +} + +/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/ +#menubar_hdr.ham span:nth-of-type(1), +#menubar_hdr.ham span:nth-of-type(3) { + transform-origin: center center; /*変形の起点。センターに。*/ + width: 20px; /*バーの幅*/ +} + +/*×印が出ている状態の設定。※１本目のバー。*/ +#menubar_hdr.ham span:nth-of-type(1){ + transform: rotate(45deg) translate(3.8px, 5px); /*回転45°と、X軸Y軸への移動距離の指定*/ +} + +/*×印が出ている状態の設定。※３本目のバー。*/ +#menubar_hdr.ham span:nth-of-type(3){ + transform: rotate(-45deg) translate(3.8px, -5px); /*回転-45°と、X軸Y軸への移動距離の指定*/ +} + +/*×印が出ている状態の設定。※２本目のバー。*/ +#menubar_hdr.ham span:nth-of-type(2){ + display: none; /*２本目は使わないので非表示にする*/ +} + + +/*mainブロック設定 +---------------------------------------------------------------------------*/ +/*mainブロックの設定*/ +main { + margin: 2rem 0; /*ブロックの外側に空けるスペース*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*2カラムで使う為の指定*/ + main.c2 { + display: flex; /*flexボックスを使う指定*/ + justify-content: space-between; /*並びかたの種類の指定*/ + } + + /*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/ + main.c2 .main { + width: calc(100% - 260px); /*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/ + order: 1; + } + + /*2カラムの中にある.sub要素*/ + main.c2 .sub { + width: 230px; /*幅*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*mainブロック内のh2タグ*/ +main h2 { + margin: 0 0 1rem; /*h2の外側にとるスペース。上、左右、下への順番。*/ + padding-left: 1rem; /*左側に１文字分の余白を作る*/ + letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/ + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ + color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/ +} + +/*h3タグ*/ +main h3 { + margin: 0 0 1rem; /*h2の外側にとるスペース。上、左右、下への順番。*/ + letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/ + border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/ +} + +/*h3の左側のアクセントライン*/ +main h3::before { + content: ""; + border-left: 3px solid var(--primary-color); /*左側のアクセントラインの幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/ + padding-right: calc(1rem - 3px); /*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/ +} + +/*h4タグ*/ +main h4 { + margin: 0 1rem 1rem; /*h4の外側にとるスペース。上、左右、下への順番。*/ +} + +/*pタグ*/ +main p { + margin: 0 1rem 2rem; /*pの外側にとるスペース。上、左右、下への順番。*/ +} + +/*微調整*/ +main p + p { + margin-top: -1rem; /*段落が続いた場合に、少し上に詰める。*/ +} + + +/*subブロック設定 +---------------------------------------------------------------------------*/ +.sub h3::before {border: none;padding: 0;} +/*ブロック内のh3タグ*/ +.sub h3 { + margin: 0;border: none; + font-weight: normal; + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ + color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/ + text-align: center; + padding: 0.5em; +} +.sub h3 a {color: inherit;} + + +/*サブメニュー設定 +---------------------------------------------------------------------------*/ +/*サブメニューブロック全体*/ +.submenu { + padding: 0; + margin: 0 0 1rem; /*上、左右、下へのマージン*/ +} + +/*メニュー１個あたり*/ +.submenu li { + border-bottom: 1px solid rgba(0,0,0,0.1); /*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/ +} +.submenu a { + display: block;text-decoration: none; + background: #fff; /*背景色*/ + padding: 0.2rem 1rem; /*上下、左右へのメニュー内の余白*/ +} + +/*アイコン（Font Awesome）*/ +.submenu a::before { + transition: 0.3s; + font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/ + content: "\f0da"; /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/ + color: #ABABAB; /*アイコンの色*/ + padding-right: 0.8em; /*アイコンとテキストの間の余白*/ + font-weight: bold; /*この設定がないとアイコンが出ない場合があります*/ +} + +/*マウスオン時のアイコン設定*/ +.submenu a:hover::before { + color: var(--primary-color); /*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/ +} + + +/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています） +---------------------------------------------------------------------------*/ +/*ボックス全体の設定*/ +.box1 { + background: rgba(0,0,0,0.05); /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/ + padding: 10px; /*ボックス内の余白*/ + border-radius: 5px; /*角を丸くする指定*/ + margin-bottom: 1rem; /*ボックスの下に空けるスペース*/ +} + +/*box1内で使った場合、下のマージンをなくす*/ +.sub .box1 .submenu { + margin-bottom: 0; +} + + + +/*フッターのコンテンツ（役場住所やマップが入っているブロック） +---------------------------------------------------------------------------*/ +/*ブロック全体*/ +#footer-contents { + background: #444; /*背景色*/ + color: #fff; /*文字色*/ + padding: 50px 3%; /*上下、左右へのボックス内の余白*/ +} +#footer-contents a { + color: inherit; +} + +/*左側のブロック*/ +#footer-contents .left { + margin-bottom: 50px; /*下に空けるスペース*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + #footer-contents { + display: flex; /*flexボックスを使う指定*/ + justify-content: space-between; /*並びかたの種類の指定*/ + align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ + } + + /*左側のブロック*/ + #footer-contents .left { + margin-bottom: 0; /*下のマージンをリセット*/ + width: 50%; /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/ + } + #footer-contents .right { + width: 50%; /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/ + padding-left: 3%; /*左側に空ける余白。左右ブロックの間の隙間です。*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*テーブル（week）footer-contents内で使っています。 +---------------------------------------------------------------------------*/ +/*テーブル１行目に入った見出し部分（※caption）*/ +.week caption { + border: 1px solid #ccc; /*枠線の幅、線種、色*/ + border-bottom: none; /*下線だけ消す*/ + background: #333; /*背景色*/ + padding: 0.5rem 1rem; /*caption内の余白。上下、左右に１文字分ずつとる。*/ +} + +/*weekテーブルブロック設定*/ +.week { + width: 100%; + table-layout: fixed; + text-align: center; /*テーブル内のテキストをセンタリング*/ +} +.week, .week td, .week th { + border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色。*/ +} + + +/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。 +---------------------------------------------------------------------------*/ +.iframe-box { + width: 100%; + height: 0; + padding-top: 56.25%; /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/ + position: relative; + overflow: hidden; +} +.iframe-box iframe { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; +} + + +/*フッターメニュー設定 +---------------------------------------------------------------------------*/ +/*ボックス全体の設定*/ +#footermenu { + background: #333; /*背景色*/ + color: #999; /*文字色*/ + font-size: 0.8em; /*文字サイズ。*/ + padding: 20px 3%; /*上下、左右へのボックス内の余白*/ + display: flex; /*flexボックスを使う指定*/ + justify-content: space-between; /*並びかたの種類の指定*/ + align-items: flex-start; /*垂直揃えの指定。上に配置されるように。*/ +} + +/*ボックス内のリンクテキスト設定*/ +#footermenu a { + text-decoration: none; + color: inherit; +} + +/*ulタグ（メニューの１列あたり）*/ +#footermenu ul { + margin: 0;list-style: none; + padding: 0 0.3rem; + flex: 1; +} + +/*メニューの見出し(title)*/ +#footermenu .title { + font-weight: bold; /*太字にする*/ + color: #ccc; /*文字色*/ + padding-bottom: 5px; /*下に空けるスペース*/ +} + + +/*フッター設定 +---------------------------------------------------------------------------*/ +footer { + font-size: 0.8rem; /*文字サイズ*/ + background: #000; /*背景色*/ + color: #fff; /*文字色*/ + text-align: center; /*内容をセンタリング*/ + padding: 20px; /*ボックス内の余白*/ +} + +/*リンクテキスト*/ +footer a {color: inherit;text-decoration: none;} + +/*著作部分*/ +footer .pr {display: block;} + + +/*「お知らせ」ブロック +---------------------------------------------------------------------------*/ +/*お知らせブロック*/ +.new { + margin: 0; + padding: 0 1rem; /*上下、左右へのボックス内の余白*/ +} + +/*日付(dt)、記事(dd)共通設定*/ +.new dt, +.new dd { + padding: 5px 0; /*上下、左右へのボックス内の余白*/ +} + +/*日付の横のマーク（共通設定）*/ +.new dt span { + display: none; /*小さな端末では非表示にしておく。*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*お知らせブロック*/ + .new { + display: flex; /*flexボックスを使う指定*/ + flex-wrap: wrap; /*折り返す指定*/ + } + + /*日付(dt)設定*/ + .new dt { + width: 14em; /*幅。14文字(em)分。アイコン分も含んだ幅にします。*/ + display: flex; /*flexボックスを使う指定*/ + justify-content: space-between; /*日付とアイコンをそれぞれ端に寄せる*/ + } + + /*日付の横のマーク（共通設定）*/ + .new dt span { + display: inline-block; /*表示させる*/ + width: 7em; /*幅。7文字(em)分。*/ + background: #999; /*背景色*/ + color: #fff; /*文字色*/ + font-size: 0.8em; /*文字サイズを親要素の80%に。*/ + text-align: center; /*文字をセンタリング*/ + margin-right: 1em; /*アイコンの右側に空けるスペース*/ + align-self: flex-start; /*高さを間延びさせない指定*/ + line-height: 1.8; /*行間を少し狭く*/ + position: relative;top: 0.4em; /*上下の配置バランスの微調整*/ + border-radius: 2px; /*角を丸くする指定*/ + } + + /*icon-bg1設定。サンプルテンプレートでは「重要」と書いてあるマーク*/ + .new dt span.icon-bg1 { + background: #cd0000; /*背景色*/ + } + + /*icon-bg2設定。サンプルテンプレートでは「サービス」と書いてあるマーク*/ + .new dt span.icon-bg2 { + background: #006acd; /*背景色*/ + } + + /*記事(dd)設定*/ + .new dd { + width: calc(100% - 14em); /*「14em」は上の「.new dt」のwidthの値です。*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*.listブロック共通 +---------------------------------------------------------------------------*/ +.list { + position: relative; /*子要素のアイコンを絶対配置する為の設定*/ +} + +/*ボックス内のアイコン*/ +.list .list-icon { + font-size: 0.6rem; /*文字サイズ*/ + background: #ff0000; /*背景色*/ + color: #fff; /*文字色*/ + width: 50px; /*幅*/ + line-height: 50px; /*高さ*/ + border-radius: 50%; /*角丸のサイズ。円形になります。*/ + text-align: center; /*テキストをセンタリング*/ + position: absolute; /*親のブロックのrelative（この場合は.list）に対して絶対配置する*/ + left: -10px; /*listブロックに対して左からの配置場所の指定*/ + top: -10px; /*listブロックに対して上からの配置場所の指定*/ +} + +/*figure画像*/ +.list figure { + margin-bottom: 2rem; /*下に空けるスペース。２文字分。*/ +} + + +/*３列タイプのボックス +---------------------------------------------------------------------------*/ +/*ボックス１個あたり*/ +.list-grid .list { + margin-bottom: 30px; /*ボックス同士の上下間に空けるスペース*/ + padding: 20px; /*ボックス内の余白*/ + background: #fff; /*背景色*/ + box-shadow: 5px 5px 20px rgba(0,0,0,0.1); /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/ +} + +/*dl（下のdtとddを囲むブロック）*/ +.list-grid .list dl { + height: 10em; /*高さ*/ + overflow: auto; /*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/ +} + +/*dt（タイトル、日付が入っている所）*/ +.list-grid .list dl dt { + color: #333; /*文字色*/ + font-weight: bold; /*太字にする*/ +} + +/*dd（サンプルテキストが入っている所）*/ +.list-grid .list dl dd { + margin-bottom: 0.5em; /*下に空けるスペース*/ +} + +/*ボックス内のh4タグ*/ +.list-grid .list h4 { + margin: 0; + padding: 1rem; /*余白。１文字分。*/ +} + +/*ボックス内のh4タグ内のiタグ（アイコンの事）*/ +.list-grid .list h4 i { + transform: scale(1.5); /*デフォルトの1.5倍に*/ + margin-right: 1rem; /*右側に空けるスペース。テキストとアイコンの隙間部分です。*/ +} + +/*タイトルの背景色バリエーション（共通）*/ +.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6 { + color: #fff; /*文字色*/ + margin-bottom: 1rem !important; /*下に空けるスペース*/ +} +.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a { + display: block; + color: inherit; +} + +/*bg-color0への追加指定*/ +.bg-color0 { + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ +} +/*bg-color1への追加指定*/ +.bg-color1 { + background: #ff9a18; /*背景色*/ +} +/*bg-color2への追加指定*/ +.bg-color2 { + background: #189aff; /*背景色*/ +} +/*bg-color3への追加指定*/ +.bg-color3 { + background: #dd3d8c; /*背景色*/ +} +/*bg-color4への追加指定*/ +.bg-color4 { + background: #6f3eb9; /*背景色*/ +} +/*bg-color5への追加指定*/ +.bg-color5 { + background: #1b7a1e; /*背景色*/ +} +/*bg-color6への追加指定*/ +.bg-color6 { + background: #7a3a1b; /*背景色*/ +} + +/*ボックス内のpタグ*/ +.list-grid .list p { + margin: 0; +} + +/*ボックス内のfigure画像*/ +.list-grid .list figure { + margin-bottom: 1rem; /*下に空けるスペース*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*listブロック全体を囲むブロック*/ + .list-grid { + display: flex; /*flexボックスを使う指定*/ + flex-wrap: wrap; /*折り返す指定*/ + } + + /*１個あたりのボックス設定*/ + .list-grid .list { + width: 32%; /*幅。３列になります。*/ + margin-right: 2%; /*右側へのマージン。ボックス同士の左右の余白です。*/ + } + + /*1カラムにしたい場合*/ + .list-grid.c1 .list { + width: 100%; + margin-right: 0; + } + /*1カラムにしたい場合のdl（dtとddを囲むブロック）*/ + .list-grid.c1 .list dl { + height: auto; + } + + /*3の倍数目のボックスの右側のマージンをなくす*/ + .list-grid .list:nth-of-type(3n) { + margin-right: 0; + } + + /*ボックス内のtextブロック*/ + .list-grid .list .text { + flex: 1; + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*btnの設定（「btn1」と「btn2」） +---------------------------------------------------------------------------*/ +/*ボタン共通*/ +a.btn1, a.btn2 { + display: inline-block;text-decoration: none; + letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/ + border-radius: 3px; /*角を丸くする指定*/ + padding: 0.3rem 2rem; /*上下、左右へのボタン内の余白*/ + box-shadow: 1px 2px 3px rgba(0,0,0,0.2); /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/ + transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/ +} + +/*iタグ共通（アイコンの事）*/ +a.btn1 i, a.btn2 i { + margin-left: 20px; +} + +/*btn1の追加指定*/ +a.btn1 { + background: #fff; /*背景色*/ + color: #444; /*文字色*/ + border: 1px solid #ccc; /*枠線の幅、線種、色*/ +} + +/*btn1内のiタグ（アイコンの事）*/ +a.btn1 i { + color: var(--primary-color); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/ +} + +/*btn2の追加指定*/ +a.btn2 { + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ + color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/ +} + + +/*スライドショー（slickを使用） +---------------------------------------------------------------------------*/ +/*画像を囲むブロック*/ +.mainimg { + margin-bottom: 80px; /*画像の下に空けるスペース*/ +} + +/*丸いページナビボタン全体を囲むブロック*/ +ul.slick-dots { + margin:0;padding: 0; + line-height: 1; + width: 100%; + text-align: center; + position: absolute; + bottom: -30px; /*下からの配置場所指定。ボタンを画像の下に移動します。*/ +} + +/*丸いページナビボタン１個あたりの設定*/ +ul.slick-dots li { + display: inline-block; + margin: 0 10px; + cursor: pointer; +} + +/*buttonタグ*/ +ul.slick-dots li button { + border: none;padding: 0; + display: block; + text-indent: -9999px; /*デフォルトで文字が出るので画面の外に追い出す指定*/ + width: 12px; /*ボタンの幅*/ + height: 12px; /*ボタンの高さ*/ + border-radius: 50%; /*丸くする指定*/ + cursor: pointer; /*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/ + background: #ccc; /*背景色。白。*/ +} + +/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/ +ul.slick-dots li.slick-active button { + background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/ +} + + +/*FAQ +---------------------------------------------------------------------------*/ +/*FAQボックス全体*/ +.faq { + padding: 0 1rem; /*上下、左右へのボックス内の余白*/ +} + +/*質問*/ +.faq dt { + border-radius: 3px; /*枠を角丸にする指定*/ + margin-bottom: 1rem; /*下に空けるスペース*/ + background: #fff; /*背景色*/ + border: 1px solid #ccc; /*枠線の幅、線種、色*/ + text-indent: -2rem; /*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/ + padding: 5px 1em 5px 3em; /*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/ +} + +/*アイコン（Font Awesome）*/ +.faq dt::before { + font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/ + content: "\f059"; /*アイコンのコード*/ + color: var(--primary-color); /*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/ + padding-right: 1rem; /*アイコンとテキストとの間のスペース*/ +} + +/*回答*/ +.faq dd { + padding: 5px 1rem 30px 3rem; /*ボックス内の余白**/ +} + +/*opencloseを適用した要素のカーソル*/ +.openclose { + cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/ +} + + +/*トップページの「キャンペーン中」ボタン +---------------------------------------------------------------------------*/ +#message a { + text-decoration: none;display: block; + writing-mode: vertical-rl; + text-orientation: upright; + background: #00c60d;/*背景色*/ + color: #fff; /*文字色*/ + position: fixed; /*スクロールしてもボタンが移動しないようにする指定。移動させたいならfixedをabsoluteにして下さい。*/ + z-index: 100; + right: 0px; /*ボタンの右からの配置場所指定*/ + top: 170px; /*ボタンの上からの配置場所指定*/ + padding: 20px 15px; /*ボタン内の余白。上下、左右。*/ + border-radius: 10px 0px 0px 10px; /*角を丸くする指定。左上、右上、右下、左下の順番。*/ + letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/ +} + +/*ふきだしアイコン*/ +#message i { + transform: scale(1.3); /*1.3倍に*/ + margin-bottom: 10px; /*下に空ける余白*/ +} + + +/*テーブル（ta1） +---------------------------------------------------------------------------*/ +/*テーブル１行目に入った見出し部分（※caption）*/ +.ta1 caption { + font-weight: bold; /*太字に*/ + padding: 10px 5px; /*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/ + background: #555; /*背景色*/ + color: #fff; /*文字色*/ + margin-bottom: 15px; /*下に空けるスペース*/ + border-radius: 5px; /*角を丸くする指定*/ +} + +/*ta1テーブルブロック設定*/ +.ta1 { + border-top: 1px solid #999; /*テーブルの一番上の線。幅、線種、色*/ + width: 100%; + margin: 0 auto 2rem; /*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/ +} + +/*tr（１行分）タグ設定*/ +.ta1 tr { + border-bottom: 1px solid #999; /*テーブルの下線。幅、線種、色*/ +} + +/*th（左側）、td（右側）の共通設定*/ +.ta1 th, .ta1 td { + padding: 10px 5px; /*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/ + word-break: break-all; /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/ +} + +/*th（左側）のみの設定*/ +.ta1 th { + width: 30%; /*幅*/ + text-align: left; /*左よせにする*/ + background: #eee; /*背景色*/ +} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + /*テーブル１行目に入った見出し部分（※caption）*/ + .ta1 caption { + padding: 5px 15px; /*上下、左右へのボックス内の余白*/ + } + + /*th（左側）、td（右側）の共通設定*/ + .ta1 th, .ta1 td { + padding: 20px 15px; /*上下、左右へのボックス内の余白*/ + } + + /*th（左側）のみの設定*/ + .ta1 th { + width: 20%; /*幅*/ + } + + }/*画面幅900px以上の追加指定ここまで*/ + + +/*PAGE TOP（↑）設定 +---------------------------------------------------------------------------*/ +.pagetop-show {display: block;} + +/*ボタンの設定*/ +.pagetop a { + display: block;text-decoration: none;text-align: center;z-index: 99; + position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/ + right: 20px; /*右からの配置場所指定*/ + bottom: 20px; /*下からの配置場所指定*/ + color: #fff; /*文字色*/ + font-size: 1.5em; /*文字サイズ*/ + background: rgba(0,0,0,0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/ + width: 60px; /*幅*/ + line-height: 60px; /*高さ*/ + border-radius: 50%; /*円形にする*/ +} + + +/*その他 +---------------------------------------------------------------------------*/ +.clearfix::after {content: "";display: block;clear: both;} +.color-check, .color-check a {color: #ff0000 !important;} +.color-theme, .color-theme a {color: var(--primary-color) !important;} +.c {text-align: center !important;} +.r {text-align: right !important;} +.ws {width: 98%;display: block;} +.wl {width: 98%;display: block;} +.mb30 {margin-bottom: 30px !important;} +.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;} +.small {font-size: 0.75em;} +.large {font-size: 3em; letter-spacing: 0.1em;} +.pc {display: none;} +.dn {display: none !important;} +.img {margin: 0 0 1rem;} +.block {display: block !important;} + + /*画面幅900px以上の追加指定*/ + @media screen and (min-width:900px) { + + .ws {width: 48%;display: inline;} + .sh {display: none;} + .pc {display: block;} + + }/*画面幅900px以上の追加指定ここまで*/ diff --git a/eventinfo.html b/eventinfo.html new file mode 100644 index 0000000..d99ddf6 --- /dev/null +++ b/eventinfo.html @@ -0,0 +1,202 @@ + + + + +イベント情報 - 東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + +
+ +
+ +
+ +

イベント情報

+

募集中・開催前のイベント一覧

+

イベントへご参加を希望される方は、各主催者へお問い合わせください。

+

現在、開催予定のイベントはありません。

+ + + +
+ +
+ + +
+ +
+ +

イベント情報

+ + + +
+ + +
+ + +
+ +
+ + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/eventrepo.html b/eventrepo.html new file mode 100644 index 0000000..fa694da --- /dev/null +++ b/eventrepo.html @@ -0,0 +1,264 @@ + + + + +活動報告 - 東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + +
+ +
+ +
+ +

活動報告

+ +

2025年10月26日　北新橋二丁目自治会様 スマホ相談会

+

北新橋二丁目自治会様のご依頼で、北新橋二丁目自治会館にて2回目となるスマホ相談会を開催しました！
+ 前回5月の開催から日数は経ちましたが、前回に引き続きご参加いただいた方々も多く、大変和やかな雰囲気で開催することができました。
+ また、今回から初めてご参加いただいた方々も、スマホの操作に関して学んだ点をお互いに教え合いながら解決していただけたかと思います。
+ 次回は、同会場にて2月15日（日）の開催を予定しております。ぜひ、お友達をお誘いのうえ、奮ってご参加ください！

+
+
+
+ +

2025年10月25日, 26日　イオン三川店様 スマホセミナー

+

10月25日（土）・26日（日）の2日間、イオンモール三川にて、当サークルによる「スマホセミナー」を開催しました！
+ 当日は、イオンのお得で便利な「iAEON」アプリの紹介を中心に、スマホ全般のお悩みに関する相談会を実施しました。
+ セミナーに参加していただいた方には、「ティッシュペーパー」や「じゃがりこ」の無料クーポンを配布させていただきました。
+ 2日間を通して、たくさんの方にお越しいただきありがとうございました！
+ イオン三川店様とも協議の上、今後もこういった活動を続けさせていただけるよう精進させていただきたいと思いますので、応援よろしくお願いします。

+
+
+
+ + + +

2025年10月11日, 12日　公翔祭 Smart Fes!

+

10月11日・12日の2日間、本学「公翔祭」にてゼロによる「Smart Fes!」を出展しました！
+ 当日は、「公益大生によるスマホ相談会」以外にも、初開催となる「フォトコンテスト」や、これまでの活動をまとめた「令和7年度サークル活動レポート」を展示しました。
+ 学内外から大変多くの皆様にご参加いただきました。
+ 来年のご参加もお待ちしております！

+
+
+
+ +

2025年9月28日　酒田玉芳庵様 スマホ教室

+

酒田玉芳庵様にて「第三回公益大生によるスマホ教室」を開催しました！
+ 今回の教室では、Amazonプライム・ビデオやネットフリックス等の動画配信サービスについて簡単に学んでいただきました。
+ 映像サービスには、定額料金を支払うことでサービスを受けることのできる「サブスクリプション（サブスク）」サービスがありますが、なかにはYouTubeや Abemaといった無料のものがあることも体験していただけたかと思います。
+ ぜひ、皆さんに合った最適な動画配信サービスを見つけてみて下さい！

+
+
+
+ +

2025年9月9日　共創カフェ スマホサポート教室

+

9月9日（火）に東北公益文科大学内の酒田市公益研修センター 中研究室1にて、共創カフェ「公益大生と学ぶ！ スマホサポート教室」を開催しました！
+ 今回の教室では、LINEとInstagramの二部制での講義を行い、それぞれの利用方法や特徴について一緒に学んでいただきました。
+ また、スマホの利用に関する「お悩み相談会」も常時開設し、LINEやInstagram以外のアプリや本体の設定等といったさまざまなお悩みについて解決していただきました。
+ 初の学内開催となりましたが、我々の想定を超える多くの皆様にお越しいただき、サークル一同感謝申し上げます。

+
+
+
+ +

2025年9月2日, 3日　酒田市役所様 PayPay使い方相談会

+

2025年9月、酒田市でPayPayに関するお得なキャンペーンを開催されました。
+ それに伴い、酒田市役所では9月2日と3日の2日間、市役所1階のフリースペースにて当サークル学生による「PayPay使い方相談会」を開催しました！
+ 本相談会では、PayPayの基本的な使い方について「チャージの方法」や「支払いの方法」などの疑問をご解決していただきました。
+ また、PayPayのアプリ内での使い方に留まらず、PayPayを利用した通販やウェブサイトでの支払いについても発展的に学んでいただくことができました。

+
+
+
+ +

2025年8月24日　酒田玉泉院様 スマホ教室

+

酒田玉泉院様にて「第二回公益大生によるスマホ教室」を開催しました！
+ 今回の第二回目では、Googleでの「検索」や「ChatGPT」を活用してご自身の疑問について調べる方法を一緒に学んでいただきました。
+ 第二回目の教室でしたが、新規の生徒さんもたくさんいらしてくださり、和気あいあいとした教室になりました！

+
+
+
+ +

2025年7月27日　酒田玉芳庵様 スマホ教室

+

酒田玉芳庵様にて「第一回公益大生によるスマホ教室」を開催しました！
+ 初回の第一回目は、LINEの基本的な操作や便利機能についてご紹介させて頂きました。また、講座以外にも皆さんと直接お話しをさせていただき、とても和やかな教室になりました！

+
+
+
+ +

2025年5月24日　北新橋二丁目自治会様 スマホ相談会

+

北新橋二丁目自治会様のご依頼で、当自治会館で高齢者向けのスマホ相談会を開催させていただきました！
+ 日頃スマホを利用する際のお悩みについてご相談頂き、無事解決していただくことが出来ました。
+ 皆さん、ご参加ありがとうございました！

+
+
+
+ + +
+ +
+ +

そのほかの活動報告は、サークル公式SNSをチェック！

+

Instagram + Facebook

+ +
+
+ + +
+ +
+ +

活動報告

+ + + +
+ + +
+ + +
+ +
+ + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/file-up/member-bosyu.pdf b/file-up/member-bosyu.pdf new file mode 100644 index 0000000..30ca9ef --- /dev/null +++ b/file-up/member-bosyu.pdf Binary files differ diff --git a/file-up/phone-school.pdf b/file-up/phone-school.pdf new file mode 100644 index 0000000..2695cc7 --- /dev/null +++ b/file-up/phone-school.pdf Binary files differ diff --git a/images/footer_bg.png b/images/footer_bg.png new file mode 100644 index 0000000..a02fddf --- /dev/null +++ b/images/footer_bg.png Binary files differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..3a61f13 --- /dev/null +++ b/images/logo.png Binary files differ diff --git a/images/logo_fav.png b/images/logo_fav.png new file mode 100644 index 0000000..e3ff25c --- /dev/null +++ b/images/logo_fav.png Binary files differ diff --git a/images/logo_s.png b/images/logo_s.png new file mode 100644 index 0000000..b6948f7 --- /dev/null +++ b/images/logo_s.png Binary files differ diff --git a/images/member-bosyu.jpg b/images/member-bosyu.jpg new file mode 100644 index 0000000..59eab3c --- /dev/null +++ b/images/member-bosyu.jpg Binary files differ diff --git a/images/repo/aeon-mikawa_20251025.jpg b/images/repo/aeon-mikawa_20251025.jpg new file mode 100644 index 0000000..b9ebcfe --- /dev/null +++ b/images/repo/aeon-mikawa_20251025.jpg Binary files differ diff --git a/images/repo/koeki-kosyosai_20251012.jpg b/images/repo/koeki-kosyosai_20251012.jpg new file mode 100644 index 0000000..be4856d --- /dev/null +++ b/images/repo/koeki-kosyosai_20251012.jpg Binary files differ diff --git a/images/repo/koeki-kyoso_20250909.jpg b/images/repo/koeki-kyoso_20250909.jpg new file mode 100644 index 0000000..5587b6c --- /dev/null +++ b/images/repo/koeki-kyoso_20250909.jpg Binary files differ diff --git a/images/repo/sakata-gyokuhoan_20250727.jpg b/images/repo/sakata-gyokuhoan_20250727.jpg new file mode 100644 index 0000000..67d4997 --- /dev/null +++ b/images/repo/sakata-gyokuhoan_20250727.jpg Binary files differ diff --git a/images/repo/sakata-gyokuhoan_20250928.jpg b/images/repo/sakata-gyokuhoan_20250928.jpg new file mode 100644 index 0000000..184e139 --- /dev/null +++ b/images/repo/sakata-gyokuhoan_20250928.jpg Binary files differ diff --git a/images/repo/sakata-gyokusenin_20250824.jpg b/images/repo/sakata-gyokusenin_20250824.jpg new file mode 100644 index 0000000..c480c64 --- /dev/null +++ b/images/repo/sakata-gyokusenin_20250824.jpg Binary files differ diff --git a/images/repo/sakata-kitashinbashi_20250524.jpg b/images/repo/sakata-kitashinbashi_20250524.jpg new file mode 100644 index 0000000..126816c --- /dev/null +++ b/images/repo/sakata-kitashinbashi_20250524.jpg Binary files differ diff --git a/images/repo/sakata-kitashinbashi_20251026.jpg b/images/repo/sakata-kitashinbashi_20251026.jpg new file mode 100644 index 0000000..019788e --- /dev/null +++ b/images/repo/sakata-kitashinbashi_20251026.jpg Binary files differ diff --git a/images/repo/sakata-paypay_20250903.jpg b/images/repo/sakata-paypay_20250903.jpg new file mode 100644 index 0000000..4598fc3 --- /dev/null +++ b/images/repo/sakata-paypay_20250903.jpg Binary files differ diff --git a/images/slide/1.jpg b/images/slide/1.jpg new file mode 100644 index 0000000..d10759e --- /dev/null +++ b/images/slide/1.jpg Binary files differ diff --git a/images/slide/2.jpg b/images/slide/2.jpg new file mode 100644 index 0000000..bc73b96 --- /dev/null +++ b/images/slide/2.jpg Binary files differ diff --git a/images/slide/3.jpg b/images/slide/3.jpg new file mode 100644 index 0000000..aa26f30 --- /dev/null +++ b/images/slide/3.jpg Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dd9d937 --- /dev/null +++ b/index.html @@ -0,0 +1,208 @@ + + + + +東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + + + + + + +
+ +
+ +

お知らせ

+ +
+ + +
2025/11/08活動報告
+
これまでの活動内容を、活動報告に掲載しました！
+ +
2025/11/08重要
+
サークルゼロ 公式ホームページを開設しました！
これから、サークルに関する情報をどんどん発信していきますので、お楽しみに！
+ +
+ +
+ +
+ +

イベント情報

+

現在、開催予定のイベントはありません。

+ + + +

もっと見る

+ +
+ +
+ +
+ + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + diff --git a/js/fontSizeChanger.js b/js/fontSizeChanger.js new file mode 100644 index 0000000..99460e9 --- /dev/null +++ b/js/fontSizeChanger.js @@ -0,0 +1,25 @@ +$(function() { + function changeFontSize(buttonID, className) { + $('html').removeClass('f-small f-large'); + $('html').addClass(className); + $('#f-size .current').removeClass('current'); // #f-size内の.currentクラスを削除 + $(buttonID).addClass('current'); + window.sessionStorage.setItem('CHSIZE', className); // セッションストレージに設定保存 + } + + // ページロード時にセッションストレージからフォントサイズを読み込み + const storedSize = window.sessionStorage.getItem('CHSIZE'); + if (storedSize) { + changeFontSize(`#f-size #${storedSize}`, storedSize); + } else { + changeFontSize('#f-small', 'f-small'); // デフォルト設定。「大」をデフォルトにしたい場合は('#f-large', 'f-large')に変更して下さい。 + } + + $('#f-size #f-small').click(function() { + changeFontSize('#f-small', 'f-small'); + }); + + $('#f-size #f-large').click(function() { + changeFontSize('#f-large', 'f-large'); + }); +}); diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..bda9e68 --- /dev/null +++ b/js/main.js @@ -0,0 +1,200 @@ + +//=============================================================== +// debounce関数 +//=============================================================== +function debounce(func, wait) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + func.apply(context, args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + + +//=============================================================== +// メニュー関連 +//=============================================================== + +// 変数でセレクタを管理 +var $menubar = $('#menubar'); +var $menubarHdr = $('#menubar_hdr'); + +// menu +$(window).on("load resize", debounce(function() { + if(window.innerWidth < 900) { // ここがブレイクポイント指定箇所です + // 小さな端末用の処理 + $('body').addClass('small-screen').removeClass('large-screen'); + $menubar.addClass('display-none').removeClass('display-block'); + $menubarHdr.removeClass('display-none ham').addClass('display-block'); + } else { + // 大きな端末用の処理 + $('body').addClass('large-screen').removeClass('small-screen'); + $menubar.addClass('display-block').removeClass('display-none'); + $menubarHdr.removeClass('display-block').addClass('display-none'); + + // ドロップダウンメニューが開いていれば、それを閉じる + $('.ddmenu_parent > ul').hide(); + } +}, 10)); + +$(function() { + + // ハンバーガーメニューをクリックした際の処理 + $menubarHdr.click(function() { + $(this).toggleClass('ham'); + if ($(this).hasClass('ham')) { + $menubar.addClass('display-block'); + } else { + $menubar.removeClass('display-block'); + } + }); + + // アンカーリンクの場合にメニューを閉じる処理 + $menubar.find('a[href*="#"]').click(function() { + $menubar.removeClass('display-block'); + $menubarHdr.removeClass('ham'); + }); + + // ドロップダウンの親liタグ（空のリンクを持つaタグのデフォルト動作を防止） + $menubar.find('a[href=""]').click(function() { + return false; + }); + + // ドロップダウンメニューの処理 + $menubar.find('li:has(ul)').addClass('ddmenu_parent'); + $('.ddmenu_parent > a').addClass('ddmenu'); + +// タッチ開始位置を格納する変数 +var touchStartY = 0; + +// タッチデバイス用 +$('.ddmenu').on('touchstart', function(e) { + // タッチ開始位置を記録 + touchStartY = e.originalEvent.touches[0].clientY; +}).on('touchend', function(e) { + // タッチ終了時の位置を取得 + var touchEndY = e.originalEvent.changedTouches[0].clientY; + + // タッチ開始位置とタッチ終了位置の差分を計算 + var touchDifference = touchStartY - touchEndY; + + // スクロール動作でない（差分が小さい）場合にのみドロップダウンを制御 + if (Math.abs(touchDifference) < 10) { // 10px以下の移動ならタップとみなす + var $nextUl = $(this).next('ul'); + if ($nextUl.is(':visible')) { + $nextUl.stop().hide(); + } else { + $nextUl.stop().show(); + } + $('.ddmenu').not(this).next('ul').hide(); + return false; // ドロップダウンのリンクがフォローされるのを防ぐ + } +}); + + //PC用 + $('.ddmenu_parent').hover(function() { + $(this).children('ul').stop().show(); + }, function() { + $(this).children('ul').stop().hide(); + }); + + // ドロップダウンをページ内リンクで使った場合に、ドロップダウンを閉じる + $('.ddmenu_parent ul a').click(function() { + $('.ddmenu_parent > ul').hide(); + }); + +}); + + +//=============================================================== +// 小さなメニューが開いている際のみ、body要素のスクロールを禁止。 +//=============================================================== +$(function() { + function toggleBodyScroll() { + // 条件をチェック + if ($('#menubar_hdr').hasClass('ham') && !$('#menubar_hdr').hasClass('display-none')) { + // #menubar_hdr が 'ham' クラスを持ち、かつ 'display-none' クラスを持たない場合、スクロールを禁止 + $('body').css({ + overflow: 'hidden', + height: '100%' + }); + } else { + // その他の場合、スクロールを再び可能に + $('body').css({ + overflow: '', + height: '' + }); + } + } + + // 初期ロード時にチェックを実行 + toggleBodyScroll(); + + // クラスが動的に変更されることを想定して、MutationObserverを使用 + const observer = new MutationObserver(toggleBodyScroll); + observer.observe(document.getElementById('menubar_hdr'), { attributes: true, attributeFilter: ['class'] }); +}); + + +//=============================================================== +// スムーススクロール（※バージョン2024-1）※通常タイプ +//=============================================================== +$(function() { + // ページ上部へ戻るボタンのセレクター + var topButton = $('.pagetop'); + // ページトップボタン表示用のクラス名 + var scrollShow = 'pagetop-show'; + + // スムーススクロールを実行する関数 + // targetにはスクロール先の要素のセレクターまたは'#'（ページトップ）を指定 + function smoothScroll(target) { + // スクロール先の位置を計算（ページトップの場合は0、それ以外は要素の位置） + var scrollTo = target === '#' ? 0 : $(target).offset().top; + // アニメーションでスムーススクロールを実行 + $('html, body').animate({scrollTop: scrollTo}, 500); + } + + // ページ内リンクとページトップへ戻るボタンにクリックイベントを設定 + $('a[href^="#"], .pagetop').click(function(e) { + e.preventDefault(); // デフォルトのアンカー動作をキャンセル + var id = $(this).attr('href') || '#'; // クリックされた要素のhref属性を取得、なければ'#' + smoothScroll(id); // スムーススクロールを実行 + }); + + // スクロールに応じてページトップボタンの表示/非表示を切り替え + $(topButton).hide(); // 初期状態ではボタンを隠す + $(window).scroll(function() { + if($(this).scrollTop() >= 300) { // スクロール位置が300pxを超えたら + $(topButton).fadeIn().addClass(scrollShow); // ボタンを表示 + } else { + $(topButton).fadeOut().removeClass(scrollShow); // それ以外では非表示 + } + }); + + // ページロード時にURLのハッシュが存在する場合の処理 + if(window.location.hash) { + // ページの最上部に即時スクロールする + $('html, body').scrollTop(0); + // 少し遅延させてからスムーススクロールを実行 + setTimeout(function() { + smoothScroll(window.location.hash); + }, 10); + } +}); + + +//=============================================================== +// 汎用開閉処理 +//=============================================================== +$(function() { + $('.openclose').next().hide(); + $('.openclose').click(function() { + $(this).next().slideToggle(); + $('.openclose').not(this).next().slideUp(); + }); +}); diff --git a/js/slick.js b/js/slick.js new file mode 100644 index 0000000..d9caad9 --- /dev/null +++ b/js/slick.js @@ -0,0 +1,10 @@ + + +// トップページスライドショー +$('.mainimg').slick({ + autoplay: true, + dots: true, //丸いページナビボタンを表示 + arrows: false, //左右の矢印 + autoplaySpeed: 4000, //切り替えのスピード。デフォルトは3000。 + pauseOnHover: false, //マウスオン時にスライドショーをストップするか。 +}); diff --git a/phoneschool.html b/phoneschool.html new file mode 100644 index 0000000..0028b07 --- /dev/null +++ b/phoneschool.html @@ -0,0 +1,187 @@ + + + + +スマホ教室 - 東北公益文科大学 サークルゼロ + + + + + + + + +
+ +
+ +
+ + +

+ + + + +

+ + +
+

メンバー募集

+
+ + +
+

文字サイズ

+
    +
  • +
  • +
+
+ +
+ + + + + +
+ +
+ +
+ +

スマホ教室

+ +

スマホ教室

+

学生がLINEやInstagramといったスマホのアプリや機能について初歩からお教えします。
+ 事前に実施する講義テーマについてご相談いただいた場合は、可能な限りでご対応させていただきます。

+ +

スマホ相談会

+

皆さんが普段スマホをお使いになられていて感じている疑問を学生が解決いたします。
+ スマホに関することであれば、テーマを絞らず自由にお悩みを持ち込んでいただけます。
+ 「こんな簡単なことを聞いても大丈夫？」、「毎回家族に聞くのはちょっと…」という方もお気軽にご参加いただける内容となっております。

+ +

依頼に関するお問い合わせ

+

教室依頼のお問い合わせは、 お問い合わせページよりご連絡ください。

+

詳細チラシ + お問い合わせ

+ +

近日の開催予定や活動報告は、イベント情報・活動報告ページをご確認ください。

+

イベント情報 + 活動報告

+ +
+
+ + +
+ +
+ +

スマホ教室

+ + + +
+ + +
+ + +
+ +
+ + + + + +
+ + + + + +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + +