ブログBLOG

フッターデザイン【レスポンシブサイトのサンプルソース】

コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっていま ...

HTMLコーディングの検証ってどこ見るの？チェックポイントとよくある不具合をまとめました

コーディングの検証は見る場所やブラウザ・端末も多く、チェックが大変ですが重要な作業です。 特にヘッダーなどの共通要素、TOPページのチェックは重要です。 確認すべきポイントは多岐にわたりますが、明文化されていないことが多い作業でもありますよね。 担当者によってチェックするポイントが違っ ...

Webフォントとは？メリット・デメリット・使い方など 完全ガイド初級編【まとめ】

最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…？」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか？ この記事では「Webフォ ...

HTMLをWordPress化！やりやすいコーディング方法をレクチャー【手順付】

無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHT ...

【デザイン段階でも動く？！】Adobe XDのプロトタイプで、デザインに動きをつけてみよう！

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

覚えておいて損はないCSS一覧

コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。 僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。 そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、 うま ...

今すぐコーディング爆速化！プロ仕様なChrome検証ツールの使い方

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール（ディベロッパーツール）のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

HTMLメールの作り方！デザインからコーディングまで押さえておきたいポイント【サンプル付き】

みなさん、HTMLメールを作成したことはありますか？ テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...

コーディングをより効率的に！楽にHTMLやCSSを生成できるジェネレータ8選（おまけあり）【2020年度版】

「毎回テーブルタグ書くの、面倒くさい…」と思った経験はありませんか？ Webエンジニアにとって、サイトを作るときには必ずコーディングをおこないますが、いろいろなサイトを作っていても共通して出てくるパーツは意外とありますよね。ただ、都度入力していくのは時間もかかって骨も折れる作業です。 ...

webサイト制作でお役立ち！ デザイン&コーディングをする時に便利なwebサイト6選

入力するだけでパパっと数値や単語を変換してくれるwebサイトや、直感的に操作出来る色の見本webサイトなど、普段業務で使用しているデザインやコーディング時に便利なサイトを集めました。 デザイン編 3:2、黄金比等を一括計算「アスペクト比計算ツール」 見ているだけでも楽しい2色の配色参考サイ ...