buttonタグをクリックした際の周りの装飾を消す
htmlでbuttonタグをクリックするとタグ周りに青色の枠線、出ますよね？ 例の青ワクをcssで消しちゃいましょう！という話です。 buttonタグにoutline:0;を指定してあげます。 sample .btn...
View ArticleEleventyとCloudflareで、CSSが消えたり古いままになる!? 原因と直し方
はじめに ホームページを作っていて、デザインが反映されないことってありませんか？ 私は Eleventy（イレブンティ）というツールでサイトを作って、 Cloudflare Pages に公開していたときに、こんなことが起きました。 /styles.css が 404（見...
View Article要素を横並びにする方法
タイトル通り、今回はHTMLとCSSで要素を横並びにする方法についてまとめていこうと思います。 まず、要素にはブロック要素、インライン要素、インラインブロック要素があります。 それぞれの特徴は以下になります。 ブロック要素 特徴 要素が縦に並ぶ 幅と高さが指定できる ...
View Article第6回：【UX向上】デザイン（CSS）とフォーム管理でタスクアプリを洗練させる
みなさん、こんにちは！ 前回までに、Node.jsとReactを連携させ、CRUD操作とデータ永続化という、Webサービスの機能面を構築してきました。これでタスクアプリはデータが消えない本格的なものになりましたね。 しかし、機能が完璧でも、見た目が素っ気なかったり、使いづら...
View ArticleiOS 26のSafariで100vh的なスタイルを上手く表示するためのCSSハック
問題 iOS 26のSafariでは、上部のステータスバーと下部のタブバーが透過してしまい、背景が透けて見える問題が発生しています。 次の画像は、画面いっぱいにグレーの背景を敷いたときのSafariとArcでの見え方の差です。 Safari Arc ...
View ArticleリセットCSS
リセットCSS使用状況の比較表 順位 リセットCSS名 特徴 使用状況の傾向 1位 Normalize.css ブラウザ間のスタイル差異を正規化 最も広く使用されている 2位 Eric Meyer’s Reset CSS デフォルトスタイルを完全にリセッ...
View ArticleFigmaデザインカンプからコーディングする方法
Figmaデザインカンプからコーディング練習した時のメモを記載します。 題材はこちらを利用させていただきました。 【入門】無料デザインカンプからのコーディング練習【ライブコーディング動画あり】 デザインカンプからのコーディングのやり方をライブコーディングで...
View ArticleShadowDOMのカプセル化を破る「継承プロパティ」
対象読者 👤 ShadowDomでstyleをカプセル化したい方 ShadowDomでstyleをカプセル化する際の注意点を知りたい方 まとめ 💡 ShadowDOMは基本的にページのJavaScriptやCSSの影響を受けない ShadowDOMはShadowH...
View ArticleCSSだけで無限ループスライダーを作る
はじめに こんにちは。CMA制作部スタッフYaatonです。 WEBサイトのデザインでは、複数の画像が流れるように移動するスライダーがよく使われます。 JavaScriptのライブラリ(SlickSliderやSplideなど)を使うことでも実装は可能ですが、「ただ流れて...
View Article【CSS】Flexboxとは
今回はQiitaに記事を書いてみたかったので、お試し投稿として、Flexboxについてまとめます。 なんかFlexboxって、なんか魔法みたいな感じしたので、自分の為のアウトプットです。 基本的なことだけ書きたいと思います。初心者なのでお手柔らかにお願いします。 Flex...
View Article【CSS】:has()疑似クラスの実用コード集
はじめに :has()疑似クラスは、子要素の存在や状態に基づいて親要素をスタイリングできる画期的な機能です。 従来のCSSセレクタは親から子への一方向の選択しかできませんでしたが、:has()により逆方向の選択が可能になりました。 この機能は2024年以降、Chrome、...
View Article【CSS】PC版とSP版でコンテンツの順序が大きく異なるデザインを実装するときの対応【今さら聞けないHTMLの基礎】
PC版とSP版（スマホ版）のデザインが異なるサイト、よく見かけますよね。当社のサイトももちろんそうなっています。 株式会社Sekappy https://sekappy.com/ これは主にCSSを用いて、画面幅の変化に応じてデザインが切り替わるように制御しています。 昔は...
View ArticleShiftキーで複数のチェックボックスを一括選択する方法
1. はじめに 今回は、純粋な JavaScript（ライブラリなし） で、メールクライアント風のチェックボックスリストで、Shiftキーを押しながらチェックすると中間の項目もまとめてチェックできる機能を作ります。 デモ⬇️ 2. 実装 html部分
View Article【フロントエンド講習】CSSで画像をもっと綺麗に！トリミングと加工の実践例
フロントエンド講習とは？ 弊社OBGでは、毎月第2土曜日の11:00〜19:00にフロントエンド講習を行っています。 主にHTML、CSS、JavaScript（以下JS）を使ったWebに関しての講習で、今回は普段から実施しているオンライン開催の模様を今回展開させていた...
View ArticleAngularでBootstrapを導入して簡単にデザインが整ったWebページを作成する
Bootstrapとは Bootstrapは旧Twitter社のエンジニアが開発した、HTML、CSS、JavaScriptで構成された、Webサイトを効率的に開発するためのオープンソースのフレームワークです。 主な特徴として、レスポンシブなデザインのレイアウト、細かなス...
View ArticleCSSでアニメーション付きのアコーディオンを実装する方法
はじめに jQueryでアコーディオンを実装する場合、slideToggleメソッドを利用すると簡単に実現できます。しかし、素のJavaScriptで実装しようとすると、コンテンツの高さ指定など、意外と難易度が高くなりがちです。 実は、CSSのみでアニメーション付きのアコ...
View ArticleHTML,CSSを勉強した
アプレンティス11期生の吉川です。 本記事ではHTML、CSSついてまとめます。 復習および、現時点での自分の認識を再確認する目的もあります。 HTML HTMLはHyper Text Markup Languageの略でマークアップ言語と呼ばれるものです。 HTMLでは...
View Articleフロントエンド学習の順番
HTML https://developer.mozilla.org/en-US/docs/Web/HTML CSS https://developer.mozilla.org/en-US/docs/Web/CSS JavaScript（JS） https://javasc...
View Article【JavaScript】styleプロパティの多用が推奨されない理由
はじめに JavaScriptのstyleプロパティを使うこと自体は問題ありませんが、多用することは推奨されません。理由と背景を整理して説明します。 styleプロパティとは JavaScriptで要素のスタイルを直接操作する方法です。 document.getElem...
View Article