CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。CSS今さら聞けない!FFFTPの使い方Windows用のFTPクライアントソフトの中で特に有名なFFFTPのインストール方法と簡単な設定などの使い方を初心者向けに解説した記事です。Webページをサーバーにアップする際などに使用し、Windowsでよく使われるのがFFFTPです。MacのPCでは使うことができません。今まで使ったことがない方のために、ダウンロード・インストール方法から説明します。FFFTPをインストールします。ダウンロードページにアクセスします。枠内のリンクからファイルをダウンロードし、ダブルクリックで開きます。「次へ」を選択します。利用規約を読み、「次へ」を選択します。インストールする場所を確認して「次へ」を選択します。「次へ」を選択します。「インストール先フォルダを開く」にチェックを入れて「完了」をクリックします。これでインストールは完了です。ここからは実際にFFFTPを使ってみます。フォルダ内のファイルが表示されるので、「FFFTP.exe」を開きます。起動すると「ホスト一覧」のウィンドウが表示されます。「新規ホスト」を選択します。入力する内容は下記の通りです。ホストの設定名:任意の名前を付けます。今回は「接続1」とします。ホスト名(アドレス):FTPサーバ名(FTPホスト名)を入力します。ユーザー名:FTPユーザー名(FTPアカウント名)を入力します。パスワード:FTPパスワードを入力します。FTPサーバ名(FTPホスト名)・FTPユーザ名(FTPアカウント名)・FTPパスワードは、サーバ契約時に送られてくるメールに記載されています。設定が完了したら「OK」をクリックします。設定した項目を選択し、「接続」をクリックします。左がローカル側のファイル、右がサーバー内のファイルになります。「フォルダの移動」アイコンをクリックして、アップロードしたいファイルのあるフォルダまで移動します。アップロードするファイルを右クリックし、「アップロード」を選択します。ファイルがサーバー側にアップロードされます。アップロードしたいファイルを選択した後、上の青い矢印アイコンからでもアップロードが可能です。ローカル側のファイルを直接ドラッグ&ドロップすることでもアップロードすることができます。ドラッグ&ドロップでの操作は、ウィンドウ外からでも可能です。これでFFFTPの使い方は以上です。他のソフトも試してみたい場合は無料のFTPクライアントソフトを紹介する記事を参考にしてください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。実践的にWebサイトを構築したい場合はご参加ください。今回のテーマは、HTML/CSSの基礎です。こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。Language)について学びました。HTMLはあくまでも文書ですので、文書を書くことが前提になっています。その上で、画像やリンクも追加できます。ファイルの拡張子は「.html」です。耳にする「マークアップ」とは文字列をHTMLタグで囲むことによって正しい文書構造を作ることです。実際にHTMLを書くと、このような構造になっています。headは見出し、bodyは本文です。開始タグと終了タグがあるので、<p>〜</p>のように閉じることを忘れないようにする必要があります。勉強会では、基本的なHTMLタグとして下記のタグが紹介されました。実際に書き始める前の注意点についても紹介されています。HTMLを書く際は全角文字がNGなので、コードは必ず半角英数字で書く必要があります。全角スペースもエラーの原因となるため、見分けれるようにエディタを設定することも多いです。その後、勉強会では参加者が実際にプロフィールページをHTMLで作成しました。テキストエディタを使って、まずは自分のプロフィールを打ち込んでいきます。続いて、HTMLを書き加える形でコーディングしていきました。HTMLは書籍や書類、手紙などのように実際の形は無いよね。見出しとかタイトルとかを指定してあげなければならないんだよ。サイトに訪問してくれた人にはわかって貰えるだろうけど、検索エンジンにはわかってもらえないよね。検索エンジンはタグによって、ページのタイトルとかを判断しているんだ。!検索エンジンに知ってもらうためだったりもするんですね~。Sheets)の基礎も学びました。CSSは、見栄えを記述するための言語です。HTMLだけでも装飾することはできますが、HTMLだけを使うと手間がかかるのでCSSを使うと便利になります。拡張子は「.css」です。CSSには、「セレクタ」「プロパティ」「値」の3つがあります。h1タグの文字を「フォントサイズを20px」にする場合はこのように記述します。この際、h1がセレクタ、font-sizeがプロパティ、20pxが値となります。最後に、CSSの書き方として「CSSを別ファイルにした場合」と「HTMLに直接書く場合」の2つが紹介されました。HTMLに直接書く場合は、styleタグを使ってこのように記述します。このコードも参考にして自分でHTML/CSSを書いてみてください。今回の勉強会レポートは以上です。勉強会に興味のある人事担当者の方は、まずはFacebookグループにご参加ください。タグに直接定義するような内側にあるほうが、優先度が高いんだよ。CSSだと見た目を大きく変えられるので、HTMLより興味があります。デザインも適した箇所に設定したほうがいいのでHTMLの基礎も大事なんだよ。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTML/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週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境がなくてもプログラミングを学ぶことができます。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。プログラミングCSSのスタイルの優先順位とは【初心者向け】CSSの記述場所には、styleタグに書く、タグのインラインに直接書く、外部ファイルを作って読み込むという3つの書き方があります。その上で、今回は、スタイルの優先順位について解説します。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。今回は、CSSで記述されたものの優先順位について勉強するよ。記述した場所が後になるほど優先順位は高くなるんだ。同じ場所にスタイルを指定して、どちらが適用されるか実際に見てみよう。はじめに答えを言ってしまうと、スタイルは、一番最後に書いたものが最優先で適応されます。いうことかと言うと、コードの始めのほうで先にスタイルを指定していたとしても、重複したタグへの指定の場合は、一番最後に書かれたスタイルが適応されるのです。ブラウザはHTMLやスタイルシートのデータを上から順に一行ずつ読み込んでいくので、下にいけばいくほど、読み込む情報が最新になるからです。色は先に指定されたピンクではなく、最後に指定されたブルーによって上書きされます。CORPORATION.。