WEBST8

HTMLやCSSを勉強した際に、初期でつまづきやすいのがCSSセレクタの種類や指定方法です。 CSSを使って任意の要素に対して適切なスタイルを設定するには、CSSセレクタの種類や指定方法を理解しておく必要があります。 今回はCSSセレクタの概要やセレクタの種類、指定方法を解説します。     CSSセレクタとは？ CSSセレクタとは、「どのHTML要素にスタイルを適用させるか」を決めるものです。 たとえば、h2要素に背景色を設定したい場合は下記のように設定します。   下記の ...

Googleなどの検索結果で通常のタイトルや説明文以外に、日時や評価、画像などの情報が追加されて表示されている検索結果を見たことがある人もいるのではないでしょうか。 上記のようなリッチな検索結果を表示させる方法として「構造化データ」を利用する方法があります。 構造化データとは、一言で言うと「ページの情報を詳しく検索エンジンに伝える役割を担ったデータ」のことです。 ここでは、構造化データの概要やメリット、書き方などを解説していきます。     構造化データとは？ 構造化データとは、一言で ...

HTMLを勉強していると「セマンティックな要素」という言葉を聞いたこともあるのではないでしょうか。 セマンティックな要素とは意味づけされた要素のことで、HTML5から新たに追加されました。たとえば、ページのヘッダー部分にはヘッダー部分の意味を持つheaderタグを使おうねといった使われ方です。 今回はheaderやnav、main、asideなどの代表的なセマンティック要素の主な使われ方について説明していきます。     セマンティックな要素とは？ セマンティックな要素とは意味づけされ ...

今回は、HTMLを勉強し始めた方向けに、brタグの使い方を説明します。 brタグを利用すると、文中の任意の箇所に改行を入れることができます。brタグはHTMLを勉強している人だけでなく、WordPressでブログを書いている人でも知っておくと便利なので覚えておきましょう。     HTML改行タグbrの意味と使い方 brタグの基本的な使い方 brタグは文中に改行を入れることができるHTMLタグです。 改行したい箇所に<br>と記述してあげるだけでOKです。 <p&gt ...

今回はSassの概要とともに、Visual Studio Codeを使ったSassの導入方法をはじめ、SCSS記法の基本的な書き方をいくつか紹介します。 Sassを利用するとCSSの記述量を減らせたり、管理が楽になりますので、CSSをある程度覚えたらSassも一度勉強してみてください。       Sassとは？使用するメリット Sassの概要と特徴 Sassは「Syntactically Awesome Style Sheets（和訳: 構文的に優れたスタイル シート）」の ...

今回はHTMLで最もよく使うタグであるpタグ（段落タグ）の使い方および、改行brタグとの違いについて解説します。       pタグの基本的な使い方 それではまず、pタグの基本的な使い方を解説します。 pタグは段落タグと呼ばれ、文章の各段落のまとまりをマークアップするのに使用されます。なお、各段落毎に1つのpタグを使用するため、ブログ記事のように長い文章の中にはpタグが多用されるのが一般的です。 <p>今回は、プログラミングスクールAさんが主催しているブログの始め ...

今回は、要素の幅や高さなどを足し算、引き算などの計算式を使って指定できるcalc()関数の使い方について紹介していきます。 calc関数が使えるようになると、pxや%など異なる単位を使って幅を計算・指定することができるようになります。 .sample{ width: calc(100% - 40px); height: calc(300px + 20vw); }       CSSのcalc()関数とは？ CSSのcalc()関数の意味と概要 calc()関数は、CSSで数学 ...

今回はHTML・CSSを勉強し始めた時に、htmlタグにid名やclass名が出てきますが何のことかよくわからない方も多いのではないでしょうか。 classやid属性は、HTML・CSSを勉強する上で必ず必要になる知識です。 今回はHTML・CSSを使ってコーディングをしていく上で非常に重要なclass、id属性の意味や違い・使い方を解説していきます。 <div id="main" class="container">サンプルサンプル</div>     &nb ...

今回はWebサイトに動画を埋め込む際に使用されるHTMLタグ「videoタグ」の使い方について詳しく解説していきます。 数秒〜2,30秒程度の小さい動画であれば、YouTubeにアップしてからサイトに埋め込み表示などしなくても、videoタグを利用して簡単にmp4などの動画をサイト表示させることができます。       videoタグの基本的な使い方 videoタグを使って動画ファイルを読み込むには以下のようにsrc属性を指定して、その中に動画ファイルまでのパスを指定してあげ ...

今回はCSSのグリッドレイアウト(display: grid)の使い方を解説していきます。 グリッドレイアウトを利用すると、要素を格子状に並べて自由に配置することができるので、レイアウトを組むのにとても便利です。       CSSグリッドレイアウト(display: grid)とは？ Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。 Grid Layoutでは列数と行数をあらかじめ指定 ...

border-imageは、要素の枠線に好きな画像を表示させることができるCSSプロパティです。下記の5つのCSSプロパティを同時に指定できます。   なお、border-imageで一括指定する際には、「border-image-slice」「border-image-width」「border-image-outset」の値の間に「/（スラッシュ）」が必要です。 .sample { border-image-source: url(画像のURL) ; border-image-slice: ...

今回はCSSだけでアニメーションを実装することができるCSSのkeyframesとanimationプロパティの使い方を紹介していきます。 CSSで簡単なアニメーションはtransitionでも実装できますが、keyframesとanimationを利用すると、より多様なアニメーションが実装できます。 (参考)【CSSでアニメーション】transitionプロパティの使い方     CSSのkeyframesとanimationとは？両者の役割 keyframesとanimationプ ...

今回は行内やセル内の縦方向の位置を変更することができるCSSプロパティ、vertical-alignの使い方やよく使用される値を紹介します。 <div>行<span style="vertical-align: baseline;">baseline</span></div>div { font-size: 50px; background-color: #ccc; } span { font-size: 12px; background-color: #f ...

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

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

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

box-sizing:border-box;を指定すると枠線borderや内側余白paddingの大きさを要素の幅・高さ(width・height)に含めることができます。 今回はCSSプロパティbox-sizingの意味や使い方を解説します。 ■全ての要素に対してbox-sizing:border-box;を指定した一例 *, *:before, *:after { box-sizing: border-box }   ■box-sizing:border-box;設定なしの場合 <di ...

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

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

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

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

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

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

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

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

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

position:stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができます。 <header>Header</header> <div class="container"> <div class="flex-wrap"> <main>Main Contents</main> <aside> <div class="sidebar-element se1 ...

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

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

今回はCSSのoverflowプロパティの使い方について紹介していきます。       overflowプロパティとは？ overflowプロパティは、要素がボックスの外側にはみ出てしまった際に、はみ出た部分をどのように表示させるかを指定する事ができるプロパティです。 基本的に要素がボックスからはみ出るということはないのですが、以下のように横幅(width)や高さ(height)を指定している場合、要素がボックスからはみ出てしまうことがあります。 <div class= ...