【CSS】flexboxのgapを解説！余白指定が超便利に！ | ZeroPlus Media
gap はflexアイテム間の余白を指定するプロパティです。gap を使用すれば margin を使用するよりも簡単に、かつ柔軟にflexアイテム間の余白を指定できます。 この記事ではgapの使い方を解説します。 プログラミング学習でこのような経験はありませんか？ 目標に向けて何を学べば良いかわからない調べても解決策が見つからない現場レベルのスキルが身につくのか不安これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 なんでも相談できる専属メンターいつでも技術相談ができるプロ講師元IT企業CTO監修のカリキュラム条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 ただし、無料サービスの提供には参加者の数に制限があります。 少しでも興味がある方は、以下のリンクから
CSSでよく見かける【flex:1】を分かりやすく解説 | みやっちブログ
Flexboxを勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけると思います。 CSS初心者のころは、良く分からずなんとなく使っている方も多いのではないでしょうか？ この記事では、何気なく書いてしまう「flex: 1;」について丁寧に解説していきます。 「flex: 1;」とは？ 結論から書くと、flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形）です。 そのため、「flex: 1;」を理解するためには、まず上記3つのプロパティを理解する必要があります。 ここではさらっと流しますが、「flex: 1;」は、「flex-grow: 1;」、「flex-shrink: 1;」、「flex-basis: 0;」の3つ同時に指定したことと同じ意味になります。 ここからは、上記3
オンラインショップ | イクミママのどうぶつドーナツ
2024.3.28 thu 当社商品における小林製薬社「紅麹」不使用のお知らせ お客様各位 平素は弊社商品をご愛顧いただき、厚く御礼申し上げます。 この度、小林製薬株式会社が「紅麹関連製品の使用中止のお願いと自主回収のお知らせ」を発表しましたが、当社商品では小林製薬社製造の「紅麹」を使用しておりませんのでお知らせいたします。 一部商品のチョコレートに紅麹色素を使用しているものがございますが、こちらについても小林製薬の紅麹原料が使用されていないことをメーカーに確認しております。 今後とも弊社商品を安心してご愛顧いただきますようお願い申し上げます。
暮らしに役立つ情報を見つけよう！スマートでんきコラム | スマートテック
毎日使うものだからこそ、電気代が気になりますよね。この記事ではドライヤーの電気代について解説いたします。後半は美髪＆節約にもなるドライヤーの使い方をご紹介します。 ドライヤーの電気代はいくら？ 一般的なドライヤーの電気代は1回の使用で5.4円ほどです。この電気代の計算はドライヤーの消費電力や使用時間などを仮定して計算したものです。皆さんの使っているドライヤーの種類や使用時間によって異なりますので、ここからは実際にドライヤーの電気代を計算してみようと思います。 ドライヤーの電気代を計算 ドライヤーの電気代の計算式は以下の通りです。 ◆ドライヤーの電気代＝消費電力×使用時間×電力単価 それでは実際に計算してみましょう。 ・消費電力：1200W （1kWに換算するため1200W÷1000Wをする） ・使用時間：10分 （1時間に換算するため10分÷60分をする） ・電力量単価：27円 （1kWh
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
【CSS】hover(マウスオーバー)で画像を拡大する方法
hoverしたら画像を拡大させるのは実務でも非常に良くある実装です。 画像を表示させるには『imgタグ』と『background-image』の2種類の方法があります。 今回は両方のケースで画像を拡大する方法を解説していきます。
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
WAI-ARIA(ウェイ エリア)とは？初めて制作する方向けに解説！ | 東京のホームページ制作 / WEB制作会社 BRISK
アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま
【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ | 東京のホームページ制作 / WEB制作会社 BRISK
世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか？ PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作成する機会が多いだけに、どれも同じようなデザインになってしまう…とお悩みの方もいらっしゃると思います。 今回はそんなヘッダーのデザインを、各サイトごとにどのようなデザインの工夫がされているかに焦点を当てて見ていきたいと思います。 ヘッダー・メガメニュー・スマホメニューに絞ってデザインをチェックしていきます！ ヘッダーまずはベーシックなPC時のヘッダーから見ていきましょう。 背景で区切りレイヤー感を MEJINAVI2020｜目白大学まるわかりサイト 株式会社リブセンス レイヤー感を感じさせるデザインです。
CSSだけ！メガメニューを作る簡単テクニック（レスポンシブ対応） ｜ 向壁虚造
今回は、HTML&CSSだけで「メガメニュー」を作る方法を解説します。 コピペOKなので初心者でも簡単にレスポンシブ対応のメガメニューを実装できるかと思います。 また、レスポンシブ対応やメニュー開閉時にアニメーションを加えるテクニックも合わせて紹介するので、ぜひ最後まで読んでみてください。 メガメニューって何？ メガメニューとは、ドロップダウン時のスペースを拡張したメニューのことです。 上図のように、メニューの項目をマウスオーバーすると、下層メニューが表示される仕組みです。 十数個ほどのコンテンツ量であれば、メガメニューひとつで全ページにアクセスできるほどの収容力を誇ります。 また、デフォルトはスッキリと収まりますし、下層メニューを展開しても周囲のレイアウトを崩す心配もありません。 回遊率やユーザビリティを向上させたい人におすすめです。 HTML&CSSだけでメガメニューを作る方法 メガメ
【マウスオーバー】ヘッダーのグローバルナビゲーション展開【PCサイト用】
PCサイトでヘッダーのグローバルナビゲーションをマウスオーバーするとサブナビゲーションが展開します。透過の背景色の上にナビゲーションを配置して見やすくしています。 サンプルデモはこちら htmlのコードは下記になります。 メインビジュアルは背景画像で表示するため、空のdivタグを用意しclass=”mv-block”を付与します。 <header> <div id="header"> <ul class="menu-list"> <li><a href="#">メインメニュー01</a></li> <li><a href="#">メインメニュー02</a></li> <li><a href="#">メインメニュー03</a></li> <li><a href="#">メインメニュー04</a></li> </ul> <ul class="sub-menu-list sub01"> <li>
[レスポンシブ対応]メガメニューの作り方
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initiascale=1.0,user-scalable=no" /> <title>グローバルナビ：メガメニュー、レスポンシブ対応</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" /> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="conta
![[レスポンシブ対応]メガメニューの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/6140ce976a0597b9cacc030b333518ef35798f97/height=288;version=1;width=512/https%3A%2F%2Fatelier-light.com%2Fblog%2Fwp-content%2Fuploads%2F2021%2F07%2FNavigation-Bar-Mega-Menu-3.jpg)
【HTML・CSS】class属性を複数指定するには？CSSセレクタを並べる方法もサンプルコードで解説 - WEBCAMP MEDIA
HTMLでclass属性の値を複数指定 HTMLの要素にclass属性を指定すると、CSSで個別にスタイルを指定することができるようになります。 このclass属性には、複数の値を指定することができます。 <div class="sample bluebg"> <p>複数のスタイルが適用される。</p> </div> class属性を複数指定するには、上記のように、半角スペースを空けて別々のclass名を記述します。 「,（コロン）」や「.（カンマ）」では、うまく機能しないので、必ず半角スペースを利用してくださいね。 これにより、1つの要素に対して、複数のスタイルを適用することができるようになります。 非公開: 【 CSS 】classを指定して効率的にコーディングする方法を解説 複数のclass属性を指定するメリット 複数のclass名を指定することで、どのようなメリットが生まれるのでし
Sass - コーディングツール | お道具箱 for Web
/** * 引数のfontSizeをremに変換する関数 * @param fontSize フォントサイズ * * 例）18pxをremに変換 * font-size: fz(18); */ @function fz($fontSize) { @return ($fontSize / 16) * 1rem; } /** * 引数の最大画面サイズから指定されたpx数を元にvwに変換する関数 * @param maxScreenSize 最大画面サイズ * @param px 変換するpx数 * * 例）1440pxの幅に対して560pxの要素を可変させる * width: vw(1440, 560); */ @function vw($maxScreenSize, $px) { @return (($px / $maxScreenSize) * 100) * 1vw; } /** * 引数
【JavaScript入門】substringで文字列の切り出しを行う方法まとめ！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、文字列を部分的に抽出する際に便利な「substring」メソッドを学習していきましょう！ この記事では、 substringとは それでは、「substring」メソッドについて基本的な知識を勉強していきましょう！ 「substring」メソッドは、Stringオブジェクトの組み込みメソッドとして用意されており、文字列を分割したり任意の箇所を抽出したりする際によく利用されています。 まず最初に、一般的な構文とその使い方を集中的に学習しましょう。 substringの使い方 substringの構文と書き方 「substring」メソッドの一般的によく使われる構文は次の通りです！ var str = '文字列'; str.substring(開始位置, 終了位置); Stringオブジェクトの組み込みメソッドなので、文字列が格納された変数「str」
String.prototype.substring() - JavaScript | MDN
標準組み込みオブジェクトStringコンストラクターString() constructorプロパティString: lengthメソッドString.prototype[@@iterator]()String.prototype.anchor() 非推奨 String.prototype.at()String.prototype.big() 非推奨 String.prototype.blink() 非推奨 String.prototype.bold() 非推奨 String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prototype.fixed() 非推奨 S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssで文字の真ん中に線に線を引く方法 - Sato_Log
わたし漢方×世界一やさしいチョコレートandewのバレンタイン限定！漢方診断付き「ご自愛チョコレート」