コピペでできる記事一覧
詳細を見る
Webコーディング
WordPressのカスタム投稿タイプでよくある質問（FAQ）を作ろう
Webサイト制作の仕事をしていると「よくある質問」を実装することが多々あります。 静的なコーディングでも作ることはできるものの、お客さんが更新することができないため、運用コストが上がってしまうことも…。 そこで、WordPressのカスタム投稿タイプの機能を使用することで、更新可能な「よくある質問」を作ることができます。 今回はカスタム投稿タイプでよくある質問を作る方法を紹介いたします。 この記事 […]
詳細を見る
Webコーディング
JavaScriptのDOM操作、覚え方のコツ
コーディング初学者の方が難しいと感じる “JavaScript”。 HTML/CSSはマークアップだけだったのに、急に変数やら条件分岐、繰り返しなどのロジックが入ってきて混乱することでしょう。 そんなあなたのためにJavaScriptが楽しくなるちょっとしたコツを紹介します。 そもそもDOM操作って何？ JavaSciptではDOM操作という概念があります。 「DOM」とは […]
詳細を見る
Webコーディング
flexboxの救世主「gap」プロパティが左寄せデザインに超便利！
突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか？ 3列の横並びボックス 間のマージンは10px 改行すると左寄せ 下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリックしてください。 それぞれ例を […]
詳細を見る
Webコーディング
SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう
ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか？ 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします！ 各ブラウザでのデフォルトの表示 こんなタグを作成しました。 […]
詳細を見る
Webコーディング
【構造化データ】見た目だけじゃない「よくある質問（FAQ）」の作り方
構造化データの実装とともにアコーディオン型のよくある質問（FAQ）の作り方を紹介します。 まずは見た目から 早速ですがよくある質問の作り方を紹介します。 よくあるアコーディオン型のFAQです。summaryやdetailsタグを使用した実装方法もありますが、CSSやJavaScriptで装飾、操作のカスタマイズが面倒なのでdivタグで作っております。 See the Pen FAQ by Ito […]
詳細を見る
Webコーディング
PHPを使ってCSSやJSのキャッシュ削除を自動化しよう
Web制作をしているとよくある会話 コーダー「こちら修正しました。ご確認よろしくお願いいたします」 クライアント「変わっていません…」 コーダー「キャッシュ削除してください。方法は…」 あるあるですよね？ キャッシュ削除について何度も説明するのが面倒だという話をよく聞きます。 そんな時はキャッシュ削除を自動化しませんか？ date関数だけでもいいが、難点がある CSSのキャッシュを残さないようにす […]
詳細を見る
Webコーディング
aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」
aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。 では、どのように記述すればよいのでしょうか？ 実際のコードとともに紹介いたします。 rel属性で設定を追加 rel属性でnoreferrerとnoopenerを指定します。たったこれだけ。 誤字に注意しましょう。 なぜ「noopener」や「noreferrer」を記述 […]
詳細を見る
Webコーディング
【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい
プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。 そんなときは行数を制限すると見栄えが良くなります。 これを→ 2行に収めたい そんなお悩みはCSSで解消できちゃうかもしれません。 CSSでの実装方法 CSSでは横幅から余ってしまう文字を省略し、3点リーダーを表示させることができます。 以前はPHPで文字数制限をかけてい […]
詳細を見る
Webコーディング
TwitterシェアボタンをJavaScriptで実装しよう【Vanilla JS】
現代のWebサイトには欠かせない「SNSシェア」。SNSの中でもTwitterは拡散力が大きく、WebサイトをTwitterにシェアしたい人はたくさんいます。 そこで、ページごとのURLやタイトルをTwitterにシェアするボタンの実装方法を紹介いたします。 TwitterのシェアURLの仕組み 基本的に、Twitterのシェアボタンはリクエストパラメータでツイートの内容を設定できます。 パラメー […]
