目的

• HTMLファイルにてリンクを作成する方法をまとめる

押さえるポイント

• aタグを用いる。
  
• aタグで囲ったテキストがリンクとして表示される。
  
• aタグのhref属性によってリンク先を指定する。
  

書き方の例

<!-- <a>タグでリンク先に飛ぶ、クリックできる文字を囲む -->
<a>Google</a>

<!-- リンク先をURLで指定する -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

～実際の表示～

Google

筆者のTwitterへ

注意するポイント

• リンク先のURLを指定するhref属性はaタグの開始タグ内に記載する。
  
• URLをダブルクオートで囲む。
  

ちょっとしたテクニック

• リンク先を開くときに新しい新規タブで開くようにする。
  
• target属性で_blankを指定する。
  

<!-- リンク先を既存タブの更新で開く -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

<!-- リンク先を新規タブで開く -->
<a href="https://twitter.com/mirimiripc" target="_blank">筆者のTwitterへ</a>

～実際の表示～
※Qiitaは親切であるため下記のリンクはどちらともリンク先を新規タブで開くようになっている。
リンク先を既存タブの更新で開く
筆者のTwitterへ

リンク先を新規タブで開く
筆者のTwitterへ

目的

• HTMLファイルにてリンクを作成する方法をまとめる

押さえるポイント

• aタグを用いる。
  
• aタグで囲ったテキストがリンクとして表示される。
  
• aタグのhref属性によってリンク先を指定する。
  

書き方の例

<!-- <a>タグでリンク先に飛ぶ、クリックできる文字を囲む -->
<a>Google</a>

<!-- リンク先をURLで指定する -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

～実際の表示～

Google

筆者のTwitterへ

注意するポイント

• リンク先のURLを指定するhref属性はaタグの開始タグ内に記載する。
  
• URLをダブルクオートで囲む。
  

ちょっとしたテクニック

• リンク先を開くときに新しい新規タブで開くようにする。
  
• target属性で_blankを指定する。
  ～サンプルコード～

<!-- リンク先を既存タブの更新で開く -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

<!-- リンク先を新規タブで開く -->
<a href="https://twitter.com/mirimiripc" target="_blank">筆者のTwitterへ</a>

～プレビュー画面～
※Qiitaは親切であるため下記のリンクはどちらともリンク先を新規タブで開くようになっている。
リンク先を既存タブの更新で開く
筆者のTwitterへ

リンク先を新規タブで開く
筆者のTwitterへ

DreamWeaverでは標準だったあの機能をVSCodeで実現する

他人が書いたコード、インデントが整っていないコードを直す時。

もうどこにdivタグが、/divがあるのか分からなくなった時。

色々な方法はあるけれど、どうしても欲しかったあの機能。

タグを触ると対応するタグがハイライト（マーキング）されるあの機能。

共有させてください。

Highlight Matching Tag

神プラグインキターーーーーーーーーーーーーーー！！！！！！！！！

Pug初学者の備忘録です。どんどん追記していきます。

forループ+クラス名を変数展開

完成イメージ

<ul class="items">
  <li class="item i1"></li>
  <li class="item i2"></li>
  <li class="item i3"></li>
</ul>

↑のようにループでli.itemを生成しつつ、それぞれにi1、i2、i3…と番号付のクラス名を振り当てたいときに。

index.pug

ul.items
  - for (var i = 1; i < 4; i++)
    li(class="item i" + i)

もっとスマートな書き方がありそうな気がする…

each+連想配列

完成イメージ

<ul>
  <li><a href="./">Top</a></li>
  <li><a href="./about">About</a></li>
  <li><a href="./works">Works</a></li>
  <li><a href="./contact">Contact</a></li>
</ul>

よくあるメニューリストを作るときに。

index.pug

ul
  -
    var menus = [
      { text: "TOP", url: "./" },
      { text: "About", url: "./about" },
      { text: "Works", url: "./works" },
      { text: "Contact", url: "./contact" }
    ]

  each menu in menus
    li: a(href=menu.url)=menu.text

使いこなせたら楽しそう！引続き勉強していきます。

実行環境

• html(今回、slimで書いています）
• scss

行いたいこと

このUIから...

こっちのUIみたいに装飾をして使いやすくしたい。
(グレーのところどこ押しても反応する）

実際にしたこと

example.html.slim

.service_page_r_form_image
  = f.label :image
     i.far.fa-file-image
  = f.file_field :image
  small 写真を１枚アップロードしてください。

html（slim)ではlabelとinput(file_field)を記述しています。

example.scss

&_image{
    height: 300px;
    label{
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 300px;
         width: 100%;
         background-color: #D3D3D3;
         cursor: pointer;

        input{
            display: none;
        }
      }
    }

すごく長々と書いていますが、やるべきことはinput(file_field)をdisplay: none;して隠すことです。
隠しても、labelと紐づいているので、labelの部分を押せばinputの挙動が発動します。
あとはlabelの部分を自分の好みのように記述していけば、完成します。

まとめ

今回は、ファイル送信フォームの見た目の部分を装飾して改善をしました。
まだまだプレニュー表示など改善点はございますが、一旦はこれで以上になります。では。