トップ > CSS/SCSS/SASS

CSS/SCSS/SASS

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

CSS/SCSS/SASS

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

【Sass】Sass ～ 基本編 ～

CSS/SCSS/SASS

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

【Sass】Sass ～ 入門編 ～

CSS/SCSS/SASS

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

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

JavaScript TypeScript CSS/SCSS/SASS

■ はじめに 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 ～

CSS/SCSS/SASS

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

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

CSS/SCSS/SASS

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

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

CSS/SCSS/SASS

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

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

CSS/SCSS/SASS

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

【CSS】CSS ～ 入門編 ～

CSS/SCSS/SASS

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

【CSS】 CSS で図形を描く

CSS/SCSS/SASS

■ 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プロパティ

HTML CSS/SCSS/SASS

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

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

HTML CSS/SCSS/SASS

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

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

HTML CSS/SCSS/SASS

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

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

HTML CSS/SCSS/SASS

■ サンプル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～

HTML CSS/SCSS/SASS

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

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

HTML CSS/SCSS/SASS

■ 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 ～ あれこれ ～

CSS/SCSS/SASS

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