ブログ

CSS

【魔法のvw】画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方

ウインドウ幅に連動して画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方の紹介です。 特にPCとスマホの間の「よしな」に表現するときの強い見方となるので、覚えておいて損はありません! ウ…

はにわまん
CSS

子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSS

子要素を親要素からはみ出して画面いっぱいにするは、今まであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素か…

はにわまん
Webアクセシビリティ

「WAI-ARIA」を使ったHTMLのコーディング例

「WAI-ARIA」とは、W3Cの中の団体が定めているWebアクセシビリティに関する規格ですね。「WAI」は「Web Accessibility Initiative」の略で、「ウェイ」と読むらしいで…

はにわまん
Webアクセシビリティ

【WCAG 2.0】Webアクセシビリティの「HTML」の達成方法をおさらい

「WCAG 2.0」が定義しているWebアクセシビリティ達成基準の中の「HTML」の項目をすべて確認する意図で作成しました。→ HTML と XHTML の達成方法 | WCAG 2.0 達成方法集 …

はにわまん
環境

PhotoshopのデザインカンプをZeplinに連動してコーディングしやすくする方法

Photoshopのコーディングは、テキストのコピーからCSSの確認など大変な部分が多いですよね。そもそもPhotoshopの操作に慣れていないから、あまり触りたくないという… 「Zepl…

はにわまん
Webアクセシビリティ

【まずはここから】Webアクセスビリティを意識したコーディングの基本

アクセスビリティは「利用しやすさ」という表現されることが多いです。 目が不自由な人も、耳が不自由な人も、手が不自由な人も等しくホームページを閲覧できるようにという考え方がWebアクセシビリティになりま…

はにわまん
コーダー

ホームページ制作後の保守費用は必要?払った方がいい人と不要な人

ホームページ制作後に当たり前のように保守費用を月額で払っていませんか? 「なんとなく必要そうだから…」と払っている方は今すぐ見直した方がいいかと思います。 保守費用は毎月払うものなので、何…

はにわまん
HTML

Googleフォームを独自デザインにしてホームページに埋め込む方法

Googleフォームを独自デザインにして埋め込む方法です。案件によってはGoogleフォームでサクッと作る選択肢もあってもいいかもしれません。 ただ、実際にやっみて思ったのは、カスタマイズして使う選択…

はにわまん
WordPress

「WordPressのバージョンアップが怖い」って人のための保険をかけたバージョンアップ手順

「WordPressのバージョンアップをしたら画面が真っ白になった…」みたいな経験をしている人も多いかもしれません。中にはトラウマになって「もう2度と更新はしない」と心に決めた人もいるかと…

はにわまん
WordPress

WordPressの旧エディタをGutenbergエディタへ移行する方法

WordPressの旧エディタをGutenbergエディタへ移行する方法です!ポイントさえ抑えておけば誰でも移行することができるはずです。 今のところ旧エディタは「Classic Editor」プラグ…

はにわまん
1 2 32