前提・実現したいこと
以前、とあるWebサイトのソースコードを見ている時に発生した疑問です
発生している問題・エラーメッセージ
とあるWebサイトのソースコードを見ている時に、HTMLの属性値にアットマークをつける記述を見掛けました
このような記述は初めて見たので、何か意味があるのではないかと思いました
しかし、どのような意味なのかを調べたものの、意味がわかりませんでした
この記述にはどのような意味があるのでしょうか?
該当のソースコード
下記は、サイトのHTMLを再現したものです
class="panel"
内のimg
にheight="@width"
という記述があると思います
これが今回の質問で疑問に思った記述です
私が閲覧したサイトでは、この画像のwidth
, height
は等しくなり、正方形で表示されていました
確認に使用したブラウザはFirefoxです
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="IE=edge" http-equiv="X-UA-Compatible"> 6 <meta content="width=device-width, initial-scale=1" name="viewport"> 7 <link href="/assets/css/style1.css" media="screen and (max-width: 699px)" rel="stylesheet"> 8 <link href="/assets/css/style2.css" media="screen and (min-width: 700px)" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 10 <script src="https://use.fontawesome.com/releases/v5.0.12/js/all.js"></script> 11 <title>Title</title> 12 </head> 13 <body> 14 <div id="background-wrapper"> 15 <div class="panel"> 16 <img class="rounded-circle" height="@width" src="/assets/imgs/icon.jpg" width="50%" /> 17 <ul class="list"> 18 <li> 19 <a>text</a> 20 </li> 21 <li> 22 <a>text</a> 23 </li> 24 <li> 25 <a>text</a> 26 </li> 27 <li> 28 <a>text</a> 29 </li> 30 </ul> 31 </div> 32 </div> 33 </body> 34</html>
どうぞよろしくお願いします。