すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 ベース・リセットCSS・ノーマライズ クラスレスのCSSフレームワーク 超軽量のCSSフレームワーク 汎用性に優れたCSSフレームワーク Material DesignのCSSフレームワーク ユーティリティベースのCSSフレームワーク 特化型のCSSフレームワーク ツールキット ベース・リセットCSS・ノーマライズ sanitize.css -GitHub reset.cssと
トーナメント表を作る PHP関数：DW230
テーブルの1行目と6行目は対戦者の名前が入ります 線を表示するtdは28個通し番号を付けます（b101～b128） テーブルの線を表示する方法は 例 #b104{border:1px solid #ffffff;border-right-color:#666666;border-bottom-color:#666666;} #b104 → tdのid（id="b104"） border:1px solid #ffffff → 枠の太さ、実線、白 border-top-color:#666666; → 枠の上の線 border-bottom-color:#666666; → 枠の下の線 border-right-color:#666666; → 枠の右線 border-left-color:#666666; → 枠の左線 先に枠の太さ、実線（線のタイプ）、白（背景色）を指定 上の線や下の線だ
【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】
2017/02/14 (更新日: 2017/09/22) 【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】 PROGRAMMING WordPress Contact Form 7を見やすく表示するためのCSSです。 コピペ用に作りました。 フォームは使いやすさ＆見やすさが命だと思うので、同意出来る方はぜひご利用ください。 完成イメージ 基本的にはこんな感じです。入力必須項目の背景が黄色になっています。 エラー表示（バリデーション） 入力エラーがあると上記のようになります。シンプルっちゃシンプルですが、見やすいかなと。 設定画面のHTMLは下記のように入力 管理画面から編集できるHTMLはこのように設定してください。初期設定だとlabelとかありますが、不要なタグは省いています。 <span class="must">必須</span> お名前 [te
Contact Form 7のカスタマイズ（コピペOK、レスポンシブ対応）
WordPress プラグインで常に人気上位にランクインしている【Contact Form 7】 こちらのプラグインはお問い合わせフォームを簡単に作れるプラグインです。 簡単に作れると言ってもデフォルトの【Contact Form 7】のお問い合わせフォームデザインのままだと少しさみしいフォームになってしまいます。 サイトに合わせて、【Contact Form 7】のお問い合わせフォームも作りこんでみましょう！ 【Contact Form 7】の使い方〜カスタマイズ方法をご紹介いたします。 あわせてCSSのデザインカスタマイズ方法も掲載していますので、ご利用ください！ 最短10分で全ステップを完了出来ます。 初めは少し難しいかもしれませんが、手順に沿って行えば簡単に本格的な問い合わせフォームを作ることができます。 では、順番に行ってみましょう。 フォーム完成後は以下のようなデザインになりま
特定位置までスクロールすると要素が追従する処理を実装する
特定位置までスクロールすると、要素が追従してくる処理を実装してみます。 サンプルコード ヘッダーの下に配置したナビゲーションを、スクロール時は上部に追従するようにしてみます。 HTML .navを追従します。 <div id="page"> <header class="header"> ヘッダー </header> <div class="nav-wrapper"> <div class="nav"> ナビゲーション </div> </div> <div class="contents"> <p>メインコンテンツ</p> </div> </div> CSS 追従時は.is-fixedを付与して、position: fixed;が適用されるようにします。 .is-fixedが付与されたときに.navの高さ分ずれてしまうのを防ぐために、.navを.nav-wrapperで括って高さ分の領域を
ページ内リンクのジャンプ先の位置を調整する方法 | 大阪のホームページ制作会社YCOM
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 最近、ホームページのネタを書いてなかったんだけれど、 ちょっと技術的なネタを紹介。 別に最新のネタとかではないので、知ってる人は知っていると思うけれど、意外にみなさんちゃんとやってなかったりするページ内リンクのジャンプ先の位置の調整。 ページ内リンクとは ページ内リンクってあるよね、 通常リンクっていうと他のページに移動するっていうイメージだけれど、 ページ内リンクとはページ中のある部分に対して移動させるための方法で、 もちろん、他のページ中のある部分に移動させることだってできる。 具体的な使い方としては、 ページ内リンクを実現するときに、 ジャンプ先となる
ソーシャルボタンを並べた時に Facebook の Like Button （いいねボタン）だけが下にずれてしまう現象の修正方法
ソーシャルボタンを並べた時に Facebook の Like Button （いいねボタン）だけが下にずれてしまう現象の修正方法 昨日の日本の昼時に起きた Facebook の いいねボタンがずれる問題、問題自体は解決したのですが、ボタンが下にずれてしまう現象が発生していました。 Facebook の Like button（いいねボタン）がずれる現象が起きている – HAM MEDIA MEMO こちらは自分の問題？と確認したところ、とあるプロパティが追加されたための問題のようだったので、現象の修正方法を書いておきます。 いいねボタンだけが下にずれてしまう時の修正方法修正？ではなく対応方法的なのですが、このズレの問題はボタン内で利用されている vertical-align が bottom で設定されていることで起きているので、それの対応をします。 vertical-align を ba
Webサービスを独学で開発するときに役に立つWebサイト・フレームワークまとめ - ムカデノワラジ
この記事では、プログラミングをしてWebサービスを個人＆独学で開発するときに役に立つ＆役に立ったWebサービス、Webサイトを紹介します。 全般 質問サイト チュートリアル サーバー・データベース 開発環境 API フロントエンド・デザイン 配色 HTMLをHAMLに変換 フレームワーク CSSジェネレーター 背景 ロゴ 全般 質問サイト Qiita、stackoverflow(英語版)を使えばプログラミング初心者が頻繁に陥りがちなバグやエラーの解決法を見つけることができます。 Qiitaは最近は記事の質が下がっているようにも感じますが、初歩的な情報はまとめられているので問題ないでしょう。 より理論に踏み込んだ知識を得たいなら専門書を読み込むことが必要です。しかしウェブサービスを開発する目的を果たすだけなら「どのように？（HOW）」がわかれば「なぜ？（WHY）」は後からでもいいと思います。
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
当サイトをリニューアルしました。 ニュース記事にて少し記載したのですが、今回のリニューアルでは今までの制作アプローチとは異なり、勉強も兼ねて各種フレームワークを利用することでどのような制作フローの変化があるか、その結果どのようなメリット・デメリットがあるか確認するためでしたが、副産物として表示速度が以前より速くなった結果になりましたのでご紹介します。 リニューアルにおける前提条件 以前のリニューアルがいつだったかとニュースを確認していたところ、2013年8月にプチリニューアルをしたという記事がありました。数年程度かなと思っていましたが、まさか約5年も経過しているとは・・・その間に技術は進化しているはずですね。 今回のリニューアルにおける前提条件です。 WordPressはリニューアル前後も最新版を利用 オリジナルテーマ開発からテーマフレームワークであるGenesisを採用 SEOは独自開発
[Bootstrap]要素の順番を入れ替えて表示がしたい（push,pull） | altplus
ダディーです。 最近特定の画面サイズの時だけ、コンテンツの順序を入れ替えて表示したいな…と思うようになりました。 例えば写真と短い文章でブログを作る時、スマートフォンだと写真→文章の順番で置いたほうが インパクトが有って良いこともあります。 でもPCでは逆に文章→写真の順で横並びで置きたい…。 それを今までの記述で書くとこうなってしまいます。 <div class="container"> <div class="row"> <!-- タブレット/スマートフォンの画面構成を優先したため、 --> <div class="col-md-4 col-sm-12 col-xs-12"> 写真 </div> <!-- PCのときに文章が右に来てしまう --> <div class="col-md-8 col-sm-12 col-xs-12"> 文章 </div> </div> </div>
CSSで縦位置中央に配置する方法 - Qiita
-webkit-box-align: center; /* safari, Chrome対応 */ -moz-box-align: center; /* Firefox対応 */ -o-box-align: center; /* Opera対応 */ -ms-box-align: center; /* IE対応 */ box-align: center; /* ベンダープレフィックス無しも併記する */ が使える。 liタグの中にaタグがある場合（←本題） これには手間取った。 liタグ：ブロック属性 aタグ：インライン属性 であり、どうやらブロック属性の中にインライン属性があるときそのままだと縦位置中央揃えができないらしい。 結論、以下のような操作をすることで縦位置中央にすることができた。 まず、li要素（ブロック属性）をボックス属性に変換 li { display: -webkit-b
サーチアイコンをクリックすると検索窓がスライド表示する
Result アイコンをクリックで検索窓が飛び出す、みたいなの css#wrap {/*全体*/ margin: 50px 100px; display: inline-block; position: relative; height: 60px; float: right; padding: 0; position: relative; } input[type="text"] {/*入力部分スタイリング。width: 0px;にしておく*/ height: 60px; font-size: 20px; display: inline-block; font-weight: 100; border: none; outline: none; color: #555; padding: 3px; padding-right: 60px; width: 0px; position: abs
[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック
紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a Horizontal Line with CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。 Scalable: フォントのサイズを大きくしても調整される。 Fluid: 可変。 JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Chrome】オートコンプリートのとき、背景を黄色にしない - Qiita
seotech.click - coś dla pozycjonerów
http://demo.geekslabs.com/materialize-v1.0/form-validation.html