WEB製作– category –

：から始まる擬似クラスを複数つけたいときの記述方法 【記述順序を間違えると動作しない】 記述の順番が決まっているため順番間違えには注意。 nth-childで指定した要素にhoverの擬似クラス要素を指定するときはhoverを先に書きます。 /* hoverが動く */ ...

Figmaは初期状態でオブジェクトを斜めにするツールがありません！(2023年5月25日現在）そこでプラグインを入れます。使うプラグインは「SkewDat」です。 SkewDat SkewDatで斜めにしたオブジェクトのcssは　transform: matrix　でインスペクターに表示され...

【Format HTML in PHP】 JSbeautifyを使用して、PHPファイル内のHTMLコードにフォーマットするプラグイン。 Format HTML in PHP 標準のキーボードショートカット（ファイル＞環境設定＞キーボードショートカット）のオプション画面では、名前が「PHPでHTML...

タスクランナーで有名なものに「gulp」がありますが、CUIツールのため設定が面倒くさい。そこでできることは限られるけれど本格的なタスクランナーの代替で使えるPreposというWEB開発者にとっての神アプリがあります。 Preposを使う理由の一つに「オートリ...

デザインツールFigmaではPhotoshopのようにテキストツール上でフォントを選んでいるときにフォントのプレビューができません。 フォント名でしかフォントが選べない… そこでFigmaのフォントプレビューを実現するためにFigmaのプラグインの「Better Font Pi...

Figmaの初期機能が足りないときにはFigmaのCommunityで公開されている「プラグイン」を入れることで機能拡張ができます！ Figmaプラグインには無料・有料があり、有料のものは「サードパーティ決済」の表記があります。Figmaのアプリ版・ブラウザ版で同じ...

Gulpのインストールには「npm」のコマンドを使います。(「npm」のコマンドを使うためにNode.jsの事前インストールが必要) Node.jsのインストール方法 >> ■Gulpインストールまでのコマンド cd webpro npm init -y npm install gulp -g npm install gulp --s...

Node.jsを入れようと調べていくとコマンドラインからインストールする方法ばかり出てきますが、(昔の手法）2023年現在は公式のインストーラーが用意されています。 今回は「LTS推奨版」のMac インストーラーを使います。 【Node.js公式インストーラーを使...

割とよく見ることのある中央に線が引かれている左端に見出しが置かれているデザインのコーディング手法解説。 border-topで記述すると文字の下に線が重なってしまいますのでひと手間工夫が必要です。 このタイプは大きく分けて2つやり方があります。 線と...

スライドショープラグインのSwiperの丸部分である「ページネーション」のデザインを変更します。 ページネーションは「スライドショーが今何番目のものであるか？」を表示させるためのもので、Swiperではカスタマイズが可能です。 初期状態の場合はページ...

Swiperの矢印デザインを変更するには 矢印にかかれているCSSを上書きして違うデザインにする最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素を非表示にして新しい画像を背景画像として読み込ませる。もしくは疑似要素を非表示にし...

Google mapはiframe呼び出してサイト内に埋め込みますが、単純にiframeで埋め込む以外に加工して埋め込む以外に1処理加えることがほとんどです。 この記事はGoogle mapを埋め込むときの手法を紹介します。 【Google mapの埋め込み方法】 Googlemapを開いて...

【Slick JS】 有料ブログテーマAffingerでも使われているスライドショーライブラリ。基本的なスライドショーのスタイルは押さえてあります。 シンプルにカスタマイズしていけるのが使われている理由かなと感じました。 スワイプブレークポイントごとの設定...

【枠線で囲むタブCSSデザインのhtmlコーディングで詰む。】 タブのCSSデザインが大変だったのでメモ。 文字で説明すると難しいのですが、タブとタブの間をあけて枠線で囲むけれど、タブの下はくっついているように見せるデザインの指定です。 【目標デザイ...

【position: stickyが効かない、IE11対応】 結論 position: stickyが効かない場合の解決方法【CSS】 - termina.ioを参照した。 親要素全てのoverflow属性値をvisibleに変更する。 この状態になっているかどうか？はディベロッパーツールのコンソールを開き...

【disabledにしたチェックボックスのデザインを変更する方法】 結論 【「appearance: none;」】 appearanceプロパティはラジオボタンやポップアップメニューなどのユーザーインタフェースを指定するためのCSSで, noneを指定することで消すことができる。 n...

【右クリック禁止処理サイトでhtmlソースを確認する方法】 WEBサイト修正依頼が来た時に,「右クリック禁止処理」がされているサイトほど嫌なものはないです。 手間が何重にも増えますしね。 右クリック禁止処理サイトでもhtmlソースを見ることはできます。...

【IE11でテーブルの枠線が消える】 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上...

ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なって...

久しぶりにつまずいたのでメモ。 before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。 下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるの...

この記事はパスワードで保護されています

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配...

数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 【Swiperのメリット】 Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマ...

メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表...

『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラ...

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いもの...

「WordPress」を使っているときに、PHP,MySQLのバージョン情報を知りたいときがあります。 調べる方法は色々ありまして、一番カンタンなWordPressプラグインを使った方法からご紹介します。 【プラグイン「SERVER INFORMATION」をインストールする】 メニ...

【クリック率計測でログのcrawl-66-249-79-112.googlebot.comでハマる】 WordPressテーマでAFFINGERを使っているのですが、AFFINGERの便利なプラグインに「AFFINGERタグ管理マネージャー2」というプラグインがあります。 「AFFINGERタグ管理マネージャー2...