What's New Qiita

20190622のHTMLに関する記事は10件です。

  • 投稿日：2019-06-22T22:24:38+09:00

HTML&CSSノートfrom Progate2

はじめに

Progate で勉強した HTML&CSS のメモ

li タグから・を消す

css のlist-styleをnoneに指定することで・を消すことができます

<ul>
  <li>no bullets</li>
  <li>no bullets</li>
</ul>

li {
  list-style: none;
}

HTML の要素を横に並べる

css のfloatをleftに設定ことで右から左端から横にに並べることができます
rightにすることで右端から並べることができます

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

li {
  float: left;
}

余白を付ける

paddingを適当な単位で指定することで余白を付けることができます

種類 余白の場所
padding-top 上に余白を追加
padding-right 右に余白を追加
padding-left 左に余白を追加
padding-bottom 下に余白を追加 
<div class="logo1"></div>

.logo1 {
  padding: 20px;
}

クラスの中のタグにのみ CSS を適用させる

クラスの中だけのタグに css を適用させるには.クラス名 タグ名のように記述します
listクラスの中のliタグに適用させるときには以下のように書きます

.list li {
  /*cssを記述*/
}

span タグ

改行することなく文字の途中で色を変えたい時などに使います

<h1>Hello <span>world</span></h1>

span {
  color: #ff0000;
}

上記のコードの場合worldのみ赤色になります

境界線を引く

境界線を引くには css のborderを使います
以下のように記述します

.sample {
  /*幅　スタイル　色の順に指定*/
  border: 5px solid red;
}
種類 線の場所
border-bottom 下に引かれる
border-top 上に引かれる
border-left 左に引かれる
border-right 右に引かれる

margin

padding と margin

paddingは境界線の内側marginは外側に余白を追加します

種類 余白の場所
margin-bottom 下に追加
margin-top 上に追加
margin-left 左に追加
margin-right 右に追加

文字の入力

input タグ

inputタグは一行の文字を入力するのに使います

inputタグには様々な属性を付けることができます

属性 意味
text テキストボックスをつくります
password パスワードボックスを作ります
checkbox チェックボックスを作ります
radio ラジオボタンを作ります
file 送信するファイルの指定をします
hidden 隠しデータをサーバーに送信する時に使います
submit 送信ボタンを作ります
reset リセットボタンを作ります
button 汎用ボタンを作ります
image 画像ボタンを作ります

こちらを参考にしてます

textarea タグ

textareaタグは複数行の文字を入力するのに使います

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T22:24:38+09:00

HTML&CSS from Progate

はじめに

Progate で勉強した HTML&CSS のメモ

li タグから・を消す

css のlist-styleをnoneに指定することで・を消すことができます

<ul>
  <li>no bullets</li>
  <li>no bullets</li>
</ul>

li {
  list-style: none;
}

HTML の要素を横に並べる

css のfloatをleftに設定ことで右から左端から横にに並べることができます
rightにすることで右端から並べることができます

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

li {
  float: left;
}

余白を付ける

paddingを適当な単位で指定することで余白を付けることができます

種類 余白の場所
padding-top 上に余白を追加
padding-right 右に余白を追加
padding-left 左に余白を追加
padding-bottom 下に余白を追加 
<div class="logo1"></div>

.logo1 {
  padding: 20px;
}

クラスの中のタグにのみ CSS を適用させる

クラスの中だけのタグに css を適用させるには.クラス名 タグ名のように記述します
listクラスの中のliタグに適用させるときには以下のように書きます

.list li {
  /*cssを記述*/
}

span タグ

改行することなく文字の途中で色を変えたい時などに使います

<h1>Hello <span>world</span></h1>

span {
  color: #ff0000;
}

上記のコードの場合worldのみ赤色になります

境界線を引く

境界線を引くには css のborderを使います
以下のように記述します

.sample {
  /*幅　スタイル　色の順に指定*/
  border: 5px solid red;
}
種類 線の場所
border-bottom 下に引かれる
border-top 上に引かれる
border-left 左に引かれる
border-right 右に引かれる

margin

padding と margin

paddingは境界線の内側marginは外側に余白を追加します

種類 余白の場所
margin-bottom 下に追加
margin-top 上に追加
margin-left 左に追加
margin-right 右に追加

文字の入力

input タグ

inputタグは一行の文字を入力するのに使います

inputタグには様々な属性を付けることができます

属性 意味
text テキストボックスをつくります
password パスワードボックスを作ります
checkbox チェックボックスを作ります
radio ラジオボタンを作ります
file 送信するファイルの指定をします
hidden 隠しデータをサーバーに送信する時に使います
submit 送信ボタンを作ります
reset リセットボタンを作ります
button 汎用ボタンを作ります
image 画像ボタンを作ります

こちらを参考にしてます

textarea タグ

textareaタグは複数行の文字を入力するのに使います

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T21:51:24+09:00

Qiitaを始めてみました。

初めまして、ユウキと言います。
今３５歳の労働ワーカーですが、以前から興味があったプログラミング学習を
2019年から始めました:relaxed:

最初はHTMLとCSSの学習をドットインストールやprogateなどを使って行い、
サンプルサイトを作ったりしていました。

そして今週からRUbyの勉強を開始。まだ条件分岐などの基礎な部分しかしてないですが、
とても楽しいです:grinning:

近い将来、WEBサービスの開発やプログラマーとしてお仕事したいんですが、今は毎日コツコツ
手を動かし、思考してステップアップに励んでいます。

身近にプログラマーや学習している方々がいないので、こちらのサイトでは色々な方々と交流できれば
幸いです！

どうぞよろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T21:15:26+09:00

AWS Training の動画を早送りしたい

AWS Training の動画を早送りしたい

この記事に必要な範囲で自己紹介すると、

  • 最近 AWS の勉強をはじめた
  • とりあえず AWS Training を進めている
  • リアルの会話はゆっくりのほうが嬉しいし、自分自身の喋りはとろい
    • （何でもかんでも早送りにしたい人ではない、ということです）

という感じです。

AWS Training とは

AWS が公式に提供してくれている学習用リソースです。まだ始めたばかりでよく分かっていませんが、ブラウザでアクセスして、動画を見ながら勉強できます。様々なコンテンツが準備されていて、興味のあるものを選ぶことができます。

しかし、動画に早送り機能がありません。速く進めたいけど途中に重要な情報があるかもしれないから飛ばしたくはない、という場合に困ってしまいます。

ページの要素を調べる

AWS Training のページ構成はコンテンツによって異なりますが、いくつか見た感じでは、<video> 要素として動画が配置されているという点は共通しているようです。<video> 要素の interface は HTMLVideoElement で、これは HTMLMediaElement を継承しています。そして、HTMLMediaElement の playbackRate プロパティで再生速度を制御することができます。

開発ツールを開き、コンソールで下記を実行すれば、再生速度が 1.25 倍になります。

const videos = document.body.getElementsByTagName("video");
videos[0].playbackRate = 1.25;

注意点

  • 自分が確認に使ったブラウザは Firefox です。
  • コンテンツによっては、<video> 要素が複数存在する場合があります。メインの動画が一番前にある可能性が高そうですが、確認した訳ではないので断言できません。videos のインデックスを 0 から変更する必要が生じるかもしれません。
  • コンテンツによっては、動画のスピードを変えても seek bar の速度が変わりません。その結果、実際の動画と seek bar にずれが生じてしまいます。このずれの解消にはソースのスクリプトを変更する必要がありそうなので、あきらめました。

おわりに

ブラウザの開発ツールは、アプリケーションをつくるときだけでなく、日々の生活をちょっと便利にするためにも使えるんだと改めて感じました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T19:01:33+09:00

文字化けについて

日本語が文字化けしてしまう・・

charset="UTF-8"を設定しているが、日本語部分が文字化けしてしまう

qiita.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet" type="text/css" href="test.css">
 </head>
<body>
 <p>123だーっ</p>
</body>
</html>

文字化けが起こる理由

htmlファイルとブラウザとで文字コードが異なっていた。
image.png
【参考URL】ウェブサイトが文字化けしてしまう理由とその対応について

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T16:51:23+09:00

UIkit で CSS を用いらずに有色の Navbar を実装する

1. はじめに

　UIkit は，軽量なモジュール式のフロントエンドフレームワークです。その他のフロントエンドフレームワーク同様，Navbar を実装することが出来ます。しかし，公式のドキュメントに有色の Navbar に関する記述がありません。本来は，CSS を用いて色を設定しますが，本記事では CSS を用いらずに有色の Navbar を実装する方法について記述します。

2. 環境情報

　次章以降で行う作業は以下の環境下で行ったものです。

  • UIkit Ver.3.1.5
  • Google Chrome Ver.75.0.3770.100

3. 実装と実行結果

　本記事では，.uk-section-* と uk-navbar を応用して有色の Navbar を実装します。ソースコードと，その実行結果を以下に示します。

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

<head>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Navbar</title>
</head>

<body>

    <!-- Default -->
    <nav class="uk-section-default" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Muted -->
    <nav class="uk-section-muted" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Primary -->
    <nav class="uk-section-primary" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Secondary -->
    <nav class="uk-section-secondary" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- UIkit JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"></script>

</body>

</html>

　Primary と Secondary の文字の明度が低いと感じる際は，.uk-text-primary と .uk-text-secondary を用いることで文字を明るくすることが出来ます。

4. おわりに

　UIkit は，Bootstrap と比較すると知名度や採用数が低く，Twitter 社のような大企業が開発をサポートしているわけでもありません。しかし，秀逸な名前設計や豊富なコンポーネントなど，Bootstrap に引けを取らないフロントエンドフレームワークだと感じています。本記事が，少しでも UIkit に貢献できれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T16:34:20+09:00

条件分岐 if を一切使わずに Jacascript でカレンダーを作る

みなさん、カレンダーつくっていますか？

今どきは Google Calendar 埋め込んだりして済ませることも多いんでしょうけど、稀に自分で作らなければいけなくなることがありますよね？

無い方はさようなら。

で、カレンダーの作り方をいろいろ探してみたんですが、ちょっとまどろっこしいというか、条件分岐めっちゃつかっててスマートじゃないなって感じたんですよ。

ということで、ifに頼ることなくカレンダーを作ろうという試みです。

まずはコードを御覧ください

最初に結論というか、コードを載せてしまいます。

const date = new Date();

// 今月の最終日を取得する
date.setMonth(date.getMonth() + 1);
date.setDate(0);
const lastDate = date.getDate();

// 一ヶ月の日付を配列にする
const dateList = [...Array(lastDate).keys()].map(item => item + 1);

// 今月１日の曜日を取得する
date.setDate(1);
const firstDay = date.getDay();

// 月初より前の部分を作るための配列
const spacer = [...Array(firstDay)];

// カレンダーの最初から最後まであるリストを作る
calendarItems = [...spacer, ...dateList];

// カレンダーに何週分必要か計算
const weekCount = Math.ceil(calendarItems.length / 7);

// 空のカレンダーを作る
const $month = $('<div>')
const $week = $('<tr>');
for (let i = 0; i < 7; i++) {
  $week.append('<td>');
}

for (let i = 0; i < weekCount; i++) {
  $month.append($week.prop('outerHTML'), '\n');
}

// カレンダーに日付を記入
calendarItems.forEach((item, index) => {
  $month.find('td').eq(index).html(item);
})

// カレンダーTABLEに反映させる
$('#calendar-body').html($month.html());

HTMLは下記の通り。

<div id="calendar">
  <table>
    <thead>
      <tr>
        <td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td>
      </tr>
    </thead>
    <tbody id="calendar-body">

    </tbody>
  </table>
</div>

考え方

ここからはこのカレンダーに関する考え方を説明していきます。

なるべくわかりやすくするため、説明がコードの順序と異なります。ご了承ください。

カレンダーの枠が決まってるんだから

カレンダーって、枠が決まっているじゃないですか。

必ず1行あたりに7日間あって、それが並んでいるという。

ということは、日付を記載するHTML要素をリスト化して、1から最終日まで日付を入力していけばいいだけなんですよね。

そうすれば条件分岐無しで全然行けてしまいます。

ただ、問題が起こります。

はい、必ず初日が日曜日になってしまいます。

そこでどうするか。

日付リストの初日のインデックスが適切であればいいよね

ということで、初日のインデックスを適切にオフセットしてあげれば単純なループで済ませることができるんです。

でもどうやってオフセットしましょう。

そう、初日の曜日番号をとって、その数の要素を日付配列の最初に追加してあげるといいですね。

それが

const firstDay = date.getDay();
const spacer = [...Array(firstDay)];

ということです。

ここまでできたらあとはループをブンブン振り回してあげればカレンダーの完成です。

月曜日スタートにしたかったらどうすりゃいいの？

日付リストを calendarItems.shift() してあげればいいんじゃないでしょうか。

というわけで

無事、条件分岐を使わずにカレンダーを作ることができました。

これさえつくってしまえば、月の切り替えとかはさほど苦労なくできるでしょう。

もし時間があれば月の切り替えとか、曜日ごとの色付け、祝日の色付けあたりについても投稿してみようかな。

では、これで。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T15:44:30+09:00

ど素人が画像を貼れるようになる方法

はじめに

未来電子テクノロジーでインターンをさせていただいているgk-fujirinと申します。三度の飯より自転車が大好きです。
将来的には、普段のサイクリングを紹介するブログなんかを作ってみたいですね。

そのため、今回はブログに欠かせない画像を表示する方法を復習したいと思います。

全くのプログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してもらえると嬉しいです。

0.参考資料

Markdown記法 チートシート
画像にリンクをつける

1.見出しL&CSSで画像を表示させるには？

まずは画像を用意します。
IMG_7429.JPG

かっこいいですね。惚れ惚れします。

次に、HTMLのimgタグを使用します。

qiita.rb
puts '<img src=""/>'

最後にダブルクォーテーション（""）の間にさっきの画像のurlを貼ります。

qiita.rb
puts '<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434843/e9fa9abc-0f87-5684-9c05-1eb0aee51ca2.jpeg"/>'

これで完了です。
次回投稿する際は、少しでもマシな記事を書けるよう頑張ります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T14:28:31+09:00

HTML,CSSの練習で初めて作成したWEBページ作成のまとめ

　はじめに

タイトルの通り初めてWEBページを作りました。
この記事は、作成意図、作業中ハマったこと、今後の課題、をまとめた記事になります。
学習環境はProgateを利用していて、今回作成したページはProgateのHTML&CSS初級,中級,上級のレッスンで習った内容の復習です。

作成箇所（head,header,div,footerなど)ごとに所感をまとめてます。
また、Qiitaで記事を書くのも今回が初めてになりますのでこういった投稿サービスの利用方法を勉強する目的も兼ねて記事を書いています。

開発環境

使用ツール
　　　Atom 1.38.2
動作確認
　　　Google Chrome 75.0.3770.100（Official Build） （64 ビット）
OS
　　　Windows 10 pro 10.0.17134

WEBページ概要

ページレイアウトはProgate:HTML&CSS初級コースの作成目標を参考に作っていて、初級のレイアウトに中級,上級で習う内容を組み込んでみました。

