公益財団法人新潟県埋蔵文化財調査事業団

各種申請書類ダウンロード

ページタイトル

titleデザイン

titleに付けるデザインについて、ts2・ts3・ts4でデザインが入ります。

p要素について

p要素が連続して入る場合、下のp要素にmargin-top:0.8em;がはいります

margin・paddingについて

mt0margin-top:0;
mt10margin-top:10px;
mt20margin-top:20px;
mt30margin-top:30px;
mt40margin-top:40px;
mb10margin-bottom:10px;
mb20margin-bottom:20px;
mb30margin-bottom:30px;
mb40margin-bottom:40px;

pt10padding-top:10px;
pt20padding-top:20px;
pt30padding-top:30px;
pt40padding-top:40px;
pb10padding-bottom:10px;
pb20padding-bottom:20px;
pb30padding-bottom:30px;
pb40padding-bottom:40px;

class名 ts2

class名 ts3

左に写真、右側に文章
親要素にclass名 imagebox と clearfix
画像を配置するdiv要素にclass名 image と fl
テキスト類を配置するdiv要素にclass名 text と fr

画像幅は340px、テキストボックスは730px
右に写真、左側に文章
親要素にclass名 imagebox と clearfix
画像を配置するdiv要素にclass名 image と fr
テキスト類を配置するdiv要素にclass名 text と fl

画像幅は340px、テキストボックスは730px
class名 ts4

tableのスタイリングはtabel要素にclass名 style

テーブル レイアウト
テーブル レイアウト

グリッドレイアウト

親要素にclass名 gr2列・3列・4列配置ができます。
下記ソースコードはul liでコーディングされていますが、div要素でも動作します。
div要素で配置する場合は、親要素にdiv要素を使います。
その子要素となる要素が2列・3列・4列配置になります。

ulの場合

divの場合

デザイン
グリッド
デザイン
グリッド
3カラム
デザイン
グリッド
4カラム
です

画像拡大スクリプトについて

拡大させたい画像へa要素を設置、その後a要素へ class名 photoSwipeで拡大されます。

グループ化について

次へ次へと画像を送れるようにするには、a要素へ rel="任意の値(半角英数)"を付ける事でグループ化できます。
同じ値を付けた画像リンク同士でグループ化され、拡大後の写真を次へ、前へと送れるようになります。

画像へのマウスhover動作について

マウスhoverアクションを画像に付ける場合、img要素へclass名 hover と effを付ける事でアニメーションします。
0.3秒かけて透明度60%程度に透過するアニメ―ションを設定済みです。

画像中央寄せ

親要素にclass名 centerImgで子要素が2個並びになります。
グリッドレイアウトと異なる点は、数が減った時でも子要素がセンタリングされる点です。

2列中央寄せ

数が減ってもセンタリンクされます

3列中央寄せ

親要素にclass名 centerImg gr3で子要素が3個並びになります。

数が減ってもセンタリンクされます
ページの先頭へ戻ります