CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。CSSまずはここから!HTMLの書き方【初心者向け】HTMLの基礎がわかったら、HTMLの書き方について覚えていきましょう。本記事は、初心者向けに、基礎となるHTMLの書き方を解説した記事です。HTMLでは、文字列にタグで性格付けを施すことで全体を構造化していきます。本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。>」を書き、その間に性格を指定する要素名を入れ、「<要素名>」を作ります。要素名><要素名>」と、2つ並べます。(タグでは、基本的に半角記号を使います。>」に「/」を加え、「<要素名></要素名>」という形にします。このとき、「<要素名>」を開始タグ、「</要素名>」を終了タグといいます。文字列は、開始タグと終了タグのあいだに最後に書くようにしてください。文書のなかに見出しを作りたいときは、「hタグ(h=headerの意)」を使って次のように書くことができます。HTML要素には、現在100を超える種類があります。代表的なものをいくつか紹介しましょう。なかには、開始タグのみでタグを作ることができるものもあります。要素は、その特性や状態などを示すために属性を指定することもできます。属性は、開始タグの要素名の後に半角スペースで区切って書き入れ、さらに、その程度を値で調整することができます。a(アンカー)タグでは下記のように記述します。タグはたくさんあるんですね。重要なタグはよく使うので、自然と覚えていけば大丈夫だよ。今回のタグは、HTMLの全体像とも言えるので、丸暗記です。これまでの書き方を踏まえて、実際にコードを書いてみます。ここでは、テキストエディタに「mi」を使っています。それぞれのタグについて解説していきます。html>はドキュメントタイプといい、このHTMLファイルがどのバージョンを使って書かれているかを宣言するものです。これがないとHTMLファイルとして認識されないので、必ず書く必要があります。html>は、HTML5のバージョンを使っていることを意味します。HTMLのタグは、基本的に入れ子構造です。タグのなかに別のタグを入れ、さらにそのなかに別のタグを入れ...といった具合に書き込んでいくことができます。ロシアのマトリョーシカをイメージしていただくとわかりやすいと思います。コードを書いていくときは、入れ子構造が視覚的にわかりやすいように、階層に応じてスペースをあけて書くといいでしょう。headHTMLプログラミングにも使える!TeraPadの使い方【初心者向け】プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad(テラパッド)について初心者向けにご紹介します。インストール方法から簡単な使い方まで紹介しているので、ぜひ使ってみてください。本記事は下記の流れでご紹介します。95/98/Me/NT4/2000/XP/Vista/7/8の動作する環境で使用可能です。Windows標準搭載の『メモ帳』にはない、多くの機能を備えています。メモ帳は、やり直しが1回しか効かない。次に、インストール方法について解説していきます。ダウンロードページにアクセスし、下図を参考に枠内をクリックし、ファイルをダウンロードします。このようなメッセージが表示されたら、『実行』をクリックします。ここで『はい』をクリックします。ダウンロードができたらインストールを行います。[次へ]をクリックしてください。[次へ]をクリックします。[次へ]をクリックします。「はい」を選択し、フォルダを作成します。[次へ]をクリックしてください。これでインストール完了です。「Readme.txt」のファイルが表示され、デスクトップに次のようなTeraPadのアイコンが表示されます。ここからは基本的な使い方について紹介します。今回は基本となる、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。→[新規作成]を選択します。→[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。→[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。HTMLやJavaScriptなどを入力する際は、「全角スペース」を区別できるように設定することをおすすめします。ある「全角空白」にチェックを入れると、全角スペースを入力した際に、四角のマークが表示されるようになります。最後に、実際にTeraPadを使って、HTMLファイルとCSSファイルを作成してみましょう。デスクトップにあるTeraPadのアイコンをダブルクリックして起動します。→[名前を付けて保存]を選択して、ファイル名を[index.html]として保存してください。上のように記述すると、タグが色分け表示されました。入力した内容をブラウザで確認しましょう。ツールバーの[InternetExplorer]ボタンをクリックすると、ブラウザが起動します。ブラウザが開き、きちんと反映されたことがわかりますね。続いてCSSファイルも作成しましょう。→[名前を付けて保存]を選択し、ファイル名を[style.css]として保存してください。CSSのコードを記述し、上書き保存をします。[index.html]に戻り、HTMLファイルに上のように追記し、上書き保存をします。再度ツールバーの[InternetExplorer]ボタンをクリックして、ブラウザを起動しましょう。CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。今回の記事は以上です。Textの使い方も合わせてご覧ください。[お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境がなくてもプログラミングを学ぶことができます。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。プログラミングHTMLファイル作成にも役立つ!サクラエディタの使い方【初心者向け】プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。本記事は以下の流れでご紹介します。サクラエディタは高機能でありながら、基本的な機能もわかりやすいので初めての方でも簡単という使いやすさが特徴です。そのため、リリースされてからも長く多くの人に使われ続けています。テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能を利用することも可能です。2000/XP/2003/Vista/7/8での環境で動作し、画面解像度800×600以上が推奨となっています。Windows標準のテキストエディタにない多くの機能を持っています。その一部がこれらです。それでは実際に使っていきましょう。インストール方法について解説します。オフィシャルサイトのリンクから、インストーラーパッケージをダウンロードしてください。V2(Unicode版)の最新版ダウンロード(図の青い枠)を使用すると簡単にインストールできます。ファイル名はこのページにアクセスした時点での最新のバージョン名となりますので、この画面の名称とは異なる場合があります。画面の下記をクリックするとダウンロードページが開き自動的にダウンロードが始まります。ダウンロードしたexeファイルをダブルクリックします。このようなメッセージが出るので「実行(R)」をクリックします。ここで下記のようなメッセージが出るので「はい(Y)」をクリックします。この後、「次へ(N)>」をクリッして進むとこのような画面が表示されますが、ここでも「次へ(N)>」をクリックします。この画面では、「デスクトップにアイコンを作成(D)」にチェックが入っていないので、チェックを入れることをおすすめします。アイコンがデスクトップに作成され、最初の起動が楽になります。下記のようなメッセージが出るので「インストール(I)>」をクリックします。正常に終了するとこの画面になるので「完了(F)>」をクリックするとインストールが完了します。インストールの作業はこれだけです。インストールが完了すると、デスクトップに次のようなアイコンが表示されますので、ダブルクリックで起動してください。起動ができたら、まずは基本的な使い方を覚えていきましょう。今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。→[新規作成]を選択します。→[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。→[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。基本的な使い方はこれだけです。最後に、実際にサクラエディタを使って、HTMLファイルとCSSファイルを作成してみましょう。デスクトップにあるサクラエディタのアイコンをダブルクリックして起動します。→[名前を付けて保存]を選択して、ファイル名を[index.html]として保存してください。下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。ここで上書き保存をしてください。図では、c:\sampleのフォルダに保存しています。入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。保存したファイルをドラッグ&ドロップでブラウザに持って行くと確認することができます。CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。→[名前を付けて保存]を選択し、ファイル名を[style.css]として保存してください。※CSSのコードを記述し、上書き保存をします。図では、c:\sampleに保存しています。※この例では背景を水色にします。[index.html]に戻り、HTMLファイルに下記のように追記し、上書き保存をします。先ほど保存した、index.htmlのファイルをダブルクリックしてください。CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。今回の記事は以上です。実際にインストールして使ってみてください。他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。[お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境なくプログラミングを学ぶことができます。CORPORATION.。