HTML・CSS・Javascript

HTML・CSS・Javascript

Using width with padding can sometimes〜が出たときの対処法【CSS】

ワードプレスでCSSを指定しているときに出てきたこの英文の注意書き Using width with padding can sometimes make elements larger than you expect 解決していきます...
HTML・CSS・Javascript

【CSS初心者向け】2行目以降の頭の余白揃える超簡単な方法【li,pタグに便利】

※この文章のように長い一文を折り返したときにコメマークの下から二行目が始まってしまうのを防ぐのが今回のブログのテーマです。 ↑こうなってしまう方へ!(私も数ヶ月前にやり方わかりましたので共有します笑) indentとpaddingを使っ...
HTML・CSS・Javascript

【やり直しJavascript】consoleとalert

仕事で毎日webサイトのコーディングやらデザインをしているのですが、その中でも完全に忘れてしまったのがJavascriptを使ってのプログラミング。 半年通ったスクールでは一応習ったんですが、実際に仕事ではJQueryというめちゃくちゃ便...
HTML・CSS・Javascript

CSSで文字は透過させないコードの書き方

CSSで透過の方法を2種類記します。 透過なし See the Pen MGxLJJ by kawashima (@kawashima) on CodePen. これは透過してない状態。 タンメン画像の上に青い背景と文字がありま...
HTML・CSS・Javascript

Javascriptで地図をクリックして情報ボックスを表示と非表示にするスキームの例

見たい地域(これでいうとdivのエリア)にオンマウスで色が変わり、 クリック(inputを)でdivの情報ボックスが非表示状態から表示に。 そして情報ボックスを非表示にするには、他の地域にオンマウスで全てのチェックボックスのchecke...
HTML・CSS・Javascript

Flexboxで画像が縦に伸びてしまうのを直す方法

Flexboxは便利ですが、画像とテキストを横並びにした時に、 下記のようにテキストの高さが高くて、 画像が引き伸ばされてしまうことがあります。 See the Pen OZdNXy by kawashima (@kawashima)...
HTML・CSS・Javascript

Bracketsでライブプレビューエラーが出る場合

Bracketsを使っていてライブプレビューエラーになる場合があります。 しかもhtmlファイルで。 その場合、まずこれを試してみて下さい。 上部バーの「File」の「Enable Experimental Live Previe...