data-hrefの中にリンクを置きたいとき、 もしくはボタン、チェックボックスを置きたいときの備忘として残します。 <table> <thead> <tr> <th>リンク先</th> <th>通常リンク</th> </tr> </thead> <tbody> <tr data-href="https://qiita.com/" tabindex="0" role="link"> <th>https://qiita.com/</th> <td class="object"> <a href="#aaa">編集する</a> </td> </tr> </tbody> </table> tabindex="0"でタブ操作を有効にしてます var td = document.querySelectorAll('tr[data-href] > *:not(.object)'); Array.prototype.forEach.call(td, function (e) { e.addEventListener('click', function() { window.location = e.parentNode.getAttribute('data-href'); }); }); デモはこちら
とある社内のSlack投稿を見て、「あ゛」とか「ま゜」とか書けるようになった。 「゛」は「だくてん」と書いて変換すると出る。 「゜」は「はんだくてん」と書いて変換すると出る。 （ちなみに、WindowsのIMEを使っています。） おお、なんか嬉しい。小さい２とか小さい３とかも変換するだけで書けるぞッ！ と、調子に乗って世にある有名な公式を書き殴っていった訳ですが、世界一美しいと言われている「オイラーの等式」がどうしても書けない。。 アルファベットの上付き文字とかどうやって書くの？ で、ググってみたところhtmlでは書けそうだったので、この記事で実験してみました、という話。 eiπ+1＝0 おお~書けました！ めでだし、めでたし。 （参照） https://hensa40.cutegirl.jp/archives/4857
はじめに 比率で配置できるFlexboxのflexプロパティについてのまとめです。 flex:数値 比率で配置する アイテムをどのような比率で配置するか html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> </div> </body> </html> 下記のコードの場合、１対３の比率で配置できる css .container{ display: flex; } .item1 { background-color: pink; flex: 1; } .item2 { background-color: blue; flex: 3; }
対象者 link_toメソッドの使い方を知りたい方 目的 link_toメソッド使ってviewでボタンを表示する 実際の手順と実例 1.link_toメソッドの表示の違い a. 基本的な構文 <%=link_to "表示する文字", "URL" %> 上記の書き方だとテキストリンクになってしまう b. doとendで囲う方法 <%= link_to URL do %> 表示する文字 <% end %> これでボタン化できます。 2. 実際の使用例 下記サイトを参考に表示テキストがホバーすると変わるボタンを実装 上記記事のHTMLコードは下記の通り index.html <a href="#" class="btntextchange"> <span>About</span><span>私たちについて</span> </a> ※CSSは省略します。class="btntextchange"に表示を切り替えるcssのコードが書かれています。 これをRailsのコードに置き換えて実験してみた index.html.erb <a href="#" class="btntextchange"> <span><%=link_to "About", "about_path" %></span> <span><%=link_to "私達について", "about_path" %></span> </a> 上記の書き方だとボタン化できません。 原因としては、link_toメソッドを使用することでaタグのHTMLが作成され、二重に精製されてしまっていることが考えられます。 3.例の解決方法 下記のようにボタン化して解決できます。 index.html.erb <%= link_to about_path do %> <div class="btntextchange"> <span>About</span> <span>私たちについて</span> </div> <% end %> 上記のようにHTMLコードを挟み込むことで、 ボタンとして活用できます！ 参照 【Rails入門】link_toの使い方とオプションをわかりやすく解説！ 【Rails基礎】link_toメソッドをボタン化して使う方法
