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フォントはデバイスに左右されず全て同じ ...

Web制作コーディングスライダー

2021/8/30

slickスライダー実装まとめ15選

slickってどんなスライダーが出来るの？スライダーで有名なプラグイン、slickにはオプションを使って色々なスライダーを実装することが出来ます。実務でも色々なタイプのスライダーを実装することになるので、どんなタイプのスライダーも実装出来るようにしておきましょう。 slickスライダー実装まとめ15選今回はslickを使ったスライダーの実装集となります。コードについてはデモのHTML、CSS、JSをクリックすれば確認出来るので、コピペしてお使い下さい。またスライダーをリロードしたい時はデモの右下 ...

Web制作コーディングスライダー

2021/8/28

slickスライダーで特定のスライドだけ表示時間を変える方法

スライダーで1枚ごとに表示時間を変えることって出来る？普通のスライダーは全部表示時間が同じですが、1枚目だけ長くしたい時などたま〜にあります。今回はslickを使ってその方法をご紹介します。 slickスライダーで特定のスライドだけ表示時間を変える方法まずはデモを見てみます。 See the Pen slick（時間調整） by junpei (@junpei-sugiyama) on CodePen. 1枚目のスライドはこの画像です。そして今回設定したのは、 1枚目の初回は3000ミリ秒 1枚目 ...

CSS Web制作コーディング

2021/8/27

【CSS】セクションの区切りを曲線にする方法

セクション間の区切りを曲線にしたいけどどうやるの？セクション間の区切りが曲線になってるデザインはたまにありますが、意外とどうやっていいか分からない人も多いと思います。今回はCSSでセクション間の区切りを曲線にする方法をご紹介していきます。セクションの区切りを曲線にする方法それでは早速デモを見てみましょう。 See the Pen CSSでコンテンツの区切りを曲線にする by junpei (@junpei-sugiyama) on CodePen. 最初は下に丸みを帯びていて、スクロールすると上に ...

CSS Web制作コーディング

2021/8/25

【CSS】何番目系の要素を指定する方法まとめ

CSSで◯番目の要素を指定したいけどどうやるの？ CSSのセレクタはたくさんありますが、今回は何番目の要素を指定したいという時に使える方法をご紹介していきます。親子要素、兄弟要素についてまずは要素同士の関係について簡単に書いておきます。例えばこちらのコードを例に見てみます。 div → 親要素 h1、p、ul → divの子要素、それぞれは兄弟要素 li → divの孫要素、ulの子要素、それぞれは兄弟要素となります。タグはそれぞれ親子、兄弟の関係があり、今回の何番目など指定する際には赤枠の兄弟 ...

CSS Web制作コーディング

2021/8/25

【CSS】擬似クラス:first-childと:first-of-typeの違いとは

最初の要素を指定する方法が2つあるみたいだけど違いが分からない実際に見たら分かると思うよ！ CSSで最初の要素を指定する擬似クラスに:first-childと:first-of-typeがあるのですが、その違いについて今回は解説していきます。最初の要素を指定する擬似クラス:first-childと:first-of-typeの違いとはまずはそれぞれの違いを文章で見てみます。 :first-child 兄弟要素の中で最初の要素を指定 :first-of-type 兄弟要素の中で指定した要素の最初の要素 ...

VSCode Web制作コーディング

2021/8/25

VSCodeのインストールと日本語化する方法

VSCodeのインストールと日本語化する方法教えて？今回はそんな疑問にお答えしていきます。 VSCodeのインストール方法それでは早速インストール方法から解説していきます。まずは以下のサイトにアクセスします。 Visual Studio Code こちらの画面が表示されるので、Downroad nowをクリックします。次にこちらの画面が表示されるので、それぞれの環境にあった方を選択します。 Macの場合ダウンロードしたら左下にファイルが表示されるので、クリックしてファイルを開きます ...

1 2 3 … 11 Next »