CODEPEN記事一覧
詳細を見る
Webコーディング
セレクトボックスとラジオボタンはどう使い分ける？
Web制作をしていると、フォームで選択肢のどれかひとつを選択して欲しいとき、セレクトボックスとラジオボタンの使い分けに悩むこと、ありませんか？ 「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。 今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。 セレクトボックスとラジオボタン、それぞれの特 […]
詳細を見る
Webコーディング
jquery.cookie.jsでCookieを手軽に扱う
Webサイトの制作において、JavaScriptで制御した挙動を保持しておきたいとき、ありませんか？ JavaScriptでの制御はページ遷移後にブラウザバックするとデフォルトに戻ってしまうので、場合によってはユーザーのアクセシビリティを下げてしまうことも。 そこでCookieを利用することを提案します。 そんなCookieを手軽に扱えるのがJavaScriptライブラリ「jquery.cooki […]
詳細を見る
Webコーディング
【導入も簡単】WordPressでも利用できる「Zipaddr」で住所入力の手間を削減しよう！
入力フォームで郵便番号や住所を入力するのは正直面倒ですよね。 そんな面倒な住所入力を補助できるJavaScriptライブラリ「Zipaddr」について紹介いたします。 実装例 Zippaddrを使用すると以下のような挙動になります。 「郵便番号」に任意の郵便番号を入力してみましょう。 郵便番号はハイフンがあってもなくても動きます。 See the Pen Untitled by Ito Hirok […]
詳細を見る
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コーディング
【テスト工程】Webサイト納品前のチェックリストを大公開！
Web制作での品質管理。皆さんはどうしてますでしょうか？ Webサイト納品前の大事な工程「テスト」。チェックリストを公開します。 表示崩れはないか Webサイトに重要な要素「デザイン」。 制作現場ではデザインを基にコーディングするのが一般的です。 そしてそのコーディングがデザイン通り、もしくはデザインに則った形になっているかどうかをチェックします。 画像や文字がはみ出していたり、スマートフォンだと […]
詳細を見る
Webコーディング
【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい
プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。 そんなときは行数を制限すると見栄えが良くなります。 これを→ 2行に収めたい そんなお悩みはCSSで解消できちゃうかもしれません。 CSSでの実装方法 CSSでは横幅から余ってしまう文字を省略し、3点リーダーを表示させることができます。 以前はPHPで文字数制限をかけてい […]
