CSS/SCSS/SASS

【CSS】レスポンシブ対応したハンバーガーメニューをCSSのみで作る

■ はじめに レスポンシブ対応したハンバーガーメニューを作ろうと ネットで漁ったけど、ほとんどが jQuery を使ったものだった。 今回は、jQuery を使わずに、CSSのみで作ったものを調べてみた。 目次 【1】ハンバーガーメニュー(Hamburger menu) 【2】…

【Sass】Sass ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2021/03/15/221755 の続き。 前回で、Sass(サス)の ネスト構造を取り扱ったので 今回は、基本的な文法を学んでいく。 SassMeister https://www.sassmeister.com/ 目次 【1】&(アンパサンド) 【2】…

【Sass】Sass ~ 入門編 ~

■ はじめに 最近、フロントエンドを書いていて Sass (サース / サス) について、あんまり勉強してなかったので いい機会なので、勉強してみた 目次 【1】Sassとは 特徴 【2】記法 【3】開発環境 1)Web 2)VS Code 【4】サンプル 【1】Sassとは * Sas…

【CSS】【JS】【TS】 セレクタ

■ はじめに https://dk521123.hatenablog.com/entry/2021/03/06/234935 https://dk521123.hatenablog.com/entry/2021/03/05/113518 https://dk521123.hatenablog.com/entry/2015/05/15/000926 などで、CSSセレクタやJavaScriptのdocument.querySelector/quer…

【CSS】 レスポンシブ / メディアクエリ ~ @media ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37602012.html でやった吹き出しの向きをデバイスによって変えてみる 補足:吹き出し * 吹き出しの復習については、以下の動画サイトを参照。 動画 https://dotinstall.com/lessons/balloon_css ■ メディアク…

【CSS】 アイコン を アニメーション表示する ~ Font Awesome Animation ~

■ はじめに Font Awesomeのアイコンをマウスオーバーした際に動かしてたくて色々と調べてたら 「Font Awesome Animation」ってのがあったので試してみた。 補足 : Font Awesomeのみで可能なアニメーション * アイコンを「回す(fa-spin)」「チカチカ(fa-pu…

【CSS】 マテリアルデザインの丸ボタンを自作する

■ はじめに https://blogs.yahoo.co.jp/dk521123/37632575.html でも扱ったが、無料版の Material Design for Bootstrap 4 では 丸ボタンすらない。 以下のサイトを参考に自作してみる http://materialdesignblog.com/creating-a-simple-material-design-act…

【CSS】 フローティングラベル(placeholder が動いてラベルになる)

■ はじめに フローティングラベル(placeholder が動いてラベルになる)が興味あったので 色々と調べてみた ■ 独自実装 https://coliss.com/articles/build-websites/operation/css/css-only-floating-label.html を参考に実装。 サンプル * 以下の関連記事…

【CSS】CSS ~ 入門編 ~

【1】基本的な文法 HTML <h1>Hello World</h1> CSS h1 { color: red; } 構文 【セクター】 { 【宣言 (プロパティ: 値)】; } 【2】基本ルール 1)後に記載した方が有効になる 後勝ち サンプル h1 { color: red; color: blue; /* こっちが有効 */ } 【3】コメント文…

【CSS】 CSS で図形を描く

■ CSSで四角形を描くには... / width・height・background-color サンプル <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> <style type="text/css"> /* 四角形 */ .square { width: 100px; height: 200px; background-color: #ff9800; } </style> </head> <body> <div class="square"></div> </body> <…</html>

【CSS】z-indexプロパティ / positionプロパティ

■z-index * ボックスの重なりの順序を指定する * 0を基準として、値が大きいものほど上になる。 注意 [1] z-indexが効かない場合がある http://d.hatena.ne.jp/masomi79/20131125/1385392242 より ~~~~~~~ 1) 親要素がposition:static;もしくはposit…

【CSS】DIVタブ(ブロック)からはみだした場合の対処

■ 対処策 1) overflowで、領域内に収まりきらない場合の対処を指定する 2) flowで、ボックスを左/右に寄せて、逆側にテキストなどを回り込ませる 3) word-break:break-allで自動折り返しを行う 参考文献 * 「word-break:break-allで自動折り返しを行う」 htt…

【CSS】 アイコン を 表示する ~ Font Awesome ~

■ はじめに * アイコンを探してたのだが、商用OKなフリーでなかなかいいのがなかった。 CSSベースででき、かつ、色も付けられるツール Font Awesome があったので試してみる。 ■ Font Awesomeとは? * アイコンフォント * 商用利用可能(詳細は、以下の「ラ…

【HTML】【CSS】要素を重ねるには...

■ サンプル1:画像を2つ重ねる場合 <html> <body> <h1>サンプル1</h1> <div style="position: relative;"> <img src="./ImageA.jpg" alt="重ねる画像" style="position:absolute;"/> <img src="./BaseImage.jpg" alt="ペース画像" /> </div> </body> </html> 補足:使用している主な技術:「position」 * absolute : 絶対位置 * relative : 相対位置(通常の位置を基準とした相対位置) * fixed : …

【CSS】Font関連のCSS ~文字色 / 文字サイズetc~

■ Font関連 HTMLのソース例 <div class="sample">XXXX</div> CSSのソース例 div.sample { text-align:center; // 文字位置 padding:10px; // 空白サイズ font-weight:bold; // 太字 text-size:200%; // 文字サイズ background-color:#FFCACA; // 文字の背景色 } ■ 単位 【1】 em指定 /…

【CSS】CSS を取り込むには...

■ HTML内部に記述する方法 * styleタグに書く 構文例 <style> h1 {color: red; } </style> ■ 外部CSSを取り込む方法 * 外部CSS「css1.css」を取り込んでいる 構文例 <link rel="stylesheet" href="./css1.css" type="text/css"> ■ 複数クラスを指定する方法 * CSSのクラス「bgcRed」と「fsSmall」をpタグに指定している 構文例 <p class="bgcRed fsSmall">赤くて</p></link>…

【CSS】CSS ~ あれこれ ~

■ はじめに 目次 【1】1px移動させるには - position 【2】表示・非表示の設定 - visibility:visible/hidden 【3】表示・非表示の設定 - display 【4】透過度を指定する - opacity 【1】1px移動させるには - position <div style="position:relative; left:1px;"> ああああ </div> 【2】表示・非表示の…