News

テスト投稿

May1st2021 カテゴリー：News

ネオクラシックのHTMLテンプレートです。

HTML5、CSS3 によるコーディング。
対応しているブラウザは Google Chrome、Firefox、Safari 等のモダンブラウザ。 Internet Explorer は非対応です。

Typographyタイポグラフィー

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headersヘディング・タグ

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

This is the Paragraph

Unordered list番号無しのリスト

  • Cras mattis consectetur purus sit amet fermentum.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Aenean eu leo quam.
    • Pellentesque ornare sem lacinia quam venenatis vestibulum.
    • Nullam quis risus eget urna mollis ornare vel eu leo.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Ordered list番号付きリスト

  1. Cras mattis consectetur purus sit amet fermentum.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Aenean eu leo quam.
    2. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    3. Nullam quis risus eget urna mollis ornare vel eu leo.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Ordered list定義リスト

Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquote引用

Very smart blockquote!

Smarty, Smart Person

Codeコード

<pre>
	これは &lt;pre&gt; 要素で囲んでいます。
</pre>

Inline example usage.

Tablesテーブル

TableNormal
# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
Tablestriped, bordered, hover
# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak

Formsフォーム

 

2 persons
3 persons
4 persons
5 persons






 


Buttonsボタン

Button
Success
Error
Warning

<a class="btn btn-large">Button</a>
<a class="btn">Button</a>
<a class="btn btn-small">Button</a>

Alertsアラート

X

 

Alert Click the X to remove this alert. Use class .alert-removed to remove this alert

X

 

Success Click the X to remove this alert. Use class .alert-removed to remove this alert

X

 

Error Click the X to remove this alert. Use class .alert-removed to remove this alert

X

 

Warning this alert. Use class .alert-removed to remove this alert

<div class="alert alert-success">
<span class="close">X</span>
<p><em>Success</em> Click the X to remove this alert. Use class .alert-removed to remove this alert</p>
</div>

.alertが基本のコード。色分けするときは.alert-successalert-erroralert-warningを併記する。

jQueryを利用して、右端のボタンを押すとスライドしながら非表示させる。
以下のコードを使用する。

$(".close").on("click",function(){
$(this).parent(".alert").slideUp();
});