Now Loading...

コピペ コーディング

copy coding
HTML、css、javascriptのまとめサイト作りました。
コピペで簡単に実装できるようにしてます。
実際コーディングWebサイトを構築するときによく使用するもののみ記述しています。
その他のことはブログに追記していきますので是非ご利用ください。

  • 基本構造
  • リンク
  • 文字装飾
  • テーブル
  • リスト
  • 背景画像
  • 背景動画
  • 表示
  • 配置
  • 文字が動く
  • 背景が動く
  • クリック時の動作

基本構造


HTMLソース

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width = device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/common.css"> <link rel="stylesheet" type="text/css" href="../css/page.css"> <title>ページのタイトル</title> </head> <body> <header> <h1>株式会社テスト</h1> </header> <h2>メインエリアタイトル</h2> <div> <p> ここはメインエリアです。ここにページの内容を書いていきましょう。 </p> <p> </p> </div> <footer> </footer> </body> </html>

通常のWEBサイト

テーマテンプレート

xserverのhtaccess

リンク

ソースコード

								
target="_blank"←押すたびに別ウィンドウで開く
<a href="https://kit-ma.com/coding#tag" target="_blank">リンクタイトル</a>
								
							

ブラウザでの表示

文字装飾

左線ボーダータイトル

下線ボーダータイトル

左右ボーダータイトル

下線点線タイトル

二重下線タイトル

上下線タイトル

背景塗りつぶしタイトル

角丸ボーダータイトル

立体的なタイトル

コメントみたいなタイトル

角がめくれたタイトル

かっこタイトル

始めの文字だけタイトル

テーブル

上下ボーダー テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル テキスト
タイトル1 タイトル2 タイトル3
¥0 ¥10 ¥100
申し込み 申し込み 申し込み
  • 数字リスト1
  • 数字リスト2
  • 数字リスト3
  • 画像リスト1
  • 画像リスト2
  • 画像リスト3
  • コンテンツリスト1
  • コンテンツリスト2
  • コンテンツリスト3
  • フォントオーサム1
  • フォントオーサム2
  • フォントオーサム3
基本の背景画像

タイトル真ん中

文章右寄せ

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

画像と文書

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

背景動画1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

背景動画2

背景動画3

背景動画4

表示1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

表示2

表示3

表示4

配置1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

配置2

配置3

配置4

文字の動き1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

文字の動き2

文字の動き3

文字の動き4

背景の動き1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

背景の動き2

背景の動き3

背景の動き4

クリック時の動作1

リンクタイトル
ブラウザでの表示 リンクタイトル
オプション target="_blank"←別ウィンドウで開く

クリック時の動作2

クリック時の動作3

クリック時の動作4