2019.06.28Toshi小学生からわかるプログラミング、ということで今回から「Progate」というプログラミング学習サイトを利用して一緒に勉強していきましょう。基礎の「HTMLとCSS」について学んでいきましょう!これを学ぶとWebページが作れます!今回解説していく内容は以下です!本記事の内容この記事を見れば「HTML」と「CSS」についてどんな言語かわかる内容になっています。初級編」で行ないますがこの記事はそのレッスンのまとめといった感じです。そのためサクッとどんなことをしているのか参考にしたい方は記事をみるだけでも構いません!※また、自分のわかる範囲で詳しく「Progate」では説明がないとこまで補足しています。HTMLに触れていきます!HTMLに触れてみるHTMLとは、「タグ(<>)」というものを使いテキストに意味をもたせる言語です。CodePen.また、記述するときのポイントとしては<>全角でタグの指定をするのではなく<>半角で指定しましょう!このタグの種類と記述のポイントさえしっかりと抑えておけばHTMLはスラスラ書けるようになります。タグの種類タグの種類はたくさんありますが、よく使うものを以下に一覧化してみました。要素で構成されています。数字を連番でつけることができます。<ul>&<li><ul>&<ol>また、以下のような構造となるため、インデント(隙間)を作ってあげることによりよりコードを見やすくしていきましょう!NG<ul><li></li><li></li></ul>OK<ul><li></li><li></li></ul>HTMLまとめHTMLとは、「タグ(<>)」で構成されておりそのタグと使い方について知ることができました。CSSもみていきましょう!CSSに触れてみるCSSとは、HTMLに対して色、大きさ、配置などを指定し、ページをデザインするための言語です。して記述することができます。セレクタとプロパティ以下はセレクタとプロパティの関係を表しています。!プロパティの種類プロパティの種類もタグと同じように、一覧化してみました。色を変更することができる。赤の表し方でもいろいろな表現方法がある。テキストサイズの変更ができます。表現方法は以下一般的にはpxを使用。フォントの種類の変更することができます。12345フォントの種類を一覧化させているサイトがあったため詳しくは以下をご覧ください!font-familyで指定できるフォント名一覧CSSのfont-familyプロパティで指定できるフォント名・総称ファミリ名を総称ファミリ名と各OS標準の和文フォントで分類し一覧表にしました。コメントを書くことができます。背景色の指定ができます。横幅の指定ができます。高さの指定ができます。」という話をしたかと思います。呼び出すには、idやclassといった属性をつけてあげる必要があります。CSSでレイアウトを作っていきます。CodePen.「Progate」で勉強をすすめていくのも良いのですが実際にファイルを作成してみましょう。テキストエディターはなんでも良いのですが私は「Atom」を使用しています!また、テキストエディターを使用するのではなく「CodePen」を使った学習方法でも個人的にはありだと思います!【CodePen】Webブラウザ上でプログラミング簡単学習!Webデザイン(プログラミング)を学習しよう!といった時、いろいろな準備がありますがこの「CodePen」を使ってしまえば、「HTML」「CSS」「JavaScript」がWebブラウザ上で簡単に学習できてしまいます!この魅力的なツール「CodePen」につてお伝えしたいと思います!www.alloneslife-0to1work.jp2019.05.29HTML&CSS初級編.zip上記のファイルを作って学習をすすめてみてください!Zipをダウンロードしてもらって使っても構いません。HTML構造<html>の中には<head>と<body>があります。<head>にはページに関する情報、<body>には実際に表示したい内容を書きます。html><!--これはこのテキストがHTMLですよ!という宣言です。<!--ここがWebサイトのメイン。</body></html>文字コードを宣言することにより文字化けを防ぎます。」といった形で表示されてしまうこと。オススメ記事等のコンテツがあることがわかります。実際にヘッダー、フッター、コンテンツにわけて作っていきます!ヘッダーを作るヘッダーを作る際は、<heder></heder>タグ内で行ないます!ここではメニューを作りたいので<li>リストを使ってメニューを作成していきます!実際に作成したものが以下になります。・を消すために指定してます。リストの横並びの指定をしています。leftと指定していますが、center、rightといった指定もできます。これは左詰めなのか中央なのか右詰めなのかという指定です。余白(内側)の調整ができます。いっきに指定するやり方。○px;paddingで「上下」「左右」を指定してあげるやり方。フッターを作るフッターを作る際は、<footer></footer>タグ内で行ないます!実際に作成したものが以下になります。CodePen.おこなったこととしてはこちらもヘッダーとは違うメニュー作りです。ヘッダーと作り方が似てるためこちらは割愛させていただきます。CodePen.おこなったこととしてはブロック要素、インライン要素について理解する<span>タグを使って一部の色を変更するです!ブロック要素とは?ブロック要素は、見出し・段落・表など、文書を構成する基本要素で、一つのかたまり(ブロック)として認識されます。どんなタグがブロック要素になるかというと...<blockquote><div><form><h1>〜<h6><hr><ul><ol><p><pre><table>等がブロック要素です。<h1>ブロック要素</h1>インライン要素とは?インライン要素は、ブロック要素の中に含まれている要素になります。どんなタグがインライン要素になるかというと...<a><b><br><code><img><input><label><span><strong><u>等がインライン要素です。CodePen.コンテンツコンテンツを作る際おこなったことはborderを使用し線を引くmarginを使った外側の余白付imgを使って画像を挿入です。色;で線を引くことができます。余白(外側)の調整ができます。いっきに指定するやり方。○px;marginで「上下」「左右」を指定してあげるやり方。画像挿入が可能となります!お問い合わせお問い合わせは<input>や<textarea>から作られています!<input>は1行のテキスト入力を欄で<textarea>は複数行のテキスト入力ができます。/>ソースコードの配布HTML&CSS初級編(終了).zipお疲れ様でした!ここまでまとめた内容をzipにしました。こちらをDownloadし中身の確認をおこなってみてください。ここから発展させて自分だけのWebサイトを作ってみてください!まとめToshiいかがでしたか?ちょっと長めになってしまいましたが、なんとなく作業をしながら「HTML」はこんなやつで「CSS」はこんなやつなのか!っと理解ができたのではないでしょうか?今回記事にまとめている部分は基礎になるためしっかり抑えておきましょう!ToshikazuNagasaki→Tokyo→China→Tokyo→Fukuoka1992/07/02宮崎産まれ、長崎育ち。Life関連記事CODE【WinMerge】使い方。ファイルの差分を比較してみた(Diffツール)開発現場でソースコードの解析をしているのですが、似てるソースコードが複数ある場合など、WinMergeを使ってファイルの差分を比較してみる事があります。Twitterでこういった発信をしている人が結構いますが、プログラミングの独学は時間の無駄だからやめた方がいい理由について今回は解説していこうかと思います。郵便番号を「XXX-XXXX」で打ち込まなければいけない。Cで終了することができます。記事にする必要もない。-pattern)について簡単にお伝えしようと思います。今回は、CSSで文字を縦書きにする方法について説明します。文字を縦書きにしても良いんじゃないでしょうか?では、早速解説します!CSS【コピペで使える】CSSの見出し(タイトル)記事をより見やすくしたいですよね?今回は、CSSで見出しを整えてみましょうといった内容です!見出しを整えることで、ユーザー(読者)が記事を読みやすくなります。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ΔホームCODEHTMLToshikazuNagasaki→Tokyo→China→Tokyo→Fukuoka1992/07/02宮崎産まれ、長崎育ち。卒業し、美容師として4年から働いた後、IT系のベンチャー企業でプログラマーとして1年働く。その後、中国に移住し中国語やECサイトの運営方法などを学び帰国。現在は、再度プログラマーとしてSES事業を中心としている会社に勤務している。このサイトについて「AllOne'sLife」では、プログラミングについての記事~ブログ運営するうえで役立つノウハウ、YouTubeをやっていくうえで役立つ画像編集や動画編集のノウハウ、使ってよかった商品の紹介など様々な情報を発信しています。メニューHOMECODEWordPressPhotoshop副業(UberEats)商品紹介お問い合わせホーム検索トップサイドバーテキストのコピーはできません。defined.")}))})();。