横並び時に特定要素の高さを揃えたい場合の実装（備忘録） - freefuntimes
今回は、横並び時に特定の要素の高さを揃えたい場合の実装について、CSSだけで対応する方法、JSを使って対応する方法を紹介していきます。 具体的には、下記になります。 CSSで横並びで高さを揃える方法1（親要素・子要素・孫要素）CSSで横並びで高さを揃える方法2（親要素・子要素・孫要素・ひ孫要素）JSで横並びで折り返すカラムの行に応じて高さを揃える方法JSで横並びで折り返さないカラムで高さを揃える方法 demo それでは実装に入っていきますが、最初にすべてのコードを紹介してから詳細に入っていきたいと思います。 HTMLの記述について <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
【MW WP Form】選択肢によってメール内容を変える | エムトラッドブログ
MWformで以下のような選択項目を作ります。 [mwform_select name="select_inquiry" id="select_inquiry" class="select_inquiry" children=":選択してください,WEB制作について,採用について,その他について" post_raw="true"] 選択した内容ごとに自動送信の返信メールの内容をかえたいとき、ワードプレスのMW WP Formの自動送信返信メール設定の部分ではなくfunction.phpへの記載が必要です。 「採用について」を選択した場合の自動送信メールの内容を設定するコード function my_mail( $Mail, $values, $Data ) { if ($Data->get( 'select_inquiry' ) == '採用について'){ $Mail->body = $D
MW WP Formで内容に応じて自動返信メールや管理者宛メールの内容を変更する方法 | KUBOGEN
WordPressでお問い合わせを実装できるプラグイン「MW WP Form」で入力あるいは選択された内容によって、自動返信メールや管理者宛メールの内容を変更する方法を紹介します。 自動返信メールの内容を変更 条件分岐によって自動返信メールの内容を変更したい場合は、フィルターフックを使用して以下のように記述します。 functions.php function my_mail($Mail, $values, $Data) { if ($Data->get(‘customer’) == ‘一般’) { $Mail->subject = ‘件名が入ります。’; $Mail->body .= <<<CONTACT 本文が入ります。本文が入ります。 CONTACT; } if ($Data->get(‘customer’) == ‘法人’) { $Mail->subject = ‘件名が入ります。
JavaScriptライブラリRellax.jsの使い方を解説！簡単にパララックスを実装しよう！ | 模写修行メディア
パララックスを使うメリット・デメリット パララックスを使用する際のメリット・デメリットについて紹介します。 パララックスのメリット・デメリットは表裏一体なところがあります。**上手く使えばメリットとなり、誤った使い方をするとデメリットとなってしまします。**使用箇所は慎重に選定した方が良いです。 メリット 見せたいものをピンポイントで見せられる デザインの幅が広がる ストーリー性を持たせることができる これらのメリットを紹介します。 💡 見せたいものをピンポイントで見せられる 動きやスピードを操作することで、他要素との差別化が可能となり、ユーザーに見せたいものをピンポイントで見せやすくなります。 💡 デザインの幅が広がる パララックスは、デザイン性の高いサイトに取り入れられることが多いです。パララックスを使用することで、デザインの幅を広げるとともに、インパクトを与えることができます。
shadow DOM」ってなに？特徴と使い方 - Qiita
【この記事を読んでほしい人】 ・shadowDOMについて何もしらない人 ・shadowDOMの使い方について知りたい人 shadowDOMってなに？ MDNから引用した文章は下記です。 ウェブコンポーネントにおける重要な側面の一つが、カプセル化です。マークアップ構造、スタイル、動作を隠蔽し、コード上の他のコードから分離することで、他の部分でクラッシュすることを防ぎ、コードをきれいにしておくことができます。シャドウ DOM API はこの主要部分であり、隠蔽され分離された DOM を要素に取り付けるための方法を提供しています。この記事ではシャドウ DOM を使う基本を記述しています。 通常のDOMを「Light DOM」と呼び、見えているDOMから分離されたものを「Shadow DOM」と言われています。 わかりそうでわからない…。 ここからわかったことは 何やら表に出ているコードと分離で
【JavaScript】ページの最下部に来たときにイベントを起こす
いま閲覧しているページの最下部（一番下）に来たとき（見えたとき）にイベントを発動させたいときの方法メモ。 【JavaScript】ページの最下部に来たときにイベントを起こす方法 ページの最下部に来たときに 固定ヘッダーを上に上げて隠したい トップを戻るボタンを出現させたい ってケース、よくありますよね。 そんなときに使ってるコードを備忘録としてメモ的に書き残します↓ const allHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.
【CSS最新仕様】「content-visibility」でサイト表示速度を改善する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
今年2020年8月、アップデートによりCSSプロパティ「content-visibility」がChrome85にて実装されました。 「content-visibility」では、値を「auto」に設定することによって指定した要素がビューポート（表示中の画面内）に表示されるまで、レンダリング（読み込んだデータを整形して表示すること）を実行しないというような動きが可能になります。 その結果不要なレンダリングが実行されなくなり、サイト全体の表示速度を改善することができます。 今回は「content-visibility」の詳細な仕組みや実装方法などをご紹介し、実際に速度検証をしていこうと思います。 レンダリングの遅延実行について 以前ラボ内のこちらの記事で似たような機能としてlazy-loadの画像遅延読み込みについて解説されているので、一度目を通していただきたいのですが、簡単に言うとこちらの
CSS Tips - currentColor を使ってテキストと同じ色を指定しよう
CSS3 から使えるようになった currentColor の使い方について紹介します. currentColor とは currentColor とは, CSS 上で変数のように使えるキーワードで, プロパティの値に指定することで, その要素に適応されている color と同じ値を適応してくれる便利な機能です. .target { color: red; border-bottom: 1px solid currentColor; /* color で指定している色が適応される */ } もちろん border-color 以外にも background-color や box-shadow といった色を指定する箇所にはすべて使うことができます. サンプルプログラム 実際に適応したデモを作ってみました. 使い方のイメージが掴めればと思います. <!doctype html> <html>
エクスプローラのタブ化で便利に
パソコンを利用していると｢エクスプローラ｣は必ず使いますよね。 パソコンで何かのフォルダを開いた時も、必ずそのエクスプローラが起動してフォルダ内容が表示されるからです。 ですから、複数のフォルダを開くと こんな具合にエクスプローラが複数開いて重なり合って表示されてデスクトップを埋め尽くして行く、これがなかなか邪魔くさい（笑） これをスッキリとさせるのが「エクスプローラのタブ化」と言う方法なんです。 1つのエクスプローラに「タブ」を設けて、そこに新たなエクスプローラが開くようにしてあげれば、デスクトップ画面もスッキリする訳です。 それを実現するソフトには色々とあります。 ・Clover ・FenrirFS ・X-Finder ・秀丸ファイラーClassic ・BroadFiler ・QTTabBar 等です。 私はWindows8.1まではCloverを利用して来たんですが、Windows1
【JavaScript】addEventListener()で設定できるイベント一覧！
・IT/Web系エンジニアの経験者の方 ・どこの転職エージェントを利用しようか迷っている方 それなら、キッカケエージェントにご相談！ キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！ また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！ 転職エージェントに迷っている方、まずは無料でキャリア相談から！ (この記事は2023年07月30日に投稿されました。) JavaScriptのaddEventListener()を使用することでイベントが発生した際の処理を行うことができます。 そして、JavaScript上で発生するイベントはたくさんあり、それらのイベントをaddEventListener()に指定して実行することが可能です。
JVN#99312352 MTS Simple Booking Cの脆弱性とその対応について
WordPressのプラグインとして動作するMTS Simple Booking 簡易予約システムに、クロスサイトスクリプティング(以下XSSと呼びます)の脆弱性が存在することが判明しました。 この脆弱性を悪用された場合、WordPressの管理画面を操作する管理者が悪意ある第三者の攻撃により、第三者が仕込んだ任意のJavaScriptプログラムを実行させられてしまう危険性があります。 ページ下部に置き換えの必要がある修正ファイル、あるいは、PHPプログラムの知識がある方は直接プログラムの編集により対応いただけるよう説明をいたします。それぞれの状況に合った方法で対処くださるようお願いします。 お手数をお掛けして大変申し訳ございません。ご協力下さいますようよろしくお願いします。 該当製品について ・無償版の「MTS Simple Booking C Ver.1.2.1」ならびに他のバージョン
「DKIM」「DMARC」への対応完了と、Gmail宛ての送信に関するお知らせ（Gmail送信者ガイドラインへの対応）
2024/01/31 16:37 「DKIM」「DMARC」への対応完了と、Gmail宛ての送信に関するお知らせ（Gmail送信者ガイドラインへの対応） 平素はヘテムルをご利用いただき誠にありがとうございます。 ヘテムルでは2024年2月のGmail送信者ガイドライン変更に伴い、メール送信について「DKIM」「DMARC」について対応いたしました。 メール送信者のガイドライン - Google https://support.google.com/mail/answer/81126 ■ Gmail送信者ガイドラインの変更について ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ Gmailメールアドレス宛に1日に5,000通以上のメール送信する方の場合、ご利用の独自ドメイン、およびサブドメインについて以下全ての認証に対応する必要があります。 ・SPF ・DKIM ・DMARC ※Gmail送信者
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
【Javascript】CSS・JSファイルを遅延読みして表示速度を向上させる
当記事では、CSS・JSファイルを遅延読みして表示速度を向上させる方法について注意点も含めて記します。 ユーザーがスクロールしたタイミングで遅延読み込み対象のファイルを読み込むという方法を採ります。 遅延読み込みのメリット この記事を訪れていた方には説明の必要はないかもしれませんが、CSS・JSファイルを遅延読み込みするメリットについて一応述べさせていただくと、「ページの表示速度の劇的な向上が見込める」という事に尽きるかと思われます。 初期表示に必要のないスタイルやスクリプトの読み込みを遅らせる事でページの表示速度が向上します。遅らせるスタイルやスクリプト処理が重たいほど、劇的な表示速度向上が見込めます。 遅延読み込み対象のファイルは初期表示時には一切読み込まず、ユーザーがスクロールを行ったときに読み込むという方法を採ります。 遅延読み込みのコード（初級編） 動的にCSS・JSファイルを読
カラーコード（16進数）で透明度を指定する方法
Androidアプリを作成中に、色の透明度を変えるにはどうしたらいいか調べたので、今回はそのメモです。 今まで、例えば黒を表現するには#000000と書いていました。 見慣れた形ですね。左から二桁ずつ、R（赤）、G（緑）、B（青）と割り当てられています。 で、本題の透明度を指定するには、RGBの前にアルファ値（二桁）をつけて、aRGBにしてあげればいいそうです。 具体的には黒だと、#FF000000みたいに書きます。 これだと、#000000と変わりありません。いわゆる不透明です。 透明にしたい場合は#00000000と書きます。 すると、100%透明になり、なにも見えません。 つまり、アルファ値が00に近づくにつれて色が薄くなり、FFに近づくにつれてはっきり濃く表現される、ということです。 なにに使えるかは分かりませんが、知っておいて損はない…かな。
【GSAP】横スクロール、パララックス、時間差出現、ドラッグ操作を盛り込んだ実装
1.実装イメージ 実装イメージは以下の通りです。 See the Pen 【GSAP】横スクロール+パララックス+時間差+ドラッグ操作=お洒落 by りょーすけ (@s_ryosuke_1242) on CodePen. 2.HTML 次にHTMLです。 ドラッグ操作を可能にするための要素が11行目にあります。（proxy => 代理、代わり） <body> <main> <!-- SLIDER --> <section class="description"> <div class="container"> <h2>途中から横スクロール</h2> <p>横スクロール中はパララックス</p> </div> </section> <div class="vertical-slider__wrap"> <div class="proxy"></div> <section class="vert
エンジニアのための技術記事プラットフォーム「Chietta」を個人開発で作りました
はじめに 休憩中や電車とかの隙間時間にZennやQiitaのトレンド記事をよく読んだりするのですが、色んなサイトの技術記事をまとめたサービスがあれば便利だなと思い、Chiettaというサービスを個人で開発したので紹介します！ ※内容に間違いなどあれば教えていただけると幸いです どんなサービス？ Zenn、Qiita、企業ブログなどをまとめて見たり検索できるサービスです 検索 記事の共有 良いと思った記事を共有できる場が欲しい という個人的な願望があって、Xで「この記事良かった」みたいなことをつぶやきを見るのが好きなのでこの機能を作りました。ぜひここで共有してください！！！（非公開にもできるので積読用としても使えます） カテゴリのフォロー 開発したきっかけ 自分自身よく電車とかの隙間時間に技術ブログを読んだりしているのですが、その媒体が主にZenn, Qiita, Twitterのように複数
CSSファイルをJSで読み込むとレンダリングを妨げない問題
Beako.jsが抱えている、3つの大きな問題の二つ目です。 一つ目と三つ目はこちら レンダリング妨げない問題 HTMLでlinkタグを書くと、CSSファイルが読み込まれるまでレンダリングを妨げて、レイアウト崩れが発生するのを防ぎます。しかし、その挙動は初回だけで、JavaScriptで動的にlinkタグを書いてCSSファイルを読み込んでもレンダリングは妨げられず、レイアウト崩れが発生します。 再現してみる 例として、CSSフレームワークのSemantic UIをcdnjsから動的に読み込んで、併せてボタンを追加してみます。 ※例としてSemantic UIを使用していますが、Semantic UIの問題ではなく、あらゆるCSSファイルで発生します。 const link = document.createElement('link') link.setAttribute('rel', '
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ときどきWEB | 『スマホ・タブレットのサイズ/解像度一覧作ってやんよ!!!』
Android 画面サイズ・ピクセル数早見表
