- 2024.01.19
HTMLで画像リンクを貼る方法をサンプルコードで解説
Webサイト制作において画像をクリックすると商品ページや申し込みフォームに遷移させたいといった場合など、画像リンクの用いられる機会は非常に多くあります。本記事では、HTMLで画像をリンクとして設定する方法を、サンプルコードを用いて具体的かつわかりやすく解説します。 画像リンクとは 画像リンクとは、Webページ上で画像自体をハイパーリンクとして機能させることで画像をクリックすると別のWebページに遷 […]
9/31ページ
- 2024.01.19
【決定版】CSSで要素を中央に配置する方法を解説
「CSSで要素を中央に配置する」といってもHTML要素の種類や中央配置にする方向などによって取る方法は異なります。それぞれの手順は難しいものではありませんが、単純にやり方が複数あることで難しく感じてしまう人もいるでしょう。 プログラミングの基礎からサイト制作まで↓実践力が身につくプログラミングスクール↓ ≫モニター割引キャンペーン実施中！≪ 【予備知識】ブロック要素・インライン要素・インラインブロ […]
- 2024.01.12
CSSのdisplay:inline、display:block、display:inline-blockの違いを解説
displayプロパティ CSSの「display」とは、要素の表示形式を指定するプロパティです。displayプロパティを使えばブロックレベル要素をインライン形式で表示させたり、逆にインライン要素をブロックレベル形式で表示させることができます。そのため、「構造はブロックレベル要素だけどインラインとして扱いたい（逆も然り）」といった場合などに用いられます。 プログラミングの基礎からサイト制作まで↓ […]
- 2023.12.29
【CSS】position:absolute;とは？要素を好きな位置に配置する方法を解説
Webサイト制作において、理論上は自由にページデザインを実装できます。しかし、画像やテキストを置きたい位置に配置できず、思いどおりのWebサイトにならない！とお困りの人もいるのではないでしょうか。そこで本記事では、画像の上にテキストを表示させるというように、任意の位置に要素のレイアウトを実現する「position:absolute;」について解説します。 position:absolute;とは […]
- 2023.12.29
CSSフレックスボックス(display:flex)とは？使い方をサンプルコードで解説
CSSにはHTML要素を横並びにするプロパティがいくつか存在します。しかし、レイアウトが崩れてしまう、float単体だと使いづらいと、お困りの人に紹介したいのが「flexbox」というプロパティです。 本記事では、HTML要素を横並びにするCSSプロパティの新定番「flexbox」とその使い方を紹介します。サンプルコードを用いて解説するのでぜひ参考にしてください。 あなたのご希望に沿った案件が必ず […]
- 2023.12.22
【CSS】擬似要素とは？::beforeや::afterの使い方を解説
CSSの要素名やクラス名の後に「:before」や「:after」といった記述がされていることがあります。これらは「擬似要素」といい、HTMLのソースコードに影響を与えずにスタイルを追加できます。とても便利な要素なのでその記述方法や使用場面を十分に理解して活用しましょう。本記事ではその擬似要素の基本からサンプルコードを用いた活用例まで段階的に解説していきます。 擬似要素とは CSSの擬似要素とは、 […]
- 2023.12.22
【CSS】改行ルールの設定方法！brタグを使わずに改行しよう
Webページ制作において、意図せぬテキスト改行で表示が崩れてしまった経験はありませんか？テキストの改行は、Webページのデザインを定義するCSSで設定できます。本記事では「CSSでテキストをbrタグみたいに改行したい」「改行させたくない」「英単語の途中で改行させたくない」「記号の前で改行させたくない」というように、目的別に分けてCSSでの改行に関するルールの指定方法を解説します。 あなたのご希望に […]
- 2023.12.15
ER図とは？書き方をサンプルコードでわかりやすく解説
データベース設計で用いられる手法の一つであるER図。しかし、書き方が分からないという人も多いのではないでしょうか。そこで、本記事ではER図の概要から、数種類ある記法の中でもテキストでグラフやチャートを描けるmermaid記法によるER図の書き方まで、段階的に解説します。サンプルコードも記述するので学習の参考にしてください。 まずはER図の言葉の意味とER図に出てくる用語についてみていきましょう。 […]
- 2023.12.15
Vue.js3とは？特徴・環境構築のやり方を解説
Vue.js3とは？ Vue.js3とは2020年9月にリリースされたVue.jsのバージョンです。従来のバージョンよりも軽量になったことで処理速度向上しました。また、従来で抱えていたJavaScriptとTypeScriptの互換性の問題を解消したことで保守性も向上しました。また、Composition APIなどの新機能も実装され性能が格段に向上しました。 Vue.jsの歴史 Vue.jsはE […]
- 2023.12.15
CSSとは？メリットや基本的な書き方を解説【テンプレートあり】
CSSとは CSS（Cascading Style Sheets）とは、Webページをデザインやレイアウトを指定するスタイルシート言語です。CSSの主な役割としてはHTMLで配置した文字や画像、表といったコンテンツのデザインやレイアウトです。HTMLで作成したWebページの土台にデザインやレイアウトを定義します。CSSを使用することでWebページの見栄えをよくすることができます。 Webページのメ […]