プログラミングをはじめて学び創れる人へ!」とProglus「CSS入門」のサポート記事です。ウェブサイトのUIが変更になりましたので、解説いたします。アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。Oneフォントに設定する方法です。families」の記載が無い場合がございます。その場合は、以下のテキストをご利用ください。cursive;また操作方法がわからない場合には、レクチャーの添付資料(リソースや補足説明)に、コピペ用のCSSのコードを用意しておりますのでご利用ください。補足:画像はUdemyの場合。プログラミング入門ナビ編集部はじめにHTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。動画でEmmetについて学ぶフォローしてね!Emmetとは?Emmet(読み:エメット)は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。具体的に見た方が早いので下記の例を見てください。$}</body></html>7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。</ul></body></html>たった1行だったのが6行のコードに早変わりしました。「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字+展開ボタン」の手間で199文字分のコーディングができることになります。この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。Code)でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。「展開」はTabキーでできます。VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。TextやAtom等)では外部プラグインとして導入が必要になります。公式サイトからダウンロード可能です。主な記述方法ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。要素名だけ入力し「展開」(VSCodeではTabキー押下)すると、開始タグと(必要に応じ)終了タグが補完されます。入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。--><h1></h1><div></div>繰り返し特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。入れ子表記との組み合わせも可能です。<li></li></ul>HTML雛形HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。)が日本語(”ja”)でなく英語(”en”)となっていることが多いです。直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。要素にidをつけるには「#」で指定します。要素にクラス名をつけるには「.」で指定します。class="content"></p>テキストを指定コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。alt="犬の画像">上級編グルーピングいくつかの表記の組み合わせを()で囲めば、一つのグループとして扱うことができます。繰り返したい要素が1つだけでなく複数要素である場合などに有効です。</tr></table>連番をつけて展開クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。</p>まとめHTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。CSSにも応用可能なので興味のある方は調べて活用してみてください。コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。プログラミング入門ナビ編集部はじめにHTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう?」「この記述は必須?不要?どっちだったっけ?」といった疑問が出ることがよくあります。全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。内容を動画でも解説しています。Foundationが運営している公式サイトです。ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。わからないことがあったら、まずはこのMDNを参照するのがおすすめです。強くおすすめする理由としては次のようなものがあります。信頼性の高い情報が手に入るウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。まとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。なってしまうと貴重な時間と労力の無駄ですね。MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。ウェブ開発に関する情報が一通り揃っているMDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。無料で使用可能ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。MDNを使ってみよう早速、MDNの使い方を見てみましょう。ブックマークしておくのがおすすめMDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。docs特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。HTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。elements」をクリックして展開すると<a>がありますね。これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。Google検索も便利もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。p」とGoogle検索してみましょう。検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。まとめウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。自分で調べる癖が付けられると、学習スピードがぐんと上がります。プログラミング学習のお供に活用してください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。プログラミング入門ナビ編集部はじめにCSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。これに関連したプロパティの一つに、clearがあります。フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。フロートレイアウトとはまず、フロートレイアウトについておさらいしていきましょう。CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。フロートレイアウトをしないとき理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。下記のようなHTMLファイルを作成します。</body></html>次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。上からbox1・box2・box3の順でレイアウトされます。フロートレイアウトをするときそれでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。HTMLファイル(test.html)の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。href="css/float-noclear.css">下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。clearプロパティとはfloatプロパティの関連プロパティとして、clearがあります。通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。回り込みを解除しない(デフォルト値)clearしてもしなくても同じに見える?clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。both;}HTMLファイル(test.html)の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。href="css/float.css">box1とbox2の高さが同じ場合ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。[float.cssを指定した場合の表示]box1の方がbox2より高い場合しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。[float.cssを指定した場合の表示][float-noclear.cssを指定した場合の表示]このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。まとめフロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは?と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。プログラミング入門ナビ編集部はじめにWebエンジニアへの転職、やることが多くて何から始めたらいいか悩んでしまいますよね。プログラミングの学習を始めたはいいものの「これだけでいいのだろうか」「あれもやっておくべき?」など、考え始めるときりがありません。この記事では、Webエンジニアに最低限必要なスキルセットとして何を押さえるべきかについて、講師のおすすめを紹介します。Webエンジニアリングの全体像まずはWebエンジニアの仕事ではどういったことをするのか、ざっくりと見てみましょう。Webサイト制作時の役割分担として、フロントエンドとサーバーサイド(バックエンドとも呼ばれます)があります。フロントエンドはWebサイトがユーザからどう見えるかを司るユーザーインターフェイス部分の実装です。サーバーサイドはその名の通り、Webサイトが動くサーバー上で必要な機能の実装部分となっています。どちらの場合も、基本的な開発ツールを使いこなせるようにしておくことも重要です。Webエンジニアへの転職後はこのいずれかもしくは両方を担当することになります。全体の動きを把握するためにも、まずは次項以降のスキルセットを一通り身に付けて簡単なWebサイトを開発してみるのがおすすめです。フロントエンド最初に、フロントエンド開発に必要なスキルセットを紹介します。ブラウザ上で簡単に挙動が確認できるので、まずはフロントエンドから入ると理解が進みやすいです。CSS文章や画像など、Webページの見た目を記述するための言語がHTML、そのレイアウトを制御するのがCSSです。Webエンジニアリングにおいて一番基礎の部分であり、初心者の方でも学校の授業等で触れたことがあるかもしれません。新HTML入門WE05-CSS入門JavaScriptWebサイトには、ユーザがただ読んだり見たりするための静的なコンテンツだけではなく、アンケートやファイルアップロードなどユーザが操作するコンテンツもありますね。このようなコンテンツではユーザの操作に応じた動的な処理が必要で、これを記述するための言語がJavaScriptです。実に世界の95%以上のWebサイトでJavaScriptが使用されており、初めて学ぶのに適しています。WE09-JavaScript入門BootstrapHTML、CSS、JavaScriptはいずれもプログラミング言語ですが、自分でデザインも実装も行うとなると手間がかかります。Bootstrapは、表示先のウィンドウサイズに合わせてレイアウトを動的に変化させるレスポンシブデザインなど、定番のレイアウトを簡単に実装するためのCSSフレームワークです。これを覚えればデザイン性の高いサイトをサクサクと作れるようになります。入門サーバーサイドフロントエンドを一通り理解したら、サーバーサイドの技術を身に付けましょう。サーバー環境を構築し、実際に動かしながら学んでいくのが良いでしょう。SQL一定以上の規模であれば、データベースを使わないWebサイトはほとんどないと言っても過言ではありません。ECサイトならば顧客情報や商品情報を管理するのに必要です。SQLはデータベースを操作するためのプログラミング言語で、こちらも習得することを推奨します。Mapping)が可能です。この機能を用いればSQLを意識することなくデータベースを扱うことはできますが、不具合が発生した際のデバッグやパフォーマンスを上げるためのチューニングはSQLを知らなければ難しいでしょう。SQ01-SQL入門Rubyサーバー側の処理を記述するためのスクリプト言語にはPerl、PHP、Python、Java等様々なものがありますが、中でもおすすめしたいのがRubyです。日本人のまつもとゆきひろ氏が開発された言語ということもあり、日本語のドキュメントが充実していて人気が高く、後述する通り便利なフレームワークもあるため初心者の学習に適しているといえます。これを使うとコード量が少なく開発スピードが上がるため、実際の開発現場では必ずといっていいほど導入されています。Rails入門サーバー構築技術(1)herokuサーバーの構築や運用についても学ぶ必要があります。Service)を活用するのが良いでしょう。herokuではハードウェアの準備やOSのインストール等を行わず、アプリケーションのデプロイに集中できるので習得スピードを早められます。herokuサーバー構築技術(2)AWSもう一つのおすすめはAmazon社が提供するAWSです。導入している企業が多いため、習得しておくと良いでしょう。認定試験もあるので、転職活動を有利に進めるために取得を目指すのも良いかもしれません。Service開発基本ツール開発に欠かせない基本ツールの使い方も習得する必要があります。Webエンジニアに限らず全てのエンジニアに必須のスキルです。Git/GitHubGitはソースコードのバージョン管理システムです。開発を進めていくとコード量が膨大になり複雑になってきますよね。後から不具合が起きた場合の対応のため、どのバージョン以降から発生したのかを確認・修正したり、別の機能を派生的に追加したりする目的でソースコードを管理する必要があります。ローカル環境で使用するバージョン管理システムとしては、SubversionやCVSといったものも有名ですが、より便利なGitが現在の主流です。Gitのクラウド版であるGitHubは数千万人規模のユーザが利用しており、ソースコードの公開やそれを通した交流の場となっています。GitHub入門Linuxサーバー環境はLinux上に構築されることが多いため、基本的なLinux操作方法について学ぶ必要があります。重要なコマンドを覚えることから始めると良いでしょう。LS01-はじめてのLinuxサーバ(ローカル環境編)まとめWebエンジニアになるために必要なスキルセットについてご紹介しました。初心者の方におすすめの講座情報も掲載していますので、ぜひチェックしてみてください。学習方針確認のお助けになれば幸いです。・About・プライバシーポリシ。