ボタン上のマウスポインター

HTMLへbuttonタグを記述し、ブラウザにボタンを作成する。
ブラウザに表示されたボタン上にマウスカーソルを重ねても、マウスポインターが矢印マークのまま指(手)マークへ変更されなかった。
下記実装で解決したので備忘録として記載しておきます。

実装内容

style="cursor:pointer"を追加する。

<button class="new-text-btn">矢印マーク</button>
<button class="new-text-btn" style="cursor:pointer">手マーク</button>

See the Pen pobJvvv by ShimizuKosuke19910320 (@shimizukosuke19910320) on CodePen.

参考記事

ボタンのデザインは下記サイトを参照
https://jajaaan.co.jp/css/button/

どうも7noteです。URLがはみ出ちゃってデザインが崩れた方必見。

こんな場面みたことありませんか？

枠より長い文字がはみ出てしまっています。
デザインが崩れてしまっているので、URLなどの長い文でも自動的に改行するように改良しましょう。

CSSでの修正方法

p {
  word-break: break-all;
}

たったこれ1行だけで解決できます。

結果

解説

これは英文の特徴なのですが、例えば「everyday」という単語が改行されて、

「～～～every（改行）
day.」

となっていたとします。
「everyday」と「every day」では「日常」と「毎日」とで意味が変わってしまいます。

このように意味が変わらないように、英語の単語の途中では改行されない仕組みになっています。
そのため、URLも1つの英単語と認識されてしまうので改行されずに枠からはみ出してしまうのです。

これを強制的に改行させるのが、word-break: break-all;となります。

まとめ

ブログを書くようなサイトを作る際に、「ブログの中にURLを貼り付けるとデザインが崩れる！」というようなシチュエーションが想定されます。
記事の投稿やブログ運営を自分以外の人にやってもらうサイトの場合は、本文の箇所にword-break: break-all;を入れておくと、ちょっとデキる開発者になれると思います。

使うユーザーが気持よく利用できるように設計するのもコーダーやフロントエンジニアの大切な仕事の1つかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

Vue.js

• 簡単に言うと、ユーザーインターフェイスを構築するためのフレームワークのこと
• JavaScriptでDOMを操作するWebアプリケーションを構築するときに向いている
• DOMよりも先にデータが存在していて、それに合わせてDOMが構築される
• HTMLベースのテンプレート構文を使っているので、Vueインスタンスのデータと描画をDOMを宣言的に対応させることができる

Vueインスタンス

var app = new Vue({
  //下記などのオプションを記述する
})

el

アプリケーションを紐付ける要素のセレクタ

data

アプリケーションで使用するデータ、オブジェクトや配列も登録できる

computed

dataと似たように扱うことのできる、関数によって算出されたデータ、算出プロパティ

mothods

このアプリケーションで使用するメソッド、コードを管理しやすくするために処理を分けたり、イベントハンドラなど細かな実装を担当する

DOM

• JavascriptからHTMLやCSSのデータを取得、操作するための仕組み

データバインディング

• データと描画を同期させる仕組みのこと
• JavaScriptとのデータとそれを使用する場所を紐付け、データに変化があれば自動的にDOMを更新する

ディレクティブ

• 接頭辞「 v- 」が付いたVue.jsの特別な属性のことで、テンプレートとロジックを関連付ける (下記が代表的なもの)

v-for

配列やオブジェクトから要素を繰り返し描画する

v-on

DOMイベントのハンドリングに使う

v-model

データとフォームの入力項目のバインド(関連付け)をする

v-if

テンプレートベースで条件分岐をする

コンポーネント

• 再使用可能なVueインスタンスを作ること
• 機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組み

実現したいこと

編集ボタンを配置し、編集ボタンを押すと要素がテキストに切り替わり登録可能になるようにしたい。

ソースコード

index.html

 <div>
   <form action""  id="food_form" method="post">
     <span id="food">焼肉</span>
     <input type="text" id="text" value=""　style="display:none;">
     <input type="button" id="edit" value="編集">
     <input type="button" id="regist" value="登録"　style="display:none;">
   </form>                   
 </div>



<script>
$(document).ready(function() {
    $(".edit").click(function(){
　　　  $("#text").removeAttr('style');
       $(this).hide();
       $("#regist").removeAttr('style');
    });

    $(".add_btn").click(function(){
       $('#food_form').submit();
    });
});

</script>

自分で試したこと

現在は編集ボタンを押すと編集ボタンが消え、display:noneで隠していたtextフォームと登録ボタンが現れる仕組みでの実装を考えています。

しかしコードがすっきりしないので、textフォームや登録ボタンもJQueryで追加するやり方の方が良いのかもしくは別のやり方があるのかを知りたいです。
よろしくお願いします。

概要

railsアプリを作っていて
ある時急にスクロールイベントトリガーを使った無限スクロールが動かなくなった時の原因と対処です

原因

cssプロパティの
overflow: auto;
こいつが原因でした。
どうやらoverflowでscroll（要素がはみでたらスクロールして対処）が指定されるとscrollイベントが起こらなくなる模様です。
autoを指定していたことで私の使っていたChromeではスクロールイベントが発火しなくなった模様です。

解決策

overflow: auto;またはoverflow: scroll;を消す

imgタグにはwidth属性とheight属性を付けるべし

こんにちは！おがちゃんです！

ロード時のレイアウトが崩れるのを防ぐために、なんとなく「imgタグにはwidthとheightを付けた方がいい」というのは聞いたことがある方も多いのではないでしょうか？

Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR

— Addy Osmani (@addyosmani) June 27, 2020

なぜ付与した方がいいのかは、わかりやすくまとめてあるサイトがあるので、リンク先をご参照ください。とてもかりやすい!!

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

width属性とheight属性を一発で付与する方法

width属性とheight属性を付けた方がいいのはわかったんですが、毎回画像の幅と高さを確認して手打ちするのは面倒です。

簡単に付与する方法をメモしておきます。

Emmetで付与

VScodeに内臓されているEmmetで付与します。
imgタグにカーソルを合わせた状態で「編集」 → 「Emmet」を選択します。

Update Image Size と検索して選択します。

自動でwidth属性とheight属性が付与されました。

Emmetをキーボードショートカットに登録

imgタグごとにメニューバーから選択するのは大変なので、キーボードショートカットに設定します。

「基本設定」から「キーボードショートカット」を開きます。

「Update Image Size」と検索し、項目の左にある「＋」もしくは「鉛筆マーク」から任意のショートカットキーを登録します。（他のコマンドと被った場合は教えてくれます）

imgタグにカーソルを合わせた状態で、先ほどのショートカットを入力すると、自動でwidth属性とheight属性が付与されました。

複数タグに一括付与

既に作成してしまったページに対して一括で付与したい場合の手順です。
（1つでもパスが間違っていたり、コメントアウトしたimgタグがあるとうまくいきません）

imgタグにカーソルを合わせて「Command」+「Shift」+「L」で全てのimgタグが選択できます。

この状態で先ほど設定したショートカットを入力すると、全ての画像にwidthとheightが設定されました。

おわり

画像を差し替えた場合は改めて、ショートカットキーを入力しないと数値がアップデートされません。
私はコンパイル時に全自動できるように勉強していきます!!