Web制作

2021/12/10

無料でも使える画像圧縮サイト TinyPNGの有料版の登録方法

画像の容量を小さくする良い方法ない？ TinyPNGってサイトがおすすめだよ！ブログやサイト制作で問題になるのが様々な容量ですが、特に画像は容量が大きく、そのままアップロードしてしまうとページスピードやSEOにも悪影響を与えてしまいます。今回は画像の容量を小さく圧縮できるサイト、TinyPNGをご紹介していきます。こちらは無料でも十分使えますが、無料だと多少の制限があり、有料にすればそれらが全て解除されるので、大量の画像を圧縮する機会が多い人におすすめです。 TinyPNGとは？ TinyPNGとは ...

Web制作サーバー

2021/11/25

お名前.comで取得したドメインをエックスサーバーに紐付ける設定方法

お名前.comでドメイン取得したけど、エックスサーバーで使えるようにするにはどうしたらいい？今回はこのような状態を想定します。お名前.comでドメイン取得済みエックスサーバーを契約済みエックスサーバーでWordPressをインストールしたいそれでは解説していきます。なお、エックスサーバーで契約する時はエックスサーバーでドメインを取得した方が楽です（キャンペーンでドメインが永久無料の時もあります）詳しくはこちらの記事を参照下さい。初心者でも10分で出来る！WordPressブロ ...

CSS アニメーション Web制作コーディング

2021/11/18

【CSS】hoverしたら画像を拡大する方法

画像をhoverしたら拡大するにはどうすればいい？ hoverしたら画像を拡大させるのは実務でも非常に良くある実装になります。画像を表示させるにはimgタグとbackground-imageの2種類の方法があります。今回は両方のケースで画像を拡大する方法を解説していきます。 hoverしたら画像を拡大する方法（imgタグ）まずはimgタグを使った場合です。コードを見ていきます。 <div class="img-wrapper"> <img src="画像パス" alt=""&gt ...

CSS Web制作コーディング

2021/11/18

【CSS】画像をhoverしたら透過させた黒いマスクをかけ、テキストを表示させる方法

画像をhoverしたら黒いマスクかけてテキストを表示させたいけどどうしたらいい？これは実務でも良くあるので、必ず出来るようにしておきましょう。 hoverしたら背景に透過させた黒いマスクをかけテキストを表示させる方法まずはHTMLから見ていきます。 <div class="img-wrapper"> <img src="画像パス" alt=""> <div class="hover-mask"> <p> テキストが入ります。 </p> &lt ...

HTML Web制作コーディング

2021/11/14

セレクトボックスで1行目を選択不可にする方法

セレクトボックスで1行目を選択不可にしたいけどどうすればいい？お問い合わせフォームなどによくあるセレクトボックスですが、1行目は選択出来ないようにしたい場合もあると思います。今回はその方法をご紹介します。セレクトボックスで1行目を選択不可にする方法まずは通常のセレクトボックスを見てみます。 See the Pen セレクトボックス①（通常） by junpei (@junpei-sugiyama) on CodePen. ここでの選択肢はチワワ・トイプードル・ミニチュアダックスの3つですが、選択肢 ...

CSS Web制作コーディング

2021/11/10

【CSS】placeholder(プレースホルダー)の色を変更する方法

placeholderの色ってどうやって変更するの？お問い合わせフォームなどでよくあるplaceholder。これは入力項目の例を表示させておくもので、これがあると「こういう風に入力します」というのが分かります。こういうやつですね。基本的には薄い色にしますが、この色を変える方法をご紹介します。 placeholder(プレースホルダー)の色を変更する方法例として以下のhtmlで解説していきます。 <div> <input type="text" class="name01" p ...

Web制作コーディングマップ

2021/9/8

GoogleマップをAPIキー不要でモノクロ（グレースケール）に変更する方法

Googleマップをモノクロにしたいけどどうすればいい？サイト制作でGoogleマップの埋め込みは良くあると思います。そしてたまにモノクロのデザインがあるので、今回はその方法をご紹介します。 GoogleマップをAPI不要でモノクロ（グレースケール）にする方法 GoogleマップをカスタマイズするにはAPIキーが必要ですが、モノクロにするだけであればAPIキーは不要でCSSだけで対応可能です。 Googleマップの埋め込み方法はこちらの記事を参照下さい。 Googleマップの拡大率をカスタマイズ（変更 ...

Web制作ノウハウサーバー

2021/9/5

【初心者向け】Web制作案件での納品を意識したポートフォリオの公開方法

ポートフォリオ作ったけどどうやって公開すればいいの？ポートフォリオは作ったら人に見せるために公開する必要があります。公開する方法はいくつかありますが、今回は実務での納品を意識した公開方法を解説していきます。ポートフォリオの公開方法まず今回ポートフォリオを公開する方法は、インターネット上に公開するという方法です。 PC上で作成したものはインターネット上にアップロードして公開しないと、営業する際にクライアントに見せる事が出来ません。 PCを持って行って対面で会うのであれば、自分のPCにあるものを見せる ...

WordPress プラグインフォント

2021/8/31

TypeSquare Webfonts for エックスサーバーは必要か？【結論：削除してOK】

WordPressに最初から入ってるTypeSquare Webfonts for エックスサーバーってプラグインは何？ WordPressをインストールしたときに最初から入っているプラグインは3つあります。 Hello Dolly Akismet Anti-Spam TypeSquare Webfonts for エックスサーバー（エックスサーバー限定） Hello Dollyは完全に不要なプラグインで、Akismet Anti-Spamは人によっては必要なプラグインです。それではTypeSquare ...

Web制作コーディングフォント

2021/8/30

Webフォントを使うメリットとデメリットとは？

Webフォントって使った方がいいの？ Webフォントにはメリットとデメリットがあるからちゃんと把握しておこう！ Webフォントとは？通常のフォント（デバイスフォント）はデバイスごと（Windows、Mac、iPhone、Androidなど）にインストールされているフォントしか表示出来ませんが、例えば、 Windowsでヒラギノは購入しないと表示不可 Androidは明朝体が表示不可など、実務でもよく使うヒラギノや明朝体にはこのような問題があります。しかし、Webフォントはデバイスに左右されず全て同じ ...

1 2 3 … 11 Next »