WEBST8のブログ

2023/1/7

【CSS transform skewの使い方】要素に傾斜をつける方法

今回は要素に傾斜をつけることができるCSS関数、skew関数の使い方を紹介します。 transformで利用するskew関数とは skewはtransformプロパティの値として使用する関数の一つで、要素に傾斜を付けることができます。 ■(参考)skew()を使用してx軸方向に傾斜を付けている例なお、skew()はCSSプロパティではなく関数なので、transformプロパティの値として使用します。また引数を2つ取ることができ、1つ目の値にはx軸方向、2つ目の ...

CSS

2023/1/7

【CSS transform scaleの使い方】要素の拡大・縮小方法

今回は要素を拡大・縮小させることができるCSS関数、scale関数の使い方を紹介していきます。 scale関数が使えるようになると、ホバー時に拡大されるボタンや画像の中央部分がゆっくりズームされるといった実装ができるようになります。 transformで利用するscale関数 scale()は要素をx軸、y軸方向に拡大・縮小させることができるCSS関数です。 ■(参考)scale()を使用してホバー時に要素をx軸・y軸方向に拡大している例なお、scale()はC ...

CSS

2023/1/7

【CSS transform rotateの使い方】要素を回転させる方法

今回は要素を回転させることができるCSS「transform:rotate()」の使い方を紹介します。 rotate()を使用すると、マウスホバー時に要素を好きな角度で回転させたりといった実装できるようになります。実際によく見る例では、ハンバーガーメニューの上下の棒を45度回転させたりといった実装が挙げられます。 transformで利用するrotate関数 rotateはCSS関数の1つで、要素を中心点や軸を基準に回転させることができます。 ■(参考)rotateを使用して ...

CSS

2022/9/7

CSS box-sizing:border-boxで余白と枠を横幅高さに含める

今回は、要素の枠線(border)やpaddingで取った余白などを要素の幅・高さ(width・height)に含めるかどうかを指定することができるプロパティ「box-sizing」の使い方を解説します。 box-sizingの意味と使い方 box-sizingはborderやpaddingで指定される枠線や余白の大きさを要素の幅・高さ(width・height)に含めるかどうかを指定することができるCSSプロパティです。例えば「width: 50 ...

WordPress

2022/7/22

WordPress functions.phpとは？意味や書き方・記載場所

WordPressの編集を始め、もう少しテーマをカスタマイズしたいと思った時、必ず編集が必要になってくるのがfunctions.phpというファイルです。本記事では、Wordpress内にあるfunctions.phpについて意味や役割、記載場所、注意点、編集例を解説していきます。 functions.phpの意味・役割 functions.phpは、Wordpressのプラグインのように、WordPressの動作やテーマ動作・各種機能をカスタマイズ・追加できる ...

WordPress

2022/9/8

WordPressでjQueryを利用する際の書き方と注意点

WordPressでjqueryのスクリプトを扱う際に、「うまく動かない」「$ is not function...」のようなエラーがで困っているという人も多いのではないでしょうか。 WordPressでjqueryを扱う際にはいくつかの注意願があります。本記事では、WordPressでjqueryを使う際の注意点や書き方について解説していきます。 WordPressのjQueryを使う際の注意点ここでは、WordPressでjQueryを使う際に動かなくなる原因になりやす ...

その他・ツール類

2022/7/23

Emmet(エメット)とは？エメットを使った基本的な書き方

Emmet（エメット）とは、コーディングをするとき省略したコードを書いてEnterやTabキーを押すだけで自動変換され記述できる便利な機能です。いちから<div class="wrap"><div class="content"><h1>.....といったタグを手打ちで記述するよりも、エメットを使った方が早く書けて効率的です。 Emmetは記法なので、Emmetに対応するエディターであれば利用できます。今回は標準でEmmetを利用できるVisual Studio Co ...

CSS

2023/1/7

【CSS transform:translate()の使い方】xy軸上の移動方法

今回は要素をxy軸上で移動させることができるCSS関数、translate()の使い方を紹介します。 translateが使えるようになると、要素の位置調整ができたり、簡単にアニメーションを実装したりすることができ非常に便利です。 transformで利用するtranslate関数 translateはtransformプロパティの値として使用する関数の一つで、要素を水平方向や垂直方向に移動することができます。 ■(参考)translateを使用してホバー時に要素 ...

