詳細を見る

Webコーディング

なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ！制作着手前のステップも公開！

近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れ ページのコンテンツが途中 リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成もされていないので、メンテナ […]

詳細を見る

Webコーディング

flexboxの救世主「gap」プロパティが左寄せデザインに超便利！

突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか？ 3列の横並びボックス 間のマージンは10px 改行すると左寄せ 下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリックしてください。 それぞれ例を […]

詳細を見る

Webコーディング

SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう

ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか？ 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします！ 各ブラウザでのデフォルトの表示 こんなタグを作成しました。 […]

詳細を見る

Webコーディング

【構造化データ】見た目だけじゃない「よくある質問（FAQ）」の作り方

構造化データの実装とともにアコーディオン型のよくある質問（FAQ）の作り方を紹介します。 まずは見た目から 早速ですがよくある質問の作り方を紹介します。 よくあるアコーディオン型のFAQです。summaryやdetailsタグを使用した実装方法もありますが、CSSやJavaScriptで装飾、操作のカスタマイズが面倒なのでdivタグで作っております。 See the Pen FAQ by Ito […]

詳細を見る

Webコーディング

【テスト工程】Webサイト納品前のチェックリストを大公開！

Web制作での品質管理。皆さんはどうしてますでしょうか？ Webサイト納品前の大事な工程「テスト」。チェックリストを公開します。 表示崩れはないか Webサイトに重要な要素「デザイン」。 制作現場ではデザインを基にコーディングするのが一般的です。 そしてそのコーディングがデザイン通り、もしくはデザインに則った形になっているかどうかをチェックします。 画像や文字がはみ出していたり、スマートフォンだと […]

詳細を見る

Webコーディング

SNSの時代にWebサイトを作るメリット・デメリットとは？

TwitterやFacebook、Instagram、TikTok…といった様々なSNS（ソーシャルメディア）が立ち並ぶ現代社会。集客はSNSでできてしまう時代でもあります。 そんな時代にWebサイトを作る意味はあるのか。Webサイトを作るメリットについて考えてみました。 情報を構造化することができる Webサイトの大きなメリットのひとつに「情報が流れてしまわない」ことが挙げられます。 情報を構造 […]

詳細を見る

Webコーディング

Web制作の「運用・保守」って何するの？

Web制作の仕事をしていたり、発注したりするときに目にする「運用・保守」という言葉。 あまり表立って見えるような作業ではないため、運用保守費用を「無駄なお金」と感じているクライアント様も多いはず。 そこで今回は、運用・保守ではどんな作業をしているのかを解説します。 サーバー・ドメイン管理 Webサイトが置かれているサーバーやそのドメインを管理します。 必要に応じて サーバー・ドメインの設定 プログ […]

詳細を見る

Webコーディング

PHPを使ってCSSやJSのキャッシュ削除を自動化しよう

Web制作をしているとよくある会話 コーダー「こちら修正しました。ご確認よろしくお願いいたします」 クライアント「変わっていません…」 コーダー「キャッシュ削除してください。方法は…」 あるあるですよね？ キャッシュ削除について何度も説明するのが面倒だという話をよく聞きます。 そんな時はキャッシュ削除を自動化しませんか？ date関数だけでもいいが、難点がある CSSのキャッシュを残さないようにす […]

詳細を見る

Webコーディング

aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」

aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。 では、どのように記述すればよいのでしょうか？ 実際のコードとともに紹介いたします。 rel属性で設定を追加 rel属性でnoreferrerとnoopenerを指定します。たったこれだけ。 誤字に注意しましょう。 なぜ「noopener」や「noreferrer」を記述 […]

詳細を見る

Webコーディング

FTPアップロードをGitプッシュで自動化する方法

Web制作ではよく「Filezilla」などのFTPクライアントを使ってサーバーにアップロードするのですが、これって正直、面倒ではありませんか？ どうせGitを使ってバージョン管理しているのなら、GitHubにプッシュ→FTPアップロードが自動でできたら…なんて思ったことはありませんか？ 実はそんな便利な機能、あるんです。紹介しますね。 仕組み ローカル環境からプッシュをすることでGitHubに反 […]