コーディング記事一覧
詳細を見る
Webコーディング
Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法
コーディングして、ブラウザで確認する際に「Safariだけアイコンが表示されない！」といった問題に直面したことはありませんか？ その問題、CSSに記述を追加するだけで対応できます！ 前提条件 この記事を理解するにあたって という前提がある上でお読みください。 そもそもアイコンフォントが読み込めていない方は別の問題があると考えられるので、この記事の対象外になりますのでご注意ください。 マテリアルアイ […]
詳細を見る
Webコーディング
【WordPress】カスタムフィールドこと始め。導入から出力までの5ステップを解説！
WordPress実装には欠かせない機能「カスタムフィールド」。 カスタムフィールドを利用することで、投稿の自由度が上がり、さまざまなクライアントの要望に答えることができるようになります。 今回はそんなカスタムフィールドの使い方の基礎を紹介します。 そもそもカスタムフィールドって何？という方は… そもそもカスタムフィールドとは？という方は以下のコンテンツをご覧ください。 カスタムフィールドの概要を […]
詳細を見る
Webコーディング
【WordPress】カスタムフィールドってなんのこと？今更聞けないけど知っておきたい基本のキ。
WordPressでWebサイトを作るのに欠かせない「カスタムフィールド」。 そもそもカスタムフィールドとは何か、どういった役割があるのかを解説します。 カスタムフィールドとは？ カスタムフィールドとは、WordPressサイトに特定のフィールドを追加できる機能です。 WordPressの投稿のデフォルトであるフィールドは といったものになります。 基本的にはこれらだけで事足りることが多いのですが […]
詳細を見る
お知らせ
セッションとCookieの7つの違いをざっくり解説
Web制作や開発をしているとよく使用する「Cookie」や「セッション」。 あなたはこの違い、説明できますでしょうか？ Cookieとセッションは、Webアプリケーションにおいて、ブラウザとサーバー間で情報を保存・管理するための技術ですが、異なる点がいくつかあります。 今回はCookieとセッションの違いについて紹介します。 違い1 : 利用目的 そもそも、Cookieとセッションはなぜ必要なのか […]
詳細を見る
Webマーケティング
ページ診断ツールLighthouseを使ってWebサイトのページ表示速度を最適化する方法
Web制作の仕事をしていると「ページ表示速度」が離脱率に与える影響が大きいというのはご存知でしょうが、ページスピードの「最適化の方法」についてはあまり知られていない印象です。 スクールや書籍、教材には詳しく言及されず、実務で初めて身につけるという人も多いでしょう。 そこで、今回はWebサイトのページ表示速度を上げる方法を紹介いたします。 前提条件 前提として、今回はLighthouseやPageS […]
詳細を見る
Webコーディング
WordPressのカスタム投稿タイプでよくある質問（FAQ）を作ろう
Webサイト制作の仕事をしていると「よくある質問」を実装することが多々あります。 静的なコーディングでも作ることはできるものの、お客さんが更新することができないため、運用コストが上がってしまうことも…。 そこで、WordPressのカスタム投稿タイプの機能を使用することで、更新可能な「よくある質問」を作ることができます。 今回はカスタム投稿タイプでよくある質問を作る方法を紹介いたします。 この記事 […]
詳細を見る
Webコーディング
JavaScriptのDOM操作、覚え方のコツ
コーディング初学者の方が難しいと感じる “JavaScript”。 HTML/CSSはマークアップだけだったのに、急に変数やら条件分岐、繰り返しなどのロジックが入ってきて混乱することでしょう。 そんなあなたのためにJavaScriptが楽しくなるちょっとしたコツを紹介します。 そもそもDOM操作って何？ JavaSciptではDOM操作という概念があります。 「DOM」とは […]
詳細を見る
Webコーディング
なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ！制作着手前のステップも公開！
近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れ ページのコンテンツが途中 リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成もされていないので、メンテナ […]
詳細を見る
Webコーディング
flexboxの救世主「gap」プロパティが左寄せデザインに超便利！
突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか？ 3列の横並びボックス 間のマージンは10px 改行すると左寄せ 下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリックしてください。 それぞれ例を […]
詳細を見る
Webコーディング
SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう
ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか？ 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします！ 各ブラウザでのデフォルトの表示 こんなタグを作成しました。 […]