WordPressプラグイン

2022/7/28

Advanced Custom Fieldsの使い方・出力関数【WordPress カスタムフィールド】

WordPressでカスタムフィールドを利用する際、簡単なものであれば標準のカスタムフィールドでも十分です。しかし、カスタムフィールドを運用する際に、画像や文字数制限や必須設定など、標準機能よりより高度な設定をしたいシーンがよくあります。そういった場合に、今回紹介する「Advanced Custom Fields」というプラグインを利用すると、より高度なカスタムフィールドを運用することができます。本記事では、Advanced Custom Fieldsの使い方や主要な出力方法について解説していきます ...

WordPress

2022/7/18

wordpressカスタムフィールドとは？意味や使い方・出力方法

wordpressでホームページを作成する際に、不動産の物件情報や、何らかの商品情報を掲載する際に、価格やエリアなど特定の入力項目を持たせたい場合があります。 WordPress標準では、タイトルや本文という入力項目以外ありませんが、WordPressでは、「カスタムフィールド」というものを使うことで入力項目を増やすことが出来ます。本記事では、カスタムフィールドについてその意味や意味や使い方・出力方法について解説していきます。カスタムフィールドとはカスタムフ ...

CSS

2022/7/21

【CSS object-fitの使い方】CSSで画像トリミングする方法

今回はCSSで簡単に画像をトリミングする事ができるCSSプロパティ「object-fit」の使い方をご紹介します。 object-fitが使えるようになれば、縦横比の異なる画像を高さを揃えて横一列に並べる事が可能で、CSSだけで簡易的な画像トリミングすることができます。 object-fitプロパティとは？ object-fitプロパティは、画像をトリミングする事ができるCSSです。通常、縦横比の異なる画像を横一列に並べる場合、横幅を揃えて表示させると以下のよう ...

WordPress

2022/7/8

WordPressキャッチフレーズ変更方法と何を入れるか・空白？

今回は、WordPress(ワードプレス)で作成したサイトで表示されるキャッチフレーズを変更する方法を今回ご紹介します。この記事を読んでわかること WordPressのキャッチフレーズを変更する方法キャッチフレーズには何を入れたら良いか WordPressのキャッチフレーズの変更方法まずキャッチフレーズの変更方法を説明します。まず、設定＞一般設定を選択します。一般設定が表示されます。ここでキャッチフレーズを変更できます。必要に応 ...

CSS

2022/7/21

【CSS font-familyの使い方】フォント種類・字体の変更方法

今回は、フォントの種類・字体を変更することができるCSSプロパティ「font-family」の使い方を解説していきます。 PCやモバイル端末には、游ゴシック、游明朝、ヒラギノゴシックなど、いろいろなフォントがインストール・用意されており、CSSで表示される文字フォントを指定することができます。 font-familyはフォントの種類を指定できるCSSプロパティ font-familyはフォントの種類を変更する事ができるCSSプロパティです。以下のように「fon ...

CSS

2022/7/21

【CSS letter-spacingの使い方】テキスト文字の字間調整

今回はCSSプロパティの1つ「letter-spacing」の使い方をご紹介します。 letter-spacingを使用すると、選択したテキスト全体の文字間隔の調整をすることが可能です。 letter-spacingの使い方 letter-spacingは、文章の字間を調整することができるCSSプロパティです。標準の字間よりもより字間を空けたい・狭めたい場合にletter-spacingを使用します。 letter-spacingを使って字間を調整 ...

CSS

2022/7/21

【CSS font-weightの使い方】文字の太さの変更方法

今回は、CSSプロパティの1つで文字の太さを変更できるプロパティ「font-weightプロパティ」の使い方を解説していきます。 font-weightプロパティは、テキストの一部だけ文字を太くして目立たせたい場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用することができます。 font-weightは文字の太さを変更できるCSSプロパティ font-weightは文字の太さを変更することができるプロパティです。テキストの一部だけ太字や細字にしたい ...

CSS

2022/7/21

【CSS font-sizeの使い方】文字サイズ変更(px rem em %)

