Q&A
私もその書き方に心当たりがないのですが，どのようになっているのか気になるので，よろしければURLを貼っていただけないでしょうか？抽出したコード以外の部分にヒントがあるかもしれませんので．
前提・実現したいこと
以前、とある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>
どうぞよろしくお願いします。
すみません、今朝にOSをアップデートした際に履歴も消えてしまい、該当ページを探したのですが、見つけることが出来ませんでした。
私がデベロッパーツールで調べた限りでは、質問文に書いた以外のコードは使用していないようで、`.rounded-circle`がかかっている要素のスタイルにも`height`に関するものはありませんでした
回答2件
0
codepenは使っていないので良く知りませんが、codepenでの書き方の流用でしょうか？
（追記）
codepenではなく「Stylus」ですね。不勉強でスミマセン。
参考記事
stylus超基礎 - 書き方編/引用
投稿2018/08/29 04:16
編集2018/08/29 07:19
総合スコア3523
>stylus超基礎 - 書き方編/引用
[こちら](http://stylus-lang.com/docs/variables.html#property-lookup)の機能ですね
この機能は、ドキュメントを見る限り、コンパイル前の.stylファイルでのみ有効なようですが、HTML属性にも使えるのでしょうか？
もしそうではない場合は、コードを書いた人のタイポということになりますね
やはり、このような書き方は素のHTMLではない(文法違反？)ということなのでしょうか･･･
非常に参考になりました
ご回答をしていただき、ありがとうございました
HTMLでは無効なので、推測ですが、誤記述の気がします。
0
ASP.NET の Razor 記法ではないですか？
ブラウザが読んでるHTMLに@が出ているならバグかと思います
投稿2018/08/28 12:27
総合スコア13749
>ASP.NET の Razor 記法
式の値をHTMLコードに埋め込むための記法ですね
公開されているページは私が閲覧したその1ページのみで、他に公開しているページは存在しないようなのです
そのため、学習目的などの可能性もありえますが、わざわざWebアプリケーションフレームワークを導入しているのか、というところは疑問が残ります
>ブラウザが読んでるHTMLに@が出ているならバグかと思います
おそらく、HTMLでは属性値に@を使えなかったと思うので、いずれの言語を使ってHTMLを出力しているにせよ、バグの可能性が高いですね
非常に参考になりました
ご回答をいただき、ありがとうございました
あなたの回答
tips
プレビュー
