ウェブ制作

Visual Studio Code

英単語のスペルチェックを行うVisual Studio Codeの拡張機能【Code Spell Checker】

「Code Spell Checker」は、VS Codeでのタイポ(英単語のスペルミス)を自動的にチェックしてくれる拡張機能です。ファイル名やディレクトリ名、...
ウェブ制作

最近学んだHTML・CSS関連TIPS10選

様々な場面で役立ちそうなものや今後の標準になりそうなもの等、HTML・CSSに関する新しく学んだものを紹介します。特に後半で紹介している @layer や @s...
Visual Studio Code

マークを付けた任意の行に移動可能なVS Codeの拡張機能【Bookmarks】

行数の多い文書やソースコードを編集中、離れた行に書いてある変数や関数の確認、頻繁に修正する可能性がある箇所など、任意の行に素早く移動したいと思ったことはないでし...
ウェブ制作

最近活用し始めたウェブ制作で役立つCSSプロパティや疑似クラス10選

CSSプロパティや疑似クラス等、比較的新しいものや最近知ったものの中から実戦で役立ちそうなものを紹介します。 CSSプロパティ appearance - ブラウ...
Visual Studio Code

VS Codeのワークスペースやフォルダーを簡単に切り替える拡張機能【Project Manager】

Visual Studio Codeのワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能「Project Manager」を紹介します。 Pr...
PHP

Facebookページの投稿を取得してPHPで表示する【2022年版】

企業やグループ等のFacebookページに投稿された記事データを取得してウェブサイトに表示する手順です。今回はPHPで表示する方法を使っています。 使用したバー...
ウェブ制作

クリックで開閉するアニメーション付きアコーディオン【CSS/JavaScript/jQuery】

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。今回は主に<details>(詳細折りたたみ要素)とJavaScriptを使って実現す...
ウェブ制作

ある日FacebookグラフAPIによるフィード取得ができなくなっていた

過去に制作したウェブサイトでFacebookグラフAPIとアクセストークンを使ってFacebookページの記事データを取得し一覧表示していたのですが、何らかのエ...
Visual Studio Code

Visual Studio CodeでのSass導入と基本設定【Live Sass Compiler】

Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽...
ウェブ制作

フォントサイズの指定方法と違いを見直してみる【CSS】

ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。 rem, em, px, % 等、単位の選び...
PR