BLOG

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 ...

360度画像をWebサイトに埋め込む方法6選を徹底解説!【360度ビュー・手順・デモ付き】
投稿日:2020年10月26日

最近色々なサイトでよく見かける360度画像。 臨場感がありその場にいるような感覚になれるので、是非サイトで取り入れたいと考えている企業も多いのではないでしょうか? ▼サンプル(こちらは【方法6】Pannellumを使用しております。) こちらの画像はflickr様からお借り ...

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
投稿日:2020年9月15日

「Prepros」はSassを超簡単にコンパイルすることがきるGUIツールです。 PreprosができることはSassのコンパイルだけではありません。ざっと以下のことが可能です。 Preprosでできること(一部抜粋) 1. Sass(それ以外にもLess、Styl ...

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
投稿日:2020年9月15日

Sassを使い始めるためにはどうしたらよいでしょうか? 主に以下の2つの方法があります。 エディタの拡張機能を使う Gulpを使う ひとりで案件を進めるであれば1の方法でも問題ないでしょう。 しかし、この方法だとエディタに依存してしまうため複数人が関わる案件の場 ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)
投稿日:2020年9月15日

この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。 ちなみに、この記事は「【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)」の続編になります。 まだ読んでいない方はそちらを読んでからの方がスム ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)
投稿日:2020年9月15日

WEBアプリやそれに近い大規模な案件を進めていくにあたって、共通のパーツってありますよね。 LP(ランディングページ)であれば、そういったものはないのですが、ある程度規模が大きくなるとそういった共通パーツ(モジュールまたはコンポーネント)が何回も登場して、それを組み立ていくというのはよ ...

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集
投稿日:2020年9月9日

突然ですが、みなさん。 コーディング(HTML,CSS)得意ですか? 筆者は、「得意です!」と自信をもって言えるほどではありません。汗 「どうやって再現したらいいんだ...」と、頭を悩ませ時間が溶けていくことが多いです。 しかし、コーディングでは「スピード」が求められますよね。 ...

【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう
投稿日:2020年8月28日

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します! 【目次】 概要 事前準備 ダウンロードして使う CDNを使う ...

目指せデザイン完コピ!!少しでもデザインに近づけるためのHTMLコーディング
投稿日:2020年8月21日

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...