WEB HTML 1文字目だけ大きくしたい
タイポグラフィの一環として、１文字目だけ大きくしてデザインにメリハリをつけたいとき、「::first-letter」セレクタを使ってテキストの1文字目を選択し、スタイルを調整することができます。このサンプルでは雑誌などでよく見かける、1文字目だけを大きくするデザインにしています。ポイントは「::first-letter」で選択した1文字目に「float:left;」を適用することです。あとは、次の...
WEB
WEB 
WEB 段落ごとに字下げ（インデント）したい
テキストの段落の始まりを１文字分空けることを「字下げ」といいます。日本語の場合、本来は文章の段落の始まりを１文字分空けることになっています。Web氏とでは文字が揃わずあまり美しく見えないためそうしないことも多いです。もし、字下げする場合にtext-indentプロパティを使います。1文字分字下げするなら「text-indent:1em;」とします。<!DOCTYPE html><html lang...
WEB HTML イタリックで表示される要素を通常のテキストに戻したい
<address>タグなどイタリックで表示されるタグを使いたいとき、通常のテキストデザインにする方法を解説します。<address>タグ、<em>タグ、<i>タグ、<cite>タグなどは、デフォルトCSSではイタリックで表示されるようになっています。日本語にはイタリック体がなく読みづらいため、こうしたタグを使う場合は、通常のフォントに戻すCSSを書きます。font-styleプロパティは、フォント...
WEB HTML ページ全体のフォントサイズを相対的に指定したい
フォントサイズの管理を統一したいとき、font-sizeプロパティを指定するときの値の単位に「rem」を使用すると<html>に設定したフォントサイズを基準として、各要素のフォントサイズを相対的に決めることができます。単位をremにすれば、emや%を使った継承の問題をおこさずに全体のフォントサイズを相対的に決めることが出来ます。フォントサイズを相対的に決めておくと、<html>に設定したフォントサ...
WEB HTML 半透明なテキスト色を指定したい（RGBA）
「rgba()」も、色を指定する方法のひとつです。rgb()に加えて、アルファ値（透明度）の設定ができるようになっています。rgba()は４つの値を指定する必要があり、前の３つの赤、緑、青の各色を0~255の10進数で指定します。さらに、4つ目の値で透明度を0~1.の少数で指定します。この値が0のとき完全に透明で見えなくなり、１のとき完全に不透明で、透明効果はなくなります。色指定の方法はいろいろあ...
WEB HTML ツールチップを表示したい
リンクなどに補足的な情報を追加したいときaタグのtitle属性を使用します。タグにtitle属性を追加しておくと、マウスポインタがホバーしたときに、ツールチップが表示されるようになります。title属性の値には、ツールチップに表示したいテキスト内容を設定します。このサンプルではaタグを使用しましたが他のどんなタグにも使用できます。ただし、スマートフォンやタブレットのブラウザでは、title属性のツ...
WEB 略語であることを表現したい
略語であることをマークアップしたいとき、とくにその略語の正式名称を表示したい時<addr>~</addr>は、囲まれたテキストが「略語」であることを意味するタグです。<addr>にはtitle属性を追加することができ、略語の正式名称を書いておくことができます。title属性があると、マウスがホバーしたとき、その内容が表示されるようになっています。<addr>タグは、初期状態では下線もつかず、通常の...
WEB HTML 読みがなのルビを振りたい
漢字にルビを振るには、<ruby>と関連の<rb>、<rt>、<rp>を使用します。基本的なマークアップのパターンは次の通りです。この書式の「漢字」と「かな」の部分を書き換えれば、どんなときでも使用できます。<ruby>~</ruby>ルビを振る漢字とかなを囲む<rb>~</rb>ルビを振る漢字（ルビベース）<rt>~</rt>ルビ（ルビテキスト）<rp>~</rp>ルビに対応していないブラウザが...
WEB HTML テキストの一部にマーカーをつけたい
テキストを部分的に強調したいときに、<mark>タグを使用することでマーカーを付けることができます。<mark>~</mark>タグはHTML5で登場した比較的新しいタグです。テキストに蛍光ペンでマーカーを引いたような塗りをつけるタグです。<mark>タグはテキスト装飾として目立たせることを目的としていて、重要な意味は持っていません。<mark>マーカーを引きたいテキスト</mark>サンプル <...
WEB 日付や時刻を表示したい
日時を表示したいときは、<time>タグを使います。<time>~</time>の中に含めるテキストは、日時をさすようなものであれば、どんなフォーマットでも可能です。<time>タグの最大の特徴は、datetime属性を追加できることです。datetime属性にはコンピュータが理解できるフォーマットで日時を指定します。たとえば、検索エンジンのクローラーがこの属性に書かれている日時を解析してくれれば...
WEB JavaScriptが動作しない時のコンテンツを記述したい
JavaScriptが動作しないブラウザに、代わりになるコンテンツを表示する必要があるときに使用します。JavaScriptが動作しないブラウザからアクセスされたときに、JavaScriptが動作しなくても不都合がないように代わりのコンテンツを表示するには、<noscript>タグを使用します。JavaScriptが動作しないときは別のコンテンツを表示するHTMLとCSSを追加します。<noscr...
WEB JavaScriptをHTMLに直接書きたい
HTMLに直接JavaScriptファイルを記述するが必要があるとき、同じ<script>タグを使います。JavaScriptファイルを用意することも、HTMLに直接書くことも、どちらもよく使用されます。指定方法以下の範囲に書かれたJavaScriptプログラムが実行されます。<script>~</script>サンプル<body> <div> <p>ユーザーIDを忘れた方</p> <button...
WEB JavaScriptファイルを読み込みたい
HTMLに外部JavaScriptファイルを読み込む必要があるとき、次のタグをHTML内に記述します。パスに指定されたJavaScriptファイルを読み込みます。<script src="JavaScriptファイルのパス"></script>JavaScriptファイルを読み込むには「<script src="js/javascript.js"></script>」を記述します。src属性には、...
WEB HTML ページの主要な言語設定したい
コンテンツの主要な言語が日本語ではないときなどに使用します。ページの主要な言語が日本語ではないときは<html>タグに含まれるlang属性の言語コードを書き換えます。主要な言語が英語なら次のように記載します。<html lang="en"><html>タグのlang属性<html>タグのlang属性には、そのページに含まれるコンテンツの主要な言語を指定します。lang属性があってもなくてもページの...
WEB ページの枠組みを作る
実践的なサンプルページの作成方法について解説ポイントfloatを指定された要素は左または右に寄せて配置され、後続の要素はその反対側に回り込むfloatを指定した要素は親要素の高さとは無関係になり、親ボックスからはみ出すfloatを指定した要素全体を含むように親要素を拡張するには、clearfixを使用するclearfixの代わりとしてoverflowやfloatを使用することもできる各カラムの高さ...
WEB 相対配置と絶対配置
floatプロパティは左右に寄せる配置方法でしたが、縦・横の配置位置を数値で指定する方法も用意されています。それがpositionプロパティによる相対配置と絶対配置で、別レイヤーのようにしてコンテンツを重ねて表示させることができます。positionで配置位置を指定するHTMLの内容としては、ブロックレベル要素であるdiv要素が３つあるだけです。その内容のテキストには、さらにspanタグが付けられ...
WEB floatでボックスを横に並べる
floatを使ったマルチカラムレイアウトを使用して、ページ全体の枠組み作成について解説しています。１、floatでマルチカラムレイアウトを実現するHTMLの内容としては、「header」、「sub」、「main」、「footer」というidが付けらえれた4つのdiv要素に分かれており、それらが「wrapper」というdiv要素でグループ化されています。CSSでは、body要素の余白をクリアし、「w...
WEB floatプロパティを指定した要素は親ボックスからはみ出し、後続のボックスの中に入り込む
指定した要素は親ボックスからはみ出し、後続のボックスの中に入り込むとマルチカラムレイアウトに使おうとすると不具合が発生します。ここでは、clearfixを使用した解決方法を記載します。１、floatの問題を解決するbody要素の中には、p要素が2つあります。そして1つ目のp要素の先頭に画像が組み込まれていて、それに対してCSSで「float: left;」が指定されています。<!DOCTYPE h...
WEB img要素で指定した画像の下にできるスペース（余白）を簡単に詰める方法
img要素として画像を配置して、marginやpaddingを0に指定しているのにも関わらず画像の下に余計なスペース（空行みたいなもの）が表示されてしまう。ブラウザのデバッグモードでも原因がわからないいし、改行や空白を消しても解消されません。今回は簡単になおせる方法を紹介しています。余計な余白ができる原因画像（img要素）に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置さ...
WEB floatの基本的な使い方
現在のCSSレイアウトでボックスを横に並べるには、一般的にfloatプロパティが使用されます。しかしfloatプロパティは、もともとマルチカラムレイアウト（段組み）を行うことを目的に作られたものではありません。ここでは、floatプロパティ本来の使い方を解説しています。１、画像の配置とテキストの回り込み<!DOCTYPE html><html lang="ja"><head> <title>flo...
WEB WebサイトをSNSでシェアするOGP
「OGP」（Open Gragh Protocol）は、FacebookやTwitter、LINEなどのSNS向けにメタデータ（「タイトル」「画像」「説明文」などの補足情報）を付与する仕様です。ニュースサイトやブログの記事がSNSで共有されるときなどに、各サービスに最適化されたデザインで表示されるなどのメリットがあります。OGPの指定自体はmeta要素内で行います。OGPに必要なデータとその形式は...
WEB メディアクエリを使ってPCサイトとスマホサイトを作成する方法
メディアクエリとViewportを使うことによって、1つのHTMLファイルでWebサイトをPC向けデザイン、タブレット向けデザイン、スマホ向けデザインに対応させることができます。いわゆるレスポンシブデザインといいます。Webページのデザインを記述するCSSのうちの1つです。画面環境にあったデザインに切り替える機能があり、それぞれの画面の大きさや解像度に適した形に調整して表示できます。本記事では、メ...
HTML辞典 HTML辞典 共通のグローバル属性の解説
HTMLですべての要素に共通で適用できる共通の属性について記載しています。グローバル属性（共通）グローバル属性グローバル属性は、すべての要素に指定できる共通の属性のことです。accesskey（アクセスキー）要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。autocapitallze入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します値内...
SEO PageSpeed Insights(ページスピードインサイト)の使用方法と改善対策の解説
PageSpeed Insights(ページスピードインサイト)の使用方法とPageSpeed Insightsで高い点数を取得するための対策について解説しています。
SEO ConoHa+「LiteSpeed Cacheプラグイン」PageSpeed Insightsのパフォーマンススコア90点以上
Google PageSpeed Insightsのパフォーマンスが不合格もしくは改善が必要という状態となり、WordPressサイトをサクッとモバイル及びPCのパフォーマンススコアを90点以上に改善した方法。Google Search Console警告Google Search Consoleで以下の改善が必要と警告されました。検索結果の順位にも影響するため対策が必要となります。モバイル警告Ｐ...
CSS辞典 CSS辞典 var()関数の解説
CSS変数を使用する「var()関数」の使用方法とサンプルコードを記載。概要・使用方法{ プロパティ:var(変数); }「var()関数」はCSS変数を使うことができます。※internetExplorerでは未サポートです。プログラム言語の変数どうよう値を一時的に保存しておくための箱になります。数字をいれておけばカウンタアップなどもすることができます。CSS変数を定義するには２つのハイフン（-...
CSS辞典 CSS辞典 repeat()関数の解説
グリッドレイアウトでトラックの幅の指定を繰り返す「repeat()関数」の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:repeat(繰り返す回数,トラックの幅); }「repeat()関数」、グリッドレイアウトのトラック幅の指定を繰り返すことができます。internetexplorerでは未対応です。この関数はgrid-template-columnsプロパティとgrid-...
CSS辞典 CSS辞典 minmax()関数の解説
グリッドレイアウトでトラックの幅の最小値と最大値を指定するminmax()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:minmax(最小値,最大値)}「minmax()関数」、グリッドレイアウトでトラックの幅の最小値と最大値をまとめて指定できます。上記図のように、ウィンドウ幅に余裕があり収まる場合は、minmax()関数で指定した最大値が採用され、ウィンドウ幅に余裕が...
CSS辞典 CSS辞典 hsl()関数、hsla()関数の解説
色をHSL・HSLaで指定するhsl()関数、hsla()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:hsl(色相,彩度,明度)}{ プロパティ:hsla(色相,彩度,明度,透明度)}「hsl()関数」、またはhsla()関数は、色をHSL、HSLaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。色相、彩度、明度、透...
CSS辞典 CSS辞典 rgb()関数、rgba()関数の解説
色をRGB・RGBaで指定するrgb()関数、rgba()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:rgb(赤,緑,青)}{ プロパティ:rgba(赤,緑,青,透明度)}「rgb()関数」、またはrgba()関数は、色をRGB、RGBaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。赤、緑、青、透明度赤,緑,青RG...
CSS辞典 CSS辞典 attr()関数の解説
属性値を取得するattr()関数の使用方法と使用例、メールアドレスの@前後を関数で挿入するサンプルコードを記載概要・使用方法{ プロパティ:attr(属性)}「attr()関数」は選択要素の属性値取得しCSSで使うことができます。主に::beforeと::after疑似要素で、contetプロパティと一緒に使用します。属性属性名属性値を取得した属性名サンプルコード1hrefプロパティの値をattr...
CSS辞典 CSS辞典 counter()関数の解説
カウンターを使用するcounter()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:counter(キーワード)}「counter()関数」は、自動連番のようなカウンター機能を付けることができます。多くはcounter-resetプロパティ、counter-incrementプロパティと一緒に使用する。キーワードキーワード任意の文字列。半角数字からはじめることはできない...
CSS辞典 CSS辞典 calc()関数の解説
プロパティ値の計算（四則計算）を行うcalc()関数の使用方法を記載
CSS辞典 CSS辞典 使えるメディアタイプとメディアクエリの種類
CSSを出力デバイス別に指定するには「メディアタイプ」を指定します。また、CSS3からはデバイスの種類をより具体的に指定できる「メディアクエリ」が定義されました。メディアクエリとはメディアクエリとは、デバイスの幅に応じてCSSを変えるレスポンシブデザインで使用されます。レスポンシブデザインを使用するには、Viewportも定義する必要があります。Viewport例 <meta name=”view...
CSS辞典 CSS辞典 使えるファイルの種類の指定とMIMEタイプ
HTML文書にCSSなどの外部ファイルを組み込むときは、type属性の値にファイルの種類をMIMEタイプで指定します。MIMEタイプとは、インターネット上でファイルをやり取りするときにファイルの種類を判定するための仕様になります。MIMEタイプの指定方法head要素内にlink要素で外部のスタイルシートを組み込むときの例。type属性の値にtext/cssと指定してCSSファイルかつテキストである...
CSS辞典 CSS辞典 pointer-eventsプロパティの解説
ポインターイベントの対象になる場合の条件を指定する「pointer-eventsプロパティ」の使用方法を記載
CSS辞典 CSS辞典 object-fitプロパティ、object-positionプロパティの解説
画像などのボックスにフィットさせる方法を指定する「object-fit」プロパティ、画像などをボックスに揃える位置を指定する「object-positionプロパティ」の使用方法を記載
CSS辞典 CSS辞典 counter-incrementプロパティ、counter-resetプロパティの解説
カウンター値を更新する「counter-incrementプロパティ」、カウンター値をリセットする「counter-resetプロパティ」の使用方法を記載
CSS辞典 CSS辞典 contentプロパティ解説
要素や疑似要素の内側に挿入するものを決定する「contentプロパティ」の使用方法を記載
CSS辞典 CSS辞典 cursorプロパティ解説
マウスポインターの表示方法を指定する「cursorプロパティ」の使用方法を記載
CSS辞典 CSS辞典 touch-actionプロパティ解説
タッチ画面におけるユーザーの操作を指定する「touch-actionプロパティ」の使用方法を記載
CSS辞典 CSS辞典 transform-boxプロパティ解説
変形の参照ボックスを参照する「transform-boxプロパティ」の使用方法を記載
CSS辞典 CSS辞典 backface-visibilityプロパティ解説
3Dで変形する要素の背面の表示方法を指定する「backface-visibilityプロパティ」の使用方法を記載
CSS辞典 CSS辞典 perspective-originプロパティ解説
3Dで変形する要素の視点の位置を指定する「perspective-originプロパティ」の使用方法を記載
CSS辞典 CSS辞典 transform-styleプロパティ解説
3D空間で変形する要素の子要素の配置方法を指定する「transform-styleプロパティ」の使用方法を記載
CSS辞典 CSS辞典 perspectiveプロパティ解説
3D変形させる時の要素の奥行きの基点を指定する「perspectiveプロパティ」の使用方法を記載
CSS辞典 CSS辞典 transform-originプロパティ解説
変形する要素の中心点の位置を指定する「transform-originプロパティ」の使用方法を記載
CSS辞典 CSS辞典 transformプロパティ解説
2D・3D変形関数を適用して要素を変形する「transformプロパティ」の使用方法を記載
CSS辞典 CSS辞典 animationプロパティ解説
アニメーション関連のプロパティをまとめて指定する「animationプロパティ」の使用方法を記載
CSS辞典 CSS辞典 transitionプロパティ解説
トランジション効果（transition-property、transition-duration、transition-timing-function、transition-delay）をまとめて指定する「transitionプロパティ」の使用方法を記載