BLOG

【CSS】擬似クラスを使いこなそう!:not()や:nth-child()の使い方
投稿日:2021年8月31日

コーディングでは、他人から見たとき見やすいコードにすることを心がけますよね。 先輩が書いたコードを見るとなんか見やすいなって思うんです。 そこで、見やすいコードと見にくいコードの何が違うのだろうと考えたときに、不要なタグやクラスがなく、全体がすっきりしていることが見やすいコードへの近道だと感 ...

【YouTube,Vimeo,mp4】Webサイトに動画を埋め込む方法まとめ
投稿日:2021年8月25日

Web制作をしていると、サイトに動画を埋め込んで表示させたい場面はよくありますよね。 埋め込みのできる動画には、YouTube、Vimeo、mp4など、様々な形式があり、 これらを埋め込んで表示させる際には、それぞれ異なった設定方法や注意点があります。 そこで、今回はそれぞれの ...

コピペで簡単に実装!CSSで文字の強調・飾りつけ8選【初心者向け】
投稿日:2021年8月11日

HTMLとCSSを用いた文字の強調や装飾方法をまとめました。HTMLで作ったページのデザインを調整するCSSは、使い方次第でさまざまな装飾をほどこすことができます。例えば蛍光ペンで引いたようなデザインから、下線、アイコン、インデント、カーニングなどなどをソース付きで紹介していますので、初心者 ...

【コーディング初心者向け】Photoshop・Illustrator・XDから余白やフォントサイズを取得する方法まとめ
投稿日:2021年7月21日

HTMLコーディングをする際、デザインデータのほとんどは Photoshop・Illustrator・XD のどれかで頂くと思います。勉強をしてコードの書き方はわかっていても、そういったデザインツールから情報を得る方法がわからなければコーディングはできません。 弊社の新卒研修でも、アプリの ...

【カスタマイズしたい人向け】コマースクリエイター(commerce creator)の使い方【完全ガイド】
投稿日:2021年7月16日

昨年からコロナが猛威を揮い、緊急事態宣言やまん延防止等重点措置で買い物などに満足に行けない日々が続いているかと思います。 そういった背景もあり、近年では通販・ネットショッピングの需要が高まりつつあります。 通販サイトを立ち上げる構築サービス・ツールといえば、MakeShopやEC-C ...

WAI-ARIA(ウェイ エリア)とは?初めて制作する方向けに解説!
投稿日:2021年7月7日

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

自由な形でリンク範囲を作る方法2つ クリッカブルマップ・SVGリンク【実装サンプル付き】
投稿日:2021年7月1日

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

Emmet(エメット)でHTMLとCSSを効率的にコーディングする
投稿日:2021年6月17日

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

SEOに強いホームページを作ろう!HTMLコーディング時に意識すること8つ
投稿日:2021年6月4日

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

【WordPress】それで完成?検証で必ずチェックすべき表示崩れとSEO周りの重要ポイント6選!
投稿日:2021年3月24日

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

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

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

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

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

Web制作に役立つ!フォント関連の無料で使えるオンラインツールまとめ7選
投稿日:2021年2月19日

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

【学生さん向け】ポートフォリオに載せるためのWebサイトの作り方【コーディング編】
投稿日:2021年2月8日

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

モダンなサイトで良く見るWeb表現技術
投稿日:2021年2月1日

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

IE11での画像のobject-fitの使用について
投稿日:2021年1月29日

ブログ一覧のサムネイル画像など、画像の枠が決まっている場合があります。 どんな比率の画像が来ても、きれいに画像が表示されるようにしたいです。 そんなときはobject-fitプロパティを使えば解決します。しかしIEで対応してないのですよね…。 まず、object-fitプロパティの ...

【保存版】コピペでOK!Flexboxで作る頻出レイアウトの構造解説
投稿日:2021年1月21日

要素を横並びにするとき、Flexboxってとっても便利ですよね! Floatを使用して実装するよりも少ないコードで、よりシンプルに実装することができるので皆様もお世話になっているのではないでしょうか? 以前まではブラウザによって挙動が違ったりサポートしていなかったりといった問題がありましたが ...

【コピペでOK】イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】
投稿日:2021年1月7日

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーショ ...

初心者がCSSコーディングでつまずく部分を解説【ボタン、文字調整編】
投稿日:2020年11月6日

こんにちは。コーディング歴半年のエンジニアです。コーディングは、シンプルなサイトなら一人で実装できるレベル感です。 コーディングで気を付けるべきことがたくさんありますよね。でも見た目をそれっぽくするのに精一杯で、そこまで気が回らないときがあります。 コーディングをしているときに、 ...

ポップアップ表示のYouTubeでも関連動画を操作したい【Magnific Popup】
投稿日:2020年10月29日

YouTubeの動画をサイト内に埋め込むとき、関連動画を非表示にしたり、同じチャンネルの動画のみを表示させたりしたいといった要望が出てくることも多いですよね。 プラグインを使用してポップアップで表示している場合、そういった関連動画の操作が意外に難しいことがあります。 本記事では、Ma ...