マーカーラインです

あお

 

あか

 

みどり

 

むらさき

 

ぴんく

 

オレンジ

 

きいろ

 

みずいろ

 

※コピーするときは<p></p>を省いてコピーしてね！

<span class="ymarker-s" style="margin: 0px; padding: 0px; font-weight: bold; background: linear-gradient(transparent 70%, rgb(168, 222, 255) 0%);">あお</span>
赤文字のところでマーカーの太さを変えられるよ！　0←太い　細い→100

 

二重下線　⇦センパイ就活のカラーに合わせてます。#343D55　から好きなカラーに変更していいです！(色濃くて無色に見えるね！)
 

⇮こちら色のサイトです⇮

 

タイトル付き枠です

あ

細かい点線の枠に入れる

 

あ

実線の枠に入れる

 

あ

点線の枠に入れる

 

あ

二重線の枠に入れる

 

あ

タイトル部分に背景を入れる

 

■あ■

 

枠です

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

番外編

 

 

 

 

チェックしてもらいたい記事を書くときにでも、お使いください～～！

 

 

影付き枠です

 

 

 

バナーです（リンク付けはご自由にどうぞ）

 

ジャンプします（目次などにどうぞ）

あ

い

う

え

お

 

あ

A：

 

い

A：

 

う

A：

え

A：

 

お

A：

 

※⛳のマークが付いてるけど見えてるのはここだけで実際には見えてないから気にしなくて大丈夫です※

 

プチアレンジ集

リンクボタン

詳しくはこちら

 

詳しくはこちら

 

詳しくはこちら

 

☺使い方☺

<a href="#" style="background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));color: #FFF;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #0099CC;-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);text-shadow: 0px 0px 3px rgba(0,0,0,0.5);width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a><

この#所に入れたいURLを入れると使えるよ！

 

フォーム（未完成）

理由：送信先メールアドレス未設定。素人がフォーム作るのかなり難しいです！
だが、今これを見てるあなたならできる！是非完成させて実施できるようにしてください。一生のお願い！

■応募フォーム■
名前
性別	男 女
Mail
件名
添付
内定先職種	広告ITその他 URL自動リンク
内容	質問をどうぞ。
URL
Pass

 

 

枠の幅を狭くしたい、枠を中央にしたい・・

囲い枠のHTMLソースの中に、 『width:300px;』を追加するとよいのです。

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:300px;">枠内の記事本文</div

あとは、この300とかの数字を自分で好きなように変えてくださいませ～(^^♪
数字が小さい方が枠も小さくなるよ！

 

･･･で、この枠を中央に配置したいときは、style=""の中に、

margin-left:auto;margin-right:auto;

を足してこのようにしてくださいませ～

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:300px;margin-left:auto;margin-right:auto;">枠内の記事本文</div>

 

メモ

いろんなサイトのコラムを見て使えそうなデザイン・使えそうな機能を見つけてマネしよう(^^♪
見つけたら control+U でサイトのソース一覧ができるよ！
その付近の言葉を control+F で検索して
たいてい <p> から始まり </div> で終わることが多いから見つけてみましょう！
スラッシュが終わりの印だよ！

その見つけたソースをシンアドのサイトで使用できるか分からないから
ここの練習用のページにどんどん試してみよう('ω')

かなり自由度なくて限られてるから、使えればラッキーぐらいの気持ちでOKです

こんなの無いかな～って気になったら
例）「HTML 枠 コード」
って検索するといろいろ出てくるよ～！

さぁ、楽しいHTMLライフをどうぞ！

 

From 甲斐ちゃん卒業制作🌙