トップページ

Webサイト制作の現場で人気のVisual Studio Code(VSCode)をインストールします。またプラグインの解説を行い、日本語化のプラグインもインストールします。その後、簡単なHTMLを書いてブラウザで表示してみます。

前回の記事で、VSCodeをインストールする方法をお伝えしました。 今回は、前回少しだけ登場した、HTMLのひな形の話やその他のタグに関して解説していきます。 HTMLのタグと属性について HTMLは、Hyper Text Markup L…

Webサイト制作では、画像を使う事が多いです。HTMLで画像を扱うときの解説をしています。Webサイト制作で使う画像の種類や、モニターが色を再現する仕組み等を解説します。また、Webサイト制作に限らず、IT全般で使う「パス（path）」の考え方も解説しています。

CSSの基本的な使い方を解説します。セレクタ・プロパティ・値の解説や、外部読み込み、HTML内部記述、インラインの実際の使い方まで、実際のサンプルコードを使いつつ解説します。また、数多くある色の指定方法の中から、おすすめの色の指定方法も紹介しています。

今回は、主にボックスモデルという考え方に関して解説していきます。HTMLには、各々のタグに領域があります。h1の領域、pの領域といった感じです。 この、「領域」を意識しながらCSSを作っていくのが、とても重要です。自分が書いているCSSは、…

この記事では、HTMLのブロック要素の特長とインライン要素の特長について解説していきます。インライン要素にwidthプロパティを入れても反映されない事や、ブロック要素は何も指定しなければ、横幅がブラウザの幅いっぱいになる等、詳しく解説していきます。また、パンくずリストを作る過程で、ブロック要素をインライン要素に変換する方法も解説しています。

Webサイト制作で、使わない事はないんじゃないかというくらいよく使う、リンクについて、詳しく解説していきます。ページとページをリンクする方法や、ボタン状にデザインする方法などを解説しています。その中で、ブロック要素や要素のセンタリングなど、CSSでWebサイトをデザインするのに必須の知識も紹介しています。

シングルカラム、2カラムといった、Webサイトでよく見かけるレイアウトの解説をしています。また、ヘッダー、ナビゲーションなどの各々のパーツの解説も行っています。シンプルなナビゲーションを実際に作る事で、Webサイト制作で必須の要素を横並びにする方法を解説していきます。なるべく丁寧に、一項目ずつサンプルコードを用意しています。

今回の記事では、Webサイトを作る時に採用する事の多い、レスポンシブサイトの作り方を紹介します。レスポンシブサイトとは、画面の横幅に応じてレイアウトが変わるWebサイトの事です。主にスマートフォンに対応したサイトを作る場合に、レスポンシブサ…

Webサイトを作る時、縦に並んでいる要素を横並びにする機会がとても多いです。CSSで横並びにする方法はいくつかあるのですが、今回の記事ではフレックスボックスを使う方法を紹介しようと思います。 ひとまずフレックスボックスで要素を横並びに出来れ…