【CSS】まずはこれを読め！CSSの基本(指定の仕方、優先順位)
はじめに こんにちは、エンジニア2年目の嶋田です。まずは、この記事を開いていただきありがとうございます！ 今回は、CSS（Cascading Style Sheets）の基本について詳しく解説します。 なんでこのCSSが効かないんだろう…と思ったら大体は優先順位であったり、指定の仕方であったりします…
View Article複数チェックボックスで要素の表示非表示を切り替える
備忘録と勉強のために残しておくだけ。 要件 以下の項目を記載したチェックボックスを作成 ・りんご(value = apple) ・バナナ(value = banana) ・みかん(value = o…
View ArticleFlex boxで「なんか小さくなっちゃう...」という時は、flex-shrink: 0; を試してみよう！
Flex boxを使っていて、幅や高さを指定しているのに 「なぜか小さくなっちゃう！！」 「指定した値にならない！！」 とお困りの方はいませんか！？ 私は過去めっちゃ困りました😇 めっちゃハマりまし…
View ArticleChrome検証ツール「CSSの概要」便利です！
Chromeの検証機能に「CSSの概要」という機能があります。 私は、品質チェックのときにこの機能にお世話になっています！ でも、初期表示では隠れていたので、 この機能自体を知らない方もいるのではな…
View ArticleCSSとHTML
時計やストップウォッチはプログラミングではなくjavascriptでもできそうだと分かりました。 色んな色やデザイン違いを作りたいと思うとjavascriptのほうがよさそうですね。 とは言え、CS…
View Article【Bulma】input内のiconをクリックさせる
TL;DR Bulmaの.control .has-icons-left/right .iconにはpointer-events: noneが指定されてるからクリックに反応しないよ、というお話。 や…
View Article変なところで折り返されて文章が読みにくいときは、spanとdisplay: inline-blockの出番！
🌻変なところで折り返されて文章が読みにくい！！ 👉spanとdisplay: inline-blockの出番！ ①折り返したく無い分のかたまりをspanタグで囲む ②↑のspanタグに、displ…
View ArticleCSS復習①
★Progateの初級でよく使ったCSS一覧 1.フォントカラーを変える color:・・・; 2.ボックスの背景カラーを変える background-color:・・・; 3.フォントサイズを変える…
View Article【初学者向け完全ガイド】 Tailwind CSSでグリッドレイアウトを作る方法
はじめに Tailwind CSSは、ウェブデザインのスタイリングを簡単にするためのツールで、特に初学者におすすめです。 この記事では、初めてTailwind CSSを使う方向けに、グリッドレイアウ…
View Articleお手軽に電子ドラッグ
コード 以下をブラウザのコンソールに貼り付けて実行してください。 function getAllElements(currentWindow = window) { let elements = […
View Article【CSS】指定行の文末を三点リーダーにして、それ以降非表示にするCSS
指定行の文末を三点リーダーにして、それ以降非表示にするCSSの紹介です！ ブログ記事一覧などで重宝します！ .blog__title{ display: -webkit-box; -webkit-l…
View Articleスプライト画像とは？
目次 スプライト画像とは？ 従来の画像ファイルダウンロードの問題点 どうやって解決するのか？ スプライト画像の実装 参考文献 1. スプライト画像とは？ スプライト画像とは、使用する複数の画像を一つ…
View Article【HTML&CSS】花火
はじめに HTML5プロフェッショナル認定試験の勉強をしている中で、ふと、花火が作れそうだなと思ったことがきっかけです。 ネットで探してみると色々な花火がありましたが、下記の花火がとてもキレイだった…
View ArticleGoogle Chrome 拡張 / 下準備として「空っぽのChrome 拡張作り、ブラウザに認識させる」
ふと、日々の仕事を効率化するための「Chrome 拡張」を自作してみようと思いました。 あくまで自分だけが使うものなのでストアで公開するつもりはなく、Chromeのデベロッパーモードで使えればそれで…
View Articleフォームのバリデーションチェック（jQueryボタン有効化編）
お世話になっております。コウヤです。 課題も並行しつつ、上級編へそろそろ進もうとしておりますが、フォームのバリデーションチェックに関して記事を書き忘れたのでここで紹介します！ 過去にフォームのデザイ…
View Article【CSS】animationのtransformを指定しているとき、100%後にちらつく不具合の対処法【スマホ】
前書き PCでは正常に動くのに対し、iPhoneのChromeでタイトルの現象が発生したのでその対処法を書きます。 バグったコード https://qiita.com/nissuk/items/7d…
View ArticleObsidianのマークダウンエディタの書式を変更する方法
まず vault配下の.obsidian/snippets/にcssファイルを配置する 以下は一例 /* Headingのサイズを変更する */ body { --h1-size: 1.50em; …
View Article【CSS】フォーム苦手でも簡単！ ラジオボタンやチェックボックスの背景色を変えてみよう！
🌻フォーム苦手でも簡単！ ラジオボタンやチェックボックスの背景色を変えてみよう！ 👇たったこれだけ！！ form { accent-color: #AC582F; } See the Pen acc…
View Article【Instagram API】Instagram の投稿内容をサイトにも掲載したい
はじめに SNSを利用したブランディング・マーケティング活動が普通になってきている昨今、タイムラインをサイトに掲載しているところも少なくありません。 筆者が所属する制作会社にもSNSの投稿をサイトに…
View Article