初心者でもできる「1crick」ボタンの作り方

プログラミング 初心者独学

初心者でもできる「1crick」ボタンの作り方

こんにちはnikonekoです。

HTMLで”送信ボタン”を作りたいけど、私でも作れるものかしら?

作れるよ!サイトのテーマによって表し方が違うけど、1Crickで指定のページへとぶことができる方法を教えてあげるね。


このような、知りたいにお答えします。

テキスト表示を1Crickすると、指定ページへジャンプする方法

ホーム

例えば、☝この「Home」は、「first web storyのHome」ページへジャンプします。

テキストに「first web storyHome」リンク(URL)を設定しているからです。

 

ちなみにこの文字リンク作成サイトで作りました。(ありがとうございます。)

リンクテキストタグの書き方

リンクを張るには、「a」タグを使います。

Contact fourm7を使います。

 HTMLコード  <a href=“リンク先のURL”>リンクテキスト</a>
リンクテキストの色を変える
a {
color:skyblue;
text-decoration:なし。
}

buttonタグ

ボタンを押すと、リンクします。

 HTMLコード  <a href=”URL”>
<button type=”button”>テキスト名</button>
</a>

区切り線を引く方法

幅にあった区切り線をひいてくれます。

利用しているテーマには、線を引くツールが組み込まれているのもありますよね。

でも、覚えておくと大変便利です。

hidden 線をひかない
none  同じく線 を引かない。
dotted 点線
dashed 破線
solid 直線
double 二重線
groove くぼみのような線
ridge grooveと逆のような線
inset 箱をはめ込んだような線
outset insetと逆のような線

<hr>だけで線を引きことができます。


HTMLコード<hr>

記事の幅よりも短いをひく

記事の幅より短い線を引きます。


HTMLコード<hr><hr width = “50%”>

線の太さを変える

線の太さを変えます。


HTMLコード<hr size = “15”>

破線にします。

————————————————————

HTMLコード<hr style = “border:1px solid#ff0000″ >

ドット線を作ります。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

HTMLコード< hr style = “border:1px dotted#ff0000” >

二重線



HTMLコード<hr style = “border-top:4px <span style =” color:#ff0000; “> double </ span>#2DC287;幅:100%;高さ:3;” />
太い点線を白色で引き、背景を黒色にして区切る

HTMLコード<hr style=”border:0;border-top:thick dotted white;background-color:black;”>

まとめ

テキストリンク


リンクする仕組みをつくるには、<a>タグを使います。<a href=”リンク先のURL”>リンクテキスト</a>

を使うことで、リンクテキストができるようになります。

ボタンリンク


button typeをつかうことで、ボタンをおすと指定した先へジャンプしてくれます。<a href=”URL”>
<button type=”button”>テキスト名</button>
</a>

区切り線


利用しているテーマによっては、線を引くツールがついているものもありますが、<hr>要素は、<hr>だけで幅に合う線をひくことができるので、大変便利です。

区切り線をつかって、きれいにしてみましょう!

コメント