不惑にしてまだ何者でもない者のブログ

Arduino関連、Raspberry Pi関連、プログラミング学習

paizaラーニング『HTML/CSS入門編1: HTML/CSSを理解しよう (全4回) 』を受講してみた

2020-10-15 23:04:08 | paiza
今日から『HTML/CSS入門編 (全3レッスン)』を始めよう。
まずは『HTML/CSS入門編1: HTML/CSSを理解しよう (全4回)』を受講。


01:Webページの仕組みを知ろう

あれなんか講師の声（霧島京子）が違う？声優さん変わったのか？逆にこっちの方が初期なのかな？

  • HTML：Hyper Text Markup Language
    • Webページの内容と構成を指定する
    • テキストファイルとして記述する
    • 基本的に、1ページにつき1ファイル
  • CSS：Cascading Style Sheets
    • Webページのスタイルを指定する
      (サイズ・色・フォント・レイアウトなど)
    • テキストファイルとして記述する
    • 複数のCSSを組み合わせたり、複数のHTMLから共通のCSSを利用したりできる
  • Bootstrap：ツイッター社が開発した高機能なHTMLフレームワーク。
    • HTMLフレームワークは、あらかじめデザインされたHTML/CSSをセットにしたもの。CSSフレームワークと呼ばれることもある
    • オープンソースで誰でも自由に利用OK
    • Webページ用の便利な部品を多数装備
    • レスポンシブデザインに対応

02:Webページを作ってみよう

  • タグの書式
    • <html>と</html>にはさまれた部分が、Webページになる
    • ＜h1＞と＜/h1＞にはさまれた部分が、見出しになる
    • ＜!-- コメント --＞
↑タグが機能してしまうのを避けるため、＜＞を全角で記述。

03:テキストを表示してみよう

  • 主なタグ
    • pタグ： ＜p＞と＜/p＞ではさまれた部分が、段落になります。
    • brタグ： ＜br＞単独で使用するタグです。この位置で改行します。
    • strongタグ：＜strong>と＜/strong＞ではさまれた部分を、強調します。

04:Bootstrapを使ってみよう

  • HTML5の雛形
<!DOCTYPE html>
<html lang="ja">

<head>
 
  <title>Project Nyaan</title>
</head>

<body>
   

吾輩は猫である。


</body>
  • Bootstrapを導入したページ

<!DOCTYPE html>
<html lang="ja">

<head>
 
 
 
  
  <title>Project Nyaan</title>
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
 

吾輩は猫である。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>


感想

かなり初歩だが、Bootstrapについては知らなかったので、勉強になった。


最新の画像［もっと見る］

コメントを投稿