今回は文字サイズを変更するのに使用されるCSSプロパティ「font-size」の使い方を紹介します。 font-sizeを利用するとテキスト文字の大きさを変更することができます。フォントサイズの指定方法には、pxやrem、em、%など使える単位が多く、今回は各単位の意味や使用例について解説していきます。 font-sizeプロパティの使い方 font-sizeは、文字のフォントサイズを変更するのに使用されるプロパティです。フォントサイズを指定していない場合、pタ ...

CSS

2022/7/21

【CSS box-shadowの使い方】ボックス要素や画像に影をつける方法

今回は画像やボックスにドロップシャドウのシャドウ効果を付けることができるCSSプロパティ「box-shadow」の使い方を解説していきます。 box-shadowで要素に影をつける方法 box-shadowは、画像やボックスの周りにドロップシャドウのような影の効果を付けることができるCSSプロパティです。複数の値を半角スペースで区切って指定することができ、こうすることで影の位置の調整や色の変更、大きさの調整など様々な設定をすることができます。 [crayon-63d3be95 ...

CSS

2022/7/21

【CSS text-shadowの使い方】文字に影を付ける方法

今回はテキスト文字に影(シャドウ)を付ける事ができるCSSプロパティ「text-shadow」の使い方を解説していきます。 text-shadowでテキストに影をつける方法 text-shadowプロパティはCSSプロパティの1つで、テキストに影を付けることができます。下記は、h1タグにtext-shadowで影をつけた例です。

<h1>テキストシャドウの使い方</h1>

1	<h1>テキストシャドウの使い方</h1>

h1{
  text-shadow: 6px 3px #bbb;
}

h1{

text-shadow: 6px 3px #bbb;

}

& ...

CSS

2022/9/7

CSS position:stickyの使い方と動かない時の対処法

今回はpositionプロパティの値の1つであるposition: stickyの使い方を解説していきます。 stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができるので便利です。 ※なお、本記事ではpositionプロパティのstatic・relative・absolute・fixedの使い方について解説していません。これらについては【初心者向け】CSS positionで位置指定でする方法・使い方」をご参照く ...

CSS

2022/7/21

【CSS colorの使い方】テキスト文字色を変更する方法

HTMLやCSSを勉強し始めた初心者やWordPressを運用している方で「この部分だけは赤色文字で表示したい」といったことがあります。文字色を変更するには、CSSの「colorプロパティ」を利用します。今回は、colorプロパティでの文字色を変更する方法や使用できる値を解説します。 CSSのcolorプロパティの使い方 colorプロパティは、テキスト文字色を変更するCSSのプロパティです。 colorプロパティの使い方は簡単で、文字色を変更したい要素に対して以下のように ...

CSS

2022/7/21

【CSS widthとheightの使い方】横幅と高さの指定方法

今回はCSSのwidthプロパティ・heightプロパティの使い方をご紹介します。 widthやheightを指定することで、要素の横幅や高さを指定・変更することができます。 width・heightプロパティの意味 width・heightは、要素の横幅や高さを変更する際に使用されるCSSプロパティです。 width・heightプロパティの使い方 width・heightプロパティを使って横幅・高さを指定するには、変更したい要素を選択し、以下のように記述してあ ...

CSS

2022/6/3

【CSS overflowの使い方】hiddenやscrollの違い

今回はCSSのoverflowプロパティの使い方について紹介していきます。この記事を読むと分かること overflowプロパティの概要について overflowプロパティで使用できる値とその意味について overflow-x・overflow-yの使い方について overflowプロパティとは？ overflowプロパティは、要素がボックスの外側にはみ出てしまった際に、はみ出た部分をどのように表示させるかを指定する事ができるプロパティです。基本的に要素がボック ...

レンタルサーバー

2022/12/15

レンタルサーバースペック一覧表(目的別絞り込み機能あり)

レンタルサーバー一覧表レンタルサーバーのスペック一覧・比較表です(2022年12月12日時点の内容です)。なお、各レンタルサーバーの詳細の説明については「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社」をご参照ください。おすすめタイプ特におすすめ今回の比較表の中でも特におすすめ。個人〜法人まで幅広く使われているバランス型の代表的なサービスプラン。詳しくは「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社」個人向け・格安重視個人サイト・趣味・勉強サイトな ...

HTML

2022/6/3

【dl・dt・dd】HTML説明リストタグの意味と使い方

HTMLのdl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用いられます。今回はdl・dt・ddの使い方について解説します。この記事を読むと分かること dl・dt・ddタグの概要について dl・dt・ddタグの使い方について ul・olタグとの使い分けについて dl・dt・ddタグの概要 dl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用い ...

CSS

2022/6/7

【CSS text-decorationの使い方】文字テキストの装飾方法

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSSプロパティ、text-decorationプロパティの使い方について解説していきます。この記事を読むと分かること text-decorationプロパティの概要について text-decorationプロパティで指定できる値について aタグにデフォルトで付いている下線を消す方法について text-decoration：テキストに装飾を付けるCSSプロパティ text-decorationプロパティは、テキストに ...

CSS

2022/6/3

【CSS擬似要素】::before ::afterの意味と使い方・活用例

今回はCSSの擬似要素::before、::afterの使い方を解説します。「CSSで吹き出しデザインを作りたい」「リストの先頭に好きな画像を表示させてオリジナルデザインのリストを作成したい」といった際に擬似要素::before、::afterを使うと非常に便利です。この記事を読むと分かること擬似要素before、afterの基本について擬似要素before、afterの書き方について擬似要素before、afterを使用するメリットについて擬似要素before、afterの様々な活用例につい ...

ホームページの作り方

2022/5/13

メールフォームとは？おすすめ無料問い合わせメールフォーム7選

ほとんどのホームページやブログでは、お問い合わせフォームが設置されていますが、どうやったら良いのかわからない人も多いのではないでしょうか特にHTMLやCSSを勉強し始めたばかりの方で、メールフォームの作り方がイメージできないという方も多いです。そこで、今回は、問い合わせフォームの作り方の種類、およびおすすめの無料メールフォーム作成ツールをご紹介していきます。この記事を読むと分かることメールフォームの概要や種類についておすすめの無料メールフォームについてメールフォームを設置するメリ ...

HTML

2022/6/3

HTML リンクタグ<a href=" ">の使い方やよく使う属性

今回はHTMLのaタグの使ってリンクを設定する方法について紹介していきます。 aタグを使うことで外部ページへのリンクを作れるだけでなく、同一ページ内のある箇所に移動する「ページ内リンク」や、クリックするとメールソフトが開くといった「メールリンク」等も作ることができます。この記事を読むと分かること aタグの基本的な使い方について aタグを使って作成できるリンクの種類とそれぞれの書き方について aタグのrel属性について aタグのデザインを変更する方法について &n ...

ネットショップ

2022/5/6

決済代行サービスとは？特徴や代表的な決済サービス

ネットショップの運営にあたってはクレジット決済が必要不可欠になっていますが、クレジットカード会社と個別に契約するのは手間もかかるし不便です。そこで最近必ずと言っていいほどお世話になるのが「決済代行サービス」です。「決済代行サービス」を利用すると、クレジットカード会社などの決済期間との契約・売上入金などをまとめて行うことが可能となります。今回はそんな便利な「決済代行サービス」についてお伝えします。決済代行サービスとは？「決済代行」サービスとは、クレジットカード決済や電子 ...

HTML

2022/6/3

【HTML divタグの使い方】divの意味や役割を解説

divタグはHTMLコーディングをする際に非常に多くの場面で利用します。しかし、imgタグやaタグと違って直接見た目や動作に変化がないので、HTML初めて勉強した人はいまいち意味や役割がわからない方も多いのではないでしょうか。そこで今回は、divの意味や役割などdivタグの使い方の基本を解説します。この記事を読むと分かること divタグの概要について divタグを使う上での注意点について divタグの使い方について divタグとspanタグの違いについて d ...

« Prev 1 2 3 4 … 13 Next »

YouTubeチャンネル開設

PICK UP

個別指導Webスクール

ホームページの作り方・ブログの始め方

シン・レンタルサーバーの特徴やメリット・デメリット

HTML改行タグbrの使い方・文中に改行を入れる方法

【ConoHa WING】phpMyAdminログイン方法とデータベース復元

【さくらサーバー】phpMyAdminへのログイン方法とデータベース復元方法

【エックスサーバー】phpMyAdminへのログイン方法とデータベース復元方法

WEBST8のブログ