HTMLでリンク集 -便利ツールで作業を楽に!!-
いろいろな場所(フォルダ)に置いてあるファイルを使用することがあるでしょう。
そんな時に目的のファイルやその場所を開けたら便利ですよね！
一つのフォルダにショートカットをいくつも置いておくこともいいでしょう。
サクラエディタやExcelでリンクをまとめておくでもいいでしょう。
しかし、これらよりもHTMLでリンク集を作るとこんなメリットがあります。
・１クリックで開ける！
・余計なエクスプローラーが溜まらない‼
・仕事できるアピールができる！
HTMLで作る分、少し面倒な部分もありますが、
面倒な分リターンがあるツールであると思いますよ！
作り方
作り方は至って単純です。
２．＜a＞タグにリンクと文字列を書く
３．＜ol＞＜ul＞タグやCSSで装飾する
HTMLを知らない人でも簡単に作成することができます！
それでは、一つ一つ解説していきます。
１．HTMLを書く土台を用意
これはHTMLを書く際のお作法みたいなものです。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>ページタイトル</title> <meta charaset="UTF-8"> </head> <body> </body> </html> |
＜head＞タグ内にページに関する情報を、
＜body＞タグ内に表示させたいものを記述していきます。
２．＜a＞タグにリンクと文字列を書く
実際にページ内にリンクを記述していきます。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>ページタイトル</title> <meta charaset="UTF-8"> </head> <body> <a href=https://engr-tavern.com/>Engineer's Tavern</a> </body> </html> |
上記のように、URLと表示する文字列を記述します。
この時点でブラウザを開くとクリックすると開かれるリンクが表示されます！
３．＜ol＞＜ul＞タグやCSSで装飾する
＜a＞タグだけでただリンクを並べていくだけでは
味気ないですし、整理されてないので使いづらいです。
そこで、いろいろな方法で見栄えを良くしていきましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>リンク集</title> <meta charaset="UTF-8"> <style> ul { margin: 0.2vw; } </style> </head> <body> <ul>リスト１ <ol> <li> <a href=https://engr-tavern.com/>Engineer's Tavern１</a> </li> <li> <a href=https://engr-tavern.com/>Engineer's Tavern２</a> </li> </ol> </ul> <hr> <ul>リスト２ <ul> <li> <a href=https://engr-tavern.com/>Engineer's Tavern３</a> </li> <li> <a href=https://engr-tavern.com/>Engineer's Tavern４</a> </li> </ul> </ul> </body> </html> |
実際に表示してみると下のようになります。
一番外側の＜ul＞で囲まれた部分をコピペすればいっぱいリストが作れます。
入れ子にすればいくらでもリストの中にリストを作ることもできます。
もちろん、「リスト１」「リスト２」の部分を＜a＞タグでリンクを付けることもできます！
他にも背景や文字色を変えたり、お好みでカスタマイズしてみると良いでしょう！
最後に
リンク集は、特にフォルダ分けが多くされている状況で真価を発揮します！
作ってみると意外と「これ使える！」と思えるので、ぜひ作ってみてください。