ブログBLOG

WAI-ARIA(ウェイ アリア)とは？初めて制作する方向けに解説！

アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコ ...

自由な形でリンク範囲を作る方法2つ クリッカブルマップ・SVGリンク【実装サンプル付き】

コーディングする中で、「都道府県の形に沿ってリンクを設定したい」「リンク範囲をひし形にしたい」など、複雑な形のリンクが出てきて困ったことはありませんか？ aタグで普通にリンクを付けるだけだと、リンク範囲が長方形になるので意図しないエリアまでクリックできてしまい、思うようにいかないことも多いですよ ...

Emmet（エメット）でHTMLとCSSを効率的にコーディングする

HTMLやCSSを用いたコーディングに慣れてくると、毎回ソースコードをすべて手打ちするのが手間になってくる瞬間が訪れるかと思います。例えば、テーブルのHTMLを書きたいとき、見出しまで到達するのに[crayon-694f4a2065297995096364/]という記述をしないといけません。ひと ...

SEOに強いホームページを作ろう！HTMLコーディング時に意識すること８つ

本格的なSEO対策となるとWebマーケティングに強い人にお願いするのがよいですが、丁寧なコーディングを心がけることである程度対応することが可能です。 今回は初心者の方にもわかりやすく、コーディングにおける具体的ですぐに実践できるSEO対策を紹介します。 ぜひ、SEOに強いHTMLコーディング ...

【WordPress】それで完成？検証で必ずチェックすべき表示崩れとSEO周りの重要ポイント６選！

WordPress構築が終わり、いよいよ検証フェーズに入ったとき、どの点に注意して検証すれば良いのでしょうか 特に初心者のうちはなかなかわかりにくいですよね なんとなくやってしまっているかたもきっと多いのではないでしょうか 検証したつもりでも、意外に抜け漏れが多くリリース間際になってあたふ ...

初心者でもビジュアルデザインを用いたプログラミングができる「Processing」の始め方【p5.js】

最近では、Webサイト上で3Dアイテムをドラッグでいじれたり、スクロールに合わせてオブジェクトが回転したりするなど、ビジュアルアートを用いたサイトがどんどん増えており、興味のある方が増えてきているかと思います。かくいう私も、いろんなサイトを見ていくうちに「どうやってこの動きを作れるんだろう」と考 ...

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 Part.2

Part.1 からかなり間が空いてしまいました。 本記事を書いている間にもデザインツールは進歩していて、最新ツールを使いこなしているデザイナーさんならもはや気にする必要のない項目も中にはあるかもしれません。 でも、つい最近も、まさにコーディングしにくいデザインのお手本！という ...

Web制作に役立つ！フォント関連の無料で使えるオンラインツールまとめ7選

Webサイトを作るうえで欠かせないものの一つに「フォント」を挙げられますが、世の中には数多の新規フォントが日々登場していますよね。フォントが変わるだけで、サイトの雰囲気全体がガラッと変わってしまうくらい、その影響力は計り知れません。できることなら上手く活用したい。今回はそんな想いをかなえてくれる ...

【学生さん向け】ポートフォリオに載せるためのWebサイトの作り方【コーディング編】

就活にポートフォリオは欠かせませんね。 Web業界に就職したいと考えている学生さん向けに、ポートフォリオに載せるためのWebサイトの作り方についてまとめてみたいと思います。 本記事では特にコーディング初心者さん向けに、フォルダ構成やリセットcssなど、かなり初歩的な内容を分かりやすく説明 ...

モダンなサイトで良く見るWeb表現技術

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめまし ...