投稿日：2019-10-23T21:22:52+09:00

Progateでの学習メモ　HTML,CSS編

Progateで学習したことのメモ
学習したことと、その時調べたことまとめ

HTMLとCSS

そもそも言語だってわかってなかった(･_･;

HTML（HyperText Markup Language）:Webページの要素や構造を形づくる言語

CSS（Cascading Style Sheets）:Webページの文書構造にデザインを施し、見栄えを整える言語

CSSのメリット

作業の効率化

ページの軽量化、読み込み速度向上

HTMLで表現不可能な装飾

SEO（検索エンジン最適化）に対応

複数レイアウトに使い分け可能（TV、印刷、ブラウザなど）

HTMLに触れてみよう！編

タグとか説明

<h1> 見出し。<h６>まであり、<h６>が最小の見出し。

<p> 段落

 コメント

<a href="リンク先のURL">実際にブラウザに表示されるテキスト</a> リンク

<img src="画像のURL"> 画像の表示。終了タグは不要。

<li> リスト。インデントで入れ子になる。

<ul> 囲んだ<li>の要素の先頭に黒の点がつく。

<ol> 囲んだ<li>の要素の先頭に連番がつく。

CSSに触れてみよう！編

サンプルソース
index.html
<h1>Hello World</h1>
<p>プログラミングの世界へようこそ</p>
stylesheet.css
h1 {
  /* 文字の色:赤 */
  color:#ff0000;
}

p {
  /* 文字の色：青 */
  color:#0000ff;
}
cssのソースで「h1」（要素）をセレクタ、変更項目をプロパティ

/* */で囲んだ行がコメント

font-size：文字の大きさを指定。ピクセル単位なので、pxをつける。

font-family：フォントの指定。スペースが入るフォント名については”をつける。それ以外はつけない。

「#dddddd」のように同じ値が続く場合は、「#ddd」と省略可能。

特定の要素にCSSを適用する場合　→ 要素に名前をつける
index.html
<h2>レッスン一覧</h2>
<ul>
  <li class="selected">HTML</li>
  <li>PHP</li>
  <li>Ruby</li>
</ul>
stylesheet.css
li {
  color: #444;
}
.selected{
  color:#ff0000;
}
要素にclassを使って名前をつけることによって、別々のCSSを適用する可能となる。

class名でCSSを指定する場合には、先頭にドット「.」が必要

レイアウトを作ろう！編

<head>要素にはページに関する情報、<body>要素には実際に表示したい内容。

<!DOCTYPE html>の部分はDOCTYPE宣言。HTMLのバージョンを宣言

<head>の内容例

<meta charset="utf-8">
文字コードの指定。ページの文字化けを防ぐ。

<title>Progate</title>
ページのタイトルの設定

<link rel="stylesheet" href="stylesheet.css">
HTMLからCSSの読み込み。href属性で読み込むCSSファイルを指定。

レイアウトは<div>要素によって構成。「div」は「division」の略で、要素をグループ化するために使用。

ヘッダーを作ろう！編

float:left;：要素を横並びにする

padding: 値;：余白を入れる。値を4つ、スペース区切りで指定する場合、「上」「右」「下」「左」の順で指定。

フッターを作ろう！編

ヘッダーとフッターのリストで異なるCSSを適用する場合
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

    <div class="main">
      
    </div>

    <div class="footer">
      <div class="footer-logo">
        Progate
      </div>

      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>

    </div>
  </body>
</html>
stylesheet.css
.header-list li{
  float: left;
}
上記のように指定すると、「header-list」の中の<li>要素にのみCSSを適用できる。

コンテンツを作ろう！編

main要素は、「copy-container」、「contents」、「contact-form」の3つの要素

文中の一部にCSSを適用させたい場合は、<span>要素で囲む

paddingはborderの内側の余白を作る

marginborderの内側の余白を作る。

指定パターは以下の通り

上下左右を個別で設定

上右下左の順で値を4つ、スペース区切りで指定

上下左右の順で値を２つ、スペース区切りで指定

お問い合わせフォームを作ろう！編

<input>要素は１行のテキスト入力用の要素。終了タグは不要。type属性にsubmitを指定すると、入力欄ではなく、ボタンが表示される。

<textarea>要素は複数行のテキスト入力を用の要素。
index.html
      

      <div class="contact-form">
        <h3 class="section-title">お問い合わせ</h3>
        <p>メールアドレス（必須）</p>
        <input/>

        <p>お問い合わせ内容（必須）</p>
        <textarea></textarea>

        <p>※必須項目は必ずご入力ください</p>
        <input class="contact-submit" type="submit" value="送信" />
      </div>

      
複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用。

以上

とりあえず初級編終了！

参考

Progate

今さら聞けない！CSSとは【初心者向け】

ホームページの作り方：さきちんうぇぶ CSSのメリット

タグとか	説明
`<h1>`	見出し。`<h６>`まであり、`<h６>`が最小の見出し。
`<p>`	段落
`<!-- -->`	コメント
`<a href="リンク先のURL">実際にブラウザに表示されるテキスト</a>`	リンク
`<img src="画像のURL">`	画像の表示。終了タグは不要。
`<li>`	リスト。インデントで入れ子になる。
`<ul>`	囲んだ`<li>`の要素の先頭に黒の点がつく。
`<ol>`	囲んだ`<li>`の要素の先頭に連番がつく。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:54:55+09:00

プログラミング学習の進捗状況

感想

昨日からプログラミング学習を始めましたが、カリキュラムを見ただけでは分かったようで分かっていない痛感し、実際に手を動かして、コードを少しでも多く書くことが重要だと感じました。

学習

HTMLとCSSの関係や役割、classやidの特性などを学習しました。

課題

スペルの間違いや；と：を打ち間違えてしまってエラーが出てしまった。

改善策

まずはエラーを少なくできるよう丁寧に入力し、エラーが出てしまってもなるべく自分で解決できるようにする。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:36:58+09:00

HTML CSS 吹き出しを作ろう

画像として読み込みするのではなく、CSSで吹き出しを作る方法。
自分で作る時に迷わないようにするためのメモ。
右のようなのを作る

まずはhtml
fukidashi.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>吹き出し</title>
    <link rel="stylesheet" href="css/fukidashi.css">
  </head>
<body>
  <div class="text-center">
    <div class="fukidashi">
      <p>
        吹き出し
      </p>
    </div>
  </div>
</body>
</html>
次はcss
fukidashi.css
body {
    margin: 0;
}
.text-center {
    text-align: center;
    margin: 20px;
}
.fukidashi {
    background: #00bfff;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    color: #ffffff;
}
.fukidashi p {
    margin: 0;
    position: absolute;
    top: 40px;
    left: 20px;
}
.fukidashi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 16px 8px 0 8px;
    border-color: #00bfff transparent transparent transparent;
}
●の丸みを決めているところは？

●の部分は
    border-radius: 50%;
で出来るのがすぐ分かった。

値を変えてみると
    border-radius: 25%;
右のようになる
「%」ではなく「px」でも指定出来る
    border-radius: 10px;
▼のところってどうなってるの！？

▼の部分をどうやって作っているか最初分からなかったので、それぞれのプロパティを見ていく。

content

▼の部分は疑似要素で作られているのでcontentプロパティが必須
    content: "";
プロパティ値に何もなければ空で良い

▼の位置を決める(position,left,right,bottom,display)
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
分かりやすくするために赤くしてありますが、↑の記述だと▼はここの位置

positionをコメントにすると
    /* position: absolute; */
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
このようになり、left,right,bottomの数字を変えても変化はありません

ボックスモデル(width,height,margin)
    width: 0;
    height: 0;
    margin: 0 auto;
一番分からなかったのはここから…
「幅も高さも0なのに▼になってる！？」って

▼を作っているプロパティは？

実はボーダーで▼になっているように見せていたんですね
分かりやすくするために以下のような記述にしてみました
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: #ff0000 #2600ff #00ff37 #d72add;
全て同じ線幅だとこういう風になっています
つまり▼にするには
「border-width」で幅の調整をして
「border-color」で上・右・下・左うち３つを透明(transparent)
という風にすれば良い

▼を任意の位置に持っていく

右側
.fukidashi::after {
    content: "";
    position: absolute;
    left: 90px;
    right: 0;
    bottom: 30px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 20px 0px 20px 20px;
    border-color: transparent transparent transparent #d72add;
}
上
.fukidashi::after {
    /* 疑似要素を使うときは「content」必ず書く！ */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 0px 20px 20px 20px;
    border-color: transparent transparent #00ff37 transparent;
}
左側
.fukidashi::after {
    /* 疑似要素を使うときは「content」必ず書く！ */
    content: "";
    position: absolute;
    left: -90px;
    right: 0;
    bottom: 30px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 20px 20px 20px 0px;
    border-color: transparent #2600ff transparent transparent;
}
効率的なやり方があったらご教授願いますm(__)m

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:08:54+09:00

学習進捗状況

感想

昨日からプログラミングの勉強を始めましたが、カリキュラムを

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T15:33:58+09:00

created_atを西暦/月/日 XX:YYと表示したい　#CSS #Ruby on Rails #Progate

やりたいこと

・投稿した日付を　西暦/月/日 XX:YY　と表示したい

経緯

・ProgateでRuby,Ruby on Rails,HTTM&CSSを学習し、現在tweet_appを再現中！
その中でつまずいた箇所の備忘として。

解決方法・いろいろな表示方法

◆投稿日時を表示（例：2019/10/23 15:03）
今回の表示方法であれば、下記のようにすればOK
CSS
<%= 変数名.created_at.strftime('%Y/%m/%d %H:%M') %>
◆何分前、何時間前に投稿したかを表示(例：３０秒以内、約1ヶ月・・・）
CSS
<%= time_ago_in_words(post.created_at) %>
※これだと英語表記になるので、日本語にしたい場合はこちらを参考に

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T13:53:48+09:00

画像を円形に表示　#object-fit #CSS #Ruby on Rails #Progate

やりたいこと

・画像を円形に表示したい
・画像を表示するスペースに合わせて画像を縮小or拡大したい
・表示する画像の縦横比は変えないで実現したい

経緯

・ProgateでRuby,Ruby on Rails,HTTM&CSSを学習し、現在tweet_appを再現中！
その中でつまずいた箇所の備忘として。

解決方法

①画像を加工　→面倒臭そう・・・なので今回は無視しました
②cssで指定　→今回はこれでやります

まずHTMLで画像を表示します。
HTML
img(src="sample.jpg")
次にCSSで設定していきます。
CSS
img {
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
  width: 100px;  /* 縦横を同じ値にする */
  height: 100px;  /* 縦横を同じ値にする */
  object-fit: cover; /* 縦横比固定したまま上2つの縦横の範囲内に収まるように配置する */
}
これだけ！簡単！
ただ、
border-radiusを50%にすると円になるのはなんで？
object-fitってなに？ないとどうなるの？
という疑問が湧いてきたので少し調べてみました。

解説

※初心者が調べて解釈した結果になります。訂正・追加があればぜひコメントください！
border-radius: 50%;
・50%の場合、四角い画像が正方形になる
・pxで指定する場合は、widthとheightで指定したpx値の半分にする(100pxの場合は50px)。
・0%（0px)に近づけるほど、円ではなく四角に近づく
・考え方：四隅にくっつく円を4つ作り、直角の代わりに円の一部分（四角と円の接点から接点までの弧）を表示する。円の半径が小さいほど四角に近づき、大きいほど（ただしMAX50%)円に近づく
・Progateでは、border-radiusを使ってボタンの角を少しだけ丸にしていた
width: ◯◯px; 
height: ◯◯px;
・画像の大きさを決める（値が大きいほど大きな円になる）
・幅と高さは同じ値にする（円なので）
object-fit: cover;
・object-fitでは、widthとheightで定めたスペースへの”はめ込み方”を決めることができる
・今回は　はめ込むスペースに合わせて画像を縮小or拡大する、縦横比は変えない、多少カットされても良いからなるべく大きく表示する、の３つを満たしたかったのでcoverとしました。こちらがとてもわかりやすかったです。
・border-radius,width,heightだけでも画像を円にできるが、指定したwidthとheightのpxと画像のpxに差がある場合はおすすめできない（画像の一部しか表示されないor画像がかなり小さくなってしまう）

◆参考サイト
https://www.nishishi.com/css/trim-image-to-circle.html
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

　 Tweet
Qiitaで続きを読む

20191023のCSSに関する記事は6件です。

Progateでの学習メモ HTML,CSS編

HTMLとCSS

HTMLに触れてみよう！編

CSSに触れてみよう！編

レイアウトを作ろう！編

ヘッダーを作ろう！編

フッターを作ろう！編

コンテンツを作ろう！編

お問い合わせフォームを作ろう！編

以上

参考

プログラミング学習の進捗状況

感想

学習

課題

改善策

HTML CSS 吹き出しを作ろう

まずはhtml

次はcss

●の丸みを決めているところは？

▼のところってどうなってるの！？

content

▼の位置を決める(position,left,right,bottom,display)

ボックスモデル(width,height,margin)

▼を作っているプロパティは？

▼を任意の位置に持っていく

右側

上

左側

学習進捗状況

感想

created_atを西暦/月/日 XX:YYと表示したい #CSS #Ruby on Rails #Progate

やりたいこと

経緯

解決方法・いろいろな表示方法

画像を円形に表示 #object-fit #CSS #Ruby on Rails #Progate

やりたいこと

経緯

解決方法

解説

日付別

タグ一覧

Progateでの学習メモ　HTML,CSS編

created_atを西暦/月/日 XX:YYと表示したい　#CSS #Ruby on Rails #Progate

画像を円形に表示　#object-fit #CSS #Ruby on Rails #Progate