CSS
原因は正確に理解できなかったけど、リンク箇所なのに指カーソルが出てくれないことがあったので。 そんな時は cursor: pointer;
:first-child または :first-of-type 一番最初の子要素を指定:last-child または :last-of-type 一番最後の子要素を指定 :nth-child(n) または :nth-of-type(n) 何(n)番目の子要素を指定 それぞれの : の前にはpやaが入ります。
よく忘れるので。 答えは、display:blockを指定する
これ、意外と全然わかってなかったけど、ちゃんと理解すればシンプルな話だった。 スマホ対応とかするにあたって、うまく使いこなそう。 子要素の場合 要素の中にある特定の要素に対してスタイルを設定する場合には、「子セレクター」を利用します。書式 子…
テキストによるボタンを作っていて、上手くボタンの大きさが揃わなかった。 これ見て、親要素を揃えることで上手くできた。
他にもたくさんのサイトで紹介されてるけど、たまたまこのサイトを見て実装したので。 ここのCSSには書かれてなかったけど、個人的に実装するにあたっては、z-index で最前列にする処理を加えました。 あと、設置位置もpxだけでなく、%も使った。
よく見かける、-webkit 。 意味がよくわかってなかったけど、センタリングを調べる過程でこういう事らしいってのがわかった。 これならなんとなくでも意味を覚えておける。 （今回は使用しなかったけど） // text-align：center;を使用したCSSこれはテキスト…
文字にしても画像にしても、大体は text-align: center; margin: 0 auto; でなんとかなってしまうんだけど、地味に、、、 アイコン（アイキャッチ）［スペース］タイトルテキスト が上手くセンターにできなかった。 でも、ここを見たら、 フレックスボックス…
一応ざっくりと、margin:0 auto と text-align:center を使い分ける感じは掴んでいたつもりだけど、 text-align:center がうまく適用されない状況に度々モヤモヤしてた。 下記サイトの「CSSでセンタリングを成功させるコツ」が分かりやすかった！ 特に、「1.…
上付き vertical-align: super;下付き vertical-align: sub;数字は <span> を使ってピンポイントで小サイズに指定。</span>
中身が文字（テキスト）だけという、非常にシンプルな作りだったけど、ここ見ながらやったら、できた。 実際には、<body>の中身が<h1>しかなかったので、親要素への position: relative; は使わなかったけど。</h1></body>
レスポンシブの基本、メディアクエリの書き方 スタイルシートに記述する方を抜粋。/*@media以外の所は全てのサイズで読み込まれます。*/p { color:red;}@media screen and (min-width:480px) { /* 画面サイズが480pxからはここを読み込む */p { color:#edede…
flex等で横並びにしたアイテムを上下中央揃えにする。（採用） 親要素に対して記述。 align-items: center その他もわかりやすく使いやすいけど、とりあえず何をしたかで引っ張れるように、やった事ごとで記事を書いておく。
mix-blend-modeの使い方 mix-blend-modeの基本的な使い方をご紹介します。機能的にレイヤーが重なっていることが前提ですので、position:absoluteなどで要素を重ねて配置し、上のレイヤーにmix-blend-modeを適用します。
display:flexを使ってタイル状のレイアウトを作った時、ここが分かりやすかった。 まだベタ打ちレイアウトのみの実践だけど。 これが投稿と絡めて使えるようになったら便利。 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますfle…
ナビ（リンク）の中で一つだけ<a>タグをつけずに通常のテキストを入れたら、高さが変わった。 調整が面倒なので、<a>タグはつけたまま（<a>タグに当たっているスタイルを活かしたまま）上手くリンク無しにできないか探してみた。 aタグのリンクを無効化する方法（CSS</a></a></a>…
これは重宝します！ 線模様（ボーダー、ストライプ）背景を簡単に吐き出すCSS生成サイト
【CSS】要素の高さを100vhとしたときの問題点とは？3つの解決方法について解説 vh(view height)は、要素のサイズを指定する単位の1つで、100vhは、スマホの画面の高さを示します。以下のように指定します。 div { height: 100vh;} これに対して、100%とは親…
CSSでpositionプロパティの指定を解除する方法についてサンプルコード付きで解説します。 PCではpositionをabsoluteやfixedしていたものを、スマホではpositionを解除したいといった時にこちら役立ちます。 position: staticを用いるpositionをabsoluteやfix…
【2022年】レスポンシブデザインのブレイクポイントまとめ！ 途中にも記載しますが、とにかくブレイクポイントだけ知りたい方向けに先に載せておきます。 PC基準でコーディングする場合PC：設定なし（実質1025px以上）タブレット：1024px [max-width : 1024p…
CSSのfilterフィルタープロパティを使うと、画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることが可能です。このページではfilterの使い方をサンプルCSS付きで解説します。
