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

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つのセットにして、他の機能とは分離して開発できるようにする仕組み

Bootstrap　card使用時にカラムが横並びにならない原因と対処法

個人的な備忘録として記事を残しておきます。

レイアウトを考えている際にco-md-2 col-md-9のカラムを横並びにして表示させようと考えていた際にinline-blockになっているにも関わらず、カラムが上下に配置されてしまう事象が発生しました。

原因

結論から述べるとbootstrapのcardを使用するとその子要素に対し、自動的にflex-direction:columnが有効になってしまうことから、card以下の要素が全て縦並びになってしまうようです。

対処法

対処法は、card以下で横並びにしたい要素に対してflex-direction:rowを与えてあげれば解決します。

一応例として挙げておくと、

<div class="card"> ->ここ以下にflex-direction:columnが有効となり、縦並びになる。
 <div class="card-body">
  <div class="column flex-direction:row"> ->flex-direction:columnを指定することでこれ以降の要素を横並びにすることができる。
   <div class="tab col-md-2">
    <div class="content col-md-9">
.
.
.

このように書いてあげればtabとcontentが無事横並びになります。

実現したいこと

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

ソースコード

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で追加するやり方の方が良いのかもしくは別のやり方があるのかを知りたいです。
よろしくお願いします。