HTML・CSS
なんでBEMにするひつようがあるのだろうか？ htmlをこんな漢字に書く。 これだと冗長に見えるけどcssを書くときにネストしてあげる .notification-modal .notification-modal__header 通知一覧 .notification-modal__content アンパサンドで書くと結構わかり…
ポイント fontawsome css 疑似要素 実装 html css html %i.far.fa-bell.have-notification css .have-notification:after { content: "●"; font-size: 10px; position: absolute; right: 11px; top: 26px; color: red; } 疑似要素でまるを作って、positionで…
GitHub にHtmlを公開する html cssぐらいであれば、githubで公開できる 手順 1.html cssを作成する 2.githubレポジトリを作成する 3.pushする 4.github settingsでホスティングの設定をする 5. https://.github.io/<リポジトリ名> 1.html cssを作成する ディ…
モーダルを自作しみる 内容は、クラスの付け替えで実装しました。 display: none;とblockを活用 キャプチャー ボタンを設置 ボタンをクリックする Xをクリックするとモーダルが消える ソース <button id="target">クリック</button> <div id="box"> <div id="close">X</div> <form action=""> <label for=""> 名前: <input type="text"> </label> <br> <label for=""> Email: <input type="text"> </label> </form></div>
要素をフルフルする フルフルさせる要素を設置 # フルフルさせる要素 <div id="target">hello</div> css id targetで、箱みたいな要素を作成する shakeクラスではアニメーションをプロパティで動かせる animationの引数では、shakeの変数を見に行っていて、@keyframesで定義している…
ヘッダーを固定する 完成 手順大枠 cssを書く idをhtmlにつける jsで特定の高さになった場合にクラスをつける cssを書く positionで高さを固定 z-indexで要素を一番上に持ってくる #header-title.fixed{ position: fixed; top: 0; background-color: white; …
スマホ対応のブレイクポイント 結論 下記の様に分ければ良い！！ 今は560pxでスマホとPCの幅が区切られるらしい。 iphoneXでも、widthが370px程らしい # スマホ対応 @media (max-width: 559px) { } ## pcの対応 @media (min-width: 560px) { } 注意点 max-wi…
基本レイアウト 実装 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="wrapper"> <div class="header"> </div> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> </div> </div> </body> </html>
box-shadowの使い方 box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; 四角形に影をつけてみる .box{ width: 100px; height: 100px; background-color: skyblue; box-shadow: 3px 3px 4px; } 参考記事 saruwakakun.com
opacityの使い方 要素を透明にする事ができる よく使うケースは、hoverと組み合わせるケースがほとんどな気がします。 hoverとopacityを組み合わせた場合 li { list-style: none; } .link { color: blue; } .link:hover{ transition: .3s; opacity: 0.5; }
擬似要素の使い方 Hello worldの前と後ろに『』をつける 『Hello World』と一つのタグに入れる事もできるけど、記事要素を使うと分けられる .text::before{ content: '『'; font-weight: 10px; } .text::after{ content: '』'; color: skyblue; } これにはpo…
word-break 文字の折り返し の使い方 over flowとの違い over flowははみ出した要素を、非表示にしたりスクロールしたりします。 word-breakの場合は、記事などの文字など折り返しが必要な時に利用します。 everydayproguramming.hatenablog.com
zoverflowとは 要素ボックスからはみ出た部分を扱うcss 英語でも見るとそのままですね。 値の種類 visible はみ出たまま hidden はみ出た部分が隠れる scroll はみ出た部分が隠れてスクロールできる auto ブラウザーにより変動するラッシい 初期状態 横幅が5…
z-indexの使い方 キャプチャーのように、背面にある要素を前にだす事ができる .black{ z-index: 10; } .yellow{ } 黒の要素が前にくる