作成ページURL(https://tbtyof.github.io/HTML_-_CSS_TR/)
ソースコード(https://github.com/TBTYOF/HTML_-_CSS_TR)
ProgateのURL(https://prog-8.com)

< head >

意図したこと
metaタグでviewportを読み込んでスマホやタブレットに画面サイズ合わせる準備をしてます。
（この部分の作成過程はレスポンシブデザインの項目に後述）

トライアンドエラー
Atomで作成中は”stylesheet”のhref内をフルパスで指定していましたが、GitHubにUPする際にそのままでは適応することができませんでした。
フルパスをどんどん削っていってどうやって指定したら読み込めるか試しましたが、最終的にファイル名だけでよかった事に気づきました（笑）
この指定の仕方は相対パス？っていうそうです。

パスについて参考サイト(https://techacademy.jp/magazine/5801)

課題
head内は定型文（だと思ってる）なのでコピペで済む作業ではありますが、metaタグの持つ意味まで理解してないのでなんでそうなるのか？が分からないです。
こういったモヤモヤを取り払うのも今後の課題ですね。

< head >

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TBATYOF</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="responsive.css">
  </head>

また、ページ全体に掛けるCSSもあらかじめ書いていきました。

< CSS >

li{
  list-style: none;
}

a{
  text-decoration:none;
}

*{box-sizing: border-box;}

< header >

意図したこと
習った事の再現として、
・画面上部にヘッダーを固定する
・背景のみを透明にする

また試みとして
・”学べるレッスン”、”お問い合わせ”のアンカーにページ内リンクを設定する

を意識して作りました。

< header >

<header>
     <div class="logo">TBATYOF</div>
       <a href="#">プログラミングとは</a>
       <a href="#main-page">学べるレッスン</a>
       <a href="#contact">お問い合わせ</a>
     <div class="header-icon">
　　　　<!--↓はレスポンシブデザインで触れます-->
       <i class="fa fa-bars" aria-hidden="true"></i>
     </div>
</header>

< CSS >

/*  header  */
header{
  background-color: rgba(38, 208, 201, 0.9);
  height:90px;
 width:100%;
  color:white;
  position: fixed;
  top:0;
}

header .logo{
  font-size: 36px;
  padding:20px 40px;
  float: left;
}

header a{
  color: white;
  font-size: 16px;
  float: left;
  padding:33px 20px;
}

header a:hover{
  color:blue;
}

/*  レスポンシブデザインのところで触れます  */
header .fa-bars{
  font-size: 50px;
  line-height: 90px;
  padding-right: 5%;
  float: right;
  display: none;
}

トライアンドエラー
ヘッダー部分は・・・正直に話すと三時間くらいかかりました汗

原因はこちら
yohaku.PNG
ずれる.PNG

width:100%;とか試してもなぜか余白ができたり、line-heightとかdisplayとか設定してもheaderの親要素よりはみ出てしまう現象が発生して、これを修正するのにめちゃくちゃ時間かかりました。
試行錯誤の末にProgateのレッスンでデフォルトでCSSに書き込まれていたコードを思い出しなんとか修正できました。

< 修正箇所 >のコード

html, body,ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div,input,textarea,a{
  margin: 0;
  padding: 0;
}

課題
”プログラミングとは”に別ページのリンクを張ることです。
なので別ページを制作してそこにリンクを張る予定ですが、別ページ張るだけなら誰かが作ったページのURL張るだけで終了になっちゃいますし、なにか新しい試みを思いついたら別ページ作るのでその時まで塩漬けの課題です。

< HELLO WORLD. >

意図したこと
ここは特記するべきことはないかと。
HELLO WORLD!!

トライアンドエラー
画面の左端に文字がべた付けだとかっこ悪かったので余白をつけようと思いました。
レスポンシブデザインの設定を考えていたのでページのサイズに合わせて見え方が少しでも変わればと思いpaddingはピクセル単位ではなく％で余白を作ってます。

課題
作り終えて気づきましたがfont-familyのプロパティをいじってないです。
フォントがデフォルトのままのＷＥＢサイトなんてないでしょうし、今度はフォントの種類を探してみようと思います。

< HTML >

    <div class="page-title">
      <h1>HELLO WORLD<span>.</span></h1>
      <!--idの設定は”学べるレッスン”で触れます-->
      <h2  id="main-page">プログラミングの世界へようこそ</h2>
    </div>

< CSS >

*PAGE-TITLE*/
.page-title{
  padding:100px 0 50px 0;
  padding-left: 3%;
}

.page-title h1{
  font-size: 140px;
  color:black;
}

.page-title span{
  color:orange;
}

.page-title h2{
  font-size: 40px;
  color:black;
}

< 学べるレッスン >

意図したこと
アンカーを使い”学べるレッスン”へのページ内リンクを作ること
ページのサイズが変わってもアイコンが干渉しあわないように配置すること

トライアンドエラー
当初は学べるレッスンのh3タグにidを指定していましたが、

アンカー.PNG

このようにヘッダー部分に隠れてしまってます。スケスケなのもマイナスポイント。
なのでここは一段上の”プログラミングの世界へようこそ”のh2タグにidをつけたらそれっぽくなりました。

次にこのdivの作成で最も苦労した箇所となるfloatの設定です。
clearの仕様が分からんちんで最初はfloatの真下に書いていたので全く上手くいきませんでした（笑）
この辺りを書いてるときにはもう設定してたと思いますが、

・CSS全体に向けてbox-sizingを設定
・float解除のためにclearを呼び出せる様に設定

しています。

また、displayプロパティの設定の仕方もよく理解できてなかったです。
要素に広くかかるのかなぁ～なんて思ってたら全然imgがblockにならず・・・

解決策として、
・直接imgタグにclass付けてdisplayプロパティの書き換え成功

画像の元サイズが大きかったのか最初コード書いてた時は、アイコンが上段３個の下段１個に表示が分かれてました。
怪我の功名ですがimgにclass付けたお陰で画像のサイズをCSSでいじれるのわかってwidthを80％に設定したことで当初思っていた感じで画面に表示できるようになりました。

あとアイコンに使用した画像についてはProgateのものがCoolなんで使いたかったんですが、著作権的にOKなのか分かりませんでしたのでPaintで代用してます。

参考にしたサイト
displayについて(https://saruwakakun.com/html-css/basic/display)
clearについて(https://60pablog.com/css-clear/)

課題
形になったけどなんで上手くいってるかよくわかってません。（そういうのしかない笑）
このやり方がベストなのか？無駄な記述はないのか？など判断がつくはずもなく・・・
この辺りは皆さんが作られたWEBページをみてインプットしていくしか思いつかないですねぇ。

< HTML >

  <div class="main-page">
      <div class="heading">
        <h3>学べるレッスン</h3>
      </div>
      <div class="contents">
        <img class="icon" src="HTML & CSS.jpg" >
        <p>HTML & CSS</p>
      </div>
      <div class="contents">
        <img class="icon" src="PHP.jpg" >
        <p>PHP</p>
      </div>
      <div class="contents">
        <img class="icon" src="Ruby.jpg" >
        <p>Ruby</p>
      </div>
      <div class="contents">
        <img class="icon" src="Swift.jpg" >
        <p id="contact">Swift</p>
      </div>
      <div class="clear">  </div>
    </div>

< CSS >

*main-page*/
.main-page{
  padding-left: 3%;
  padding-rigth:3%;
  margin-bottom: 100px;
}

.main-page h3{
  font-size:28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
  border-bottom: 2px solid gray;
}

.contents .icon{
  display: block;
  width:80%;
}

.main-page .contents{
  float:left;
  width: 20%;
  padding-right: 20px;
}
.contents p{
  font-size: 24px;
  text-align: left;
  padding-bottom: 50px;
}

< 全体向け >

*{box-sizing: border-box;}

.clear{
  clear: both;
}

< お問い合わせ >

意図したこと
復習のポイントとしては、

・ボタンを押せる機能実装
・SNSのリンク（見た目のみ）の実装

です。

トライアンドエラー
SNSのアイコンが　□　となっていて正しく表示できませんでした。
直接の原因箇所は、

< i class="fa fa-facebook" >と書いてましたがclassを、

fa⇒fab

に変更したらうまくいきました。
また原因について調べる中で、SNSのアイコン使うならフォントも変えたほうがいいと記載があったのでこの箇所はフォントをいじってます。

あとこのdivを作ってるときに気になっていたのですが、
余白なし.PNG

ボーダーラインが画面の端まで行ってしまっているのがきになりました。
結論から言うとbox-sizingしてるのでpaddingやmarginを設定すればいいだけだったのですが、最初は親要素のwidthを決めてその中でだけボーダーラインが表示されるようにピクセルで調整を繰り返していました。
なので各親要素ごとに幅が違っていたりしてページがガチャガチャになってしまいました。

解決策としては、

・ピクセルで指定していた親のwidthを全部消す
・余白はpaddingやmarginで調整する

でなんとか整いました。

**アイコンの参考サイト(https://saruwakakun.com/html-css/basic/font-awesome)

< HTML >

    <div class="contact">
      <div class="heading">
        <h3>お問い合わせ</h3>
      </div>
      <div class="e-mail">
        <p>メールアドレス<span>（必須）</span></p>
        <input type="text" name="e-mail" value="">
      </div>
      <div class="contact-form">
        <p>お問い合わせ内容<span>（必須）</span></p>
        <textarea name="contact-form" rows="8" cols="80"></textarea>
      </div>
      <div class="contact-btn">
        <p>※<span>必須項目</span>は必ずご入力ください</p>
        <input class="btn" type="submit" name="contact-submit" value="送信">
      </div>
      <div class="btn-wrapper">
        <a href="" class="facebook btn-sns"><i class="fab fa-facebook" ></i> Facebook</a>
        <a href="" class="twitter btn-sns"><i class="fab fa-twitter"></i>Twitter</a>
      </div>

< CSS >

*contact*/
.contact{
  margin-left: 3%;
  padding-right:3%;
}

.contact h3{
  font-size:28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
  border-bottom: 2px solid gray;
}

.contact p{
  font-size: 16px;
}
.contact span{
  color:red;
}

.contact input, .contact textarea{
  border: 1px solid #dee7ec;
  margin: 10px 0 30px 0;
  padding: 20px;
  width: 400px;
}

.contact .btn{
  border-radius: 4px;
  background-color: #dee7ec;
  color: #889eab;
  box-shadow: 0 7px #889eab;
  margin-bottom:90px;
  cursor: pointer;
}
.contact .btn:active{
  position: relative;
  top: 7px;
  box-shadow: none;
}

.btn-wrapper{
  margin-bottom: 50px;
}

.btn-wrapper .btn-sns{
  font-family: "Font Awesome 5 Brands";
  color:white;
  font-size: 20px;
  padding: 5px 40px;
  border-radius: 4px;
}

.btn-wrapper .facebook{
  background-color: rgba(59, 89, 152,0.7);
  margin-right: 20px;
}
.twitter{
  background-color: rgba(85, 172, 238,0.7);
}

.btn-wrapper .fab{
  padding-right: 10px;
}

.btn-wrapper .facebook:hover{
  background-color: rgba(59, 89, 152,1)
}

.btn-wrapper .twitter:hover{
  background-color: rgba(85, 172, 238,1);
}

課題
HELLOW　WORLDでも触れましたが余白は％で付けてます。
作業していくうちにピクセルが悪、みたいになって使うの忌避しちゃってましたが冷静になるとピクセルで指定しても作れるんじゃね？って思ってます。
今回理解が浅くてうまく配置できませんでしたが、余白の付け方はどうやんだ！って試行錯誤に時間を使いましたが、次回以降はそこをスキップして単純に見た目はこっちのがいいかな？ってレイアウトに時間使えるようしてきます。

あとは単純に実装したい機能として、

・本物のSNSのリンク、送信ボタンの実装

ですね、見た目だけじゃなくてサイトとしての機能をつけれるようにステップアップしたいです。

< footer >

意図したこと
background-colorを画面端まで表示

トライアンドエラー
フッター部分は余白の付け方で悩んでるときに同時に作っていたのですが、画面端までいかなかったり、他のdivは幅がそろったのにフッターだけ逆に飛び出たりして、一番邪魔して上手く作れなかった真犯人です（笑）

解決策は親要素のwidthを削除した件を上述してるので割愛します。

課題
Progateのレッスンだとレスポンシブデザインを使ったページは”text-align”を使ったり”margin auto”を使って要素を中央に配置させてます。

今回ここの部分をまるまる省いて制作したのでスマホサイズの時はフッターの配置を変える、みたいなことに挑戦できてません。

要素の中央寄せと合わせて次回の課題ですね。

< HTML >

    <footer>
      <div class="container">
        <div class="footer-logo">
          <h2>TBATYOF</h2>
        </div>
        <div class="footer-list">
          <a href="#">会社概要</a>
          <a href="#">採用</a>
          <a href="#contact">お問い合わせ</a>
        </div>
      </div>
      <div class="clear"></div>
    </footer>

< CSS >

/*footer*/
footer{
  background-color: #2f5167;
  height:160px;
  color: white;
  padding: 25px;
}

footer .container{
  width: 100%;
}

.footer-logo{
  float: left;
}

.footer-logo h3{
  font-size: 32px;
}

.footer-list{
  float: right;
}

.footer-list a{
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  display: block;
}

.footer-list a:hover{
  color:blue;
}

< レスポンシブデザイン >

意図したこと
Progateの上級レッスンの再現として、アイコンの配置のされ方を

・ＰＣ⇒横一列
・タブレット⇒上下二個ずつ
・スマホ⇒縦一列

にする。
（max-widthの値は上級レッスンを参考に指定）

また、正しく反映されているか動作確認をし易くするためにHELLOW WOLDのcolorを画面の横幅で変わるようにしてあります。

width (px) 　 color　
1001 ～ black
671 ～ 1000 blue
　 　 ～ 670 red

あとはヘッダー部分でnomeにしていたアイコンをスマホ画面で表示される様に設定してます。

トライアンドエラー
自分のスマホで縦向き、横向きしたときは問題ありませんでしたが、PCブラウザで画面を徐々に狭めていくとヘッダー部分のメニューが枠を飛び出してしまってました。

メニューが枠内に横一列表示になるための解決策として、

・font-sizeを小さくする
・paddingで余白を狭める

で調節しました。

課題
今回はmax-widthの値をもろパクリしましたが、どのサイズで区切るのがいいか自分で判断できてません。値を変えたら表示され方がどう変化するのか？詰める余地が残ってます。

@ media の後ろに付く　”all”　や ”and”　の使い方がいまいちピンときてない、というよりそのまま書き写したのでそれ以外のscreenにしたらどう変わるのか？を試してないって感じですね。
意味としては all だと@ mediaの条件満たしたらすべてに適応します～ってところだと思いますが、今回は深く突っ込まなかったところになります。

あと、アイコンもちゃんとした機能つけたいですね(笑)

< CSS >

/*タブレット向け*/
@media all and  (max-width:1000px) {

  header .logo{
    padding:20px 20px 20px 40px;
  }

  header a{
    padding:33px 10px;
  }

  .main-page .contents{
      width: 44%;}

.page-title h1{
  color:blue;
}

}


/*スマホ向け*/
@media all and  (max-width:670px) {
  .page-title h1{
    font-size: 80px;
    color:red;
  }
  .page-title h2{
    font-size: 20px;
  }
  .main-page h3, .contact h3{
    font-size: 23px;
  }

  .contact input, .contact textarea, .btn-wrapper .btn-sns{
    width: 97%;
  }
  .btn-wrapper .btn-sns{
    display: block;
  }
  .btn-wrapper .facebook{
    margin-right: 0;
    margin-bottom: 10px;
  }

header a{
  display: none;
}
header .fa-bars{
    display: block;
  }

  .main-page .contents{
    width: 97%;
  }

}

終わりに

今回作ったWEBページは1日で出来ましたが、かかった時間は途中休憩をはさんで12時間近いです(笑)
マジで時間掛かった・・・最大の課題はそこですね。

HTML&CSSの復習ということで作成を決めましたが、たったの一度作っただけでマスターしました！とはなりませんし、今後PHPやJavaScriptを学習して実装する機能の幅を増やすなのども検討できますが、今作れる最低限のものはできたかなぁと満足してます。

とりあえず、完成した！と呼べるものが作れた喜びと疲労感を味わいながらつらつらとまとめさせていただきました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-22T13:53:53+09:00

flocssを簡単にまとめる。

会社でatomicデザインを採用しflocssを使うようになった際に、命名規則めちゃくちゃ戸惑ったので、教わった部分をメモとしてまとめます。

登場人物

  • component
  • layout
  • element
  • block
  • modifire

先に実例

header.html
<html>
  <header class="l-header"> // layout
    <div class="l-header-inner"> // element
      <img src="#" alt="logo" class="l-header-innner__logo"> // block
      <button class="l-header-inner__button"> // block
        <p>ボタン</p>
      </button> 
    </div>
  </header>
</html>
header.scss
.l-header {
  position: fixed;
  top: 0;
  height: 70px;
  width: 100%;
  content-align: center;

  &-innner {
  width: 70%;
  margin: 0 auto;
  content-justify: space-between;

  &__logo {
    width: 50px;
    height: 50px;
  }

  &__button {
    background-color: blue;
    width: 100px;

    &--small {
       width: 70px;
    }
  }
}

class名の付け方

component, layout

component(button, textareaとか), layout(Header, Footerとか)などは、
c-, l-などを最初につける。
c-button, l-headerみたいな感じ。

elementについて

element(block以外の子要素)は、ハイフン(-)で繋ぐ。
l-header-innerみたいな感じ

block

block(機能として成り立つ最小単位のDOM)は、アンスコ2つ(__)で繋ぐ。
l-header-inner__buttonみたいな感じ

modifire

modifire
(何か元があって、これをつけるとスタイルが変わるもの。errorとかsmallとかprimaryとか)は、
ハイフン2つ(--)で繋げる。
l-header-innner__button--smallみたいな感じ。

おしまい

公式ドキュメントって固くて難しいけどそれが全てなんですよね...。頑張ろう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