[HTML・CSS]cssでアニメーションの速度を設定する方法
今回は、cssでアニメーションの速度を設定する方法について紹介したいと思います。 アニメーションの速度を設定する事により、人間が見ていて違和感のないサイトにすることが出来ます。 結論から言うと transition: 0 …
HTML・CSS
[HTML・CSS]ボタン(要素)に影を付ける方法
今回は、サイトを作成する際にボタン等の要素に影を付ける方法について紹介したいと思います。 結論から言うとcssで「box-shadow」を設定します。 box-shadow: 4px 4px 4px 4p …
[HTML・CSS]箇条書き(ul)の左側にある点を消す方法
今回は、htmlで箇条書きをしている際に用いるulの左にある点の消し方を紹介したいと思います。 今回は、サンプルとして下記の箇条書きを用意しました。 1つ目 2つ目 3つ目 4つ目 そうしましたらcssで下のように指定を …
[HTML・CSS]fontawesomeを使ってアイコンを表示する方法
今回は、htmlを用いてサイトを構築する際に簡単にアイコンを表示させる方法について今回は、紹介したいと思います。 手順としては、大きく分けると2つに分かれます。 1つ目の手順としては、headの中に下のコードを書き込みま …
[HTML・CSS]背景色でグラデーションにする方法
今回は、HTML・CSSにおいて背景色をグラデーションにする方法について紹介したいと思います。 早速ですが、コードは下記の通りになります。 上記のコードをdiv等に設定するとグラデションにすることが出来ます。
Twitterでリンクをおしゃれに設定するための方法(Twitterカード)
今回は、TwitterでURLをつぶやいた時にそのURLに画像等を付けるための機能(Twitterカード)の設定方法を紹介したいと思います。 やり方自体は、そこまで難しくなく、下記のコードをheadの中に記載すればOKで …
[HTML・CSS]サイトをスマホ・タブレット・PCごとに設定する方法
今回は、画面のサイズ(スマホ・タブレット・PC)ごとにCSSを設定する方法について紹介したいと思います。 設定するには、@mediaという関数を用います。 スマホ用の設定を行うには、下記のコードを記載し、{}の中にCSS …