Tips : PAGE4
詳細を見る
Webコーディング
「ホームページってなんで高いの？」Web制作の価値提供の話
Web制作の仕事をしていてお客様と接しているとよく、「ホームページってなんでこんなに高いのですか？」と聞かれることがあります。
極論、高いと感じるならWebサイトは作る必要がないと思っています。
SNSでも頑張れば集客はできますし、こだわりがなければ無料でサイトを作るツールもたくさんあります。
そんな便利な世の中でなぜ、Webサイト制作の依頼があるのでしょうか。
そこには･･･
詳細を見る
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･･･
詳細を見る
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関数だけでもいいが、難点･･･
詳細を見る
Webコーディング
aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」
aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。
では、どのように記述すればよいのでしょうか？
実際のコードとともに紹介いたします。
rel属性で設定を追加
<a href=”【リンク先のURL】” target=“_blank” rel=”noreferrer noopener”>･･･
