20200803のHTMLに関する記事は7件です。

【初心者でもわかる】一部だけ角丸をつける方法(border-radius)

どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。

左上だけ

border-radius: 10px 0 0 0 / 10px 0 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;

右上だけ

border-radius: 0 10px 0 0 / 0 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;

右下だけ

border-radius: 0 0 10px 0 / 0 0 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-right-radius: 10px;

左下だけ

border-radius: 0 0 0 10px / 0 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;

上だけ(左上と右上)

border-radius: 10px 10px 0 0 / 10px 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;

右だけ(右上と右下)

border-radius: 0 10px 10px 0 / 0 10px 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

下だけ(右下と左下)

border-radius: 0 0 10px 10px / 0 0 10px 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

左だけ(左上と左下)

border-radius: 10px 0 0 10px / 10px 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

円(正方形なら正円になる)

border-radius: 50%;

ベンダープレフィックスについて

2020年現在では、各種ブラウザに対応させるためのベンダープレフィックスですが、border-radiusには必要ないとされているようです!

参考(https://qiita.com/amamamaou/items/42197e443134478befaf)

まとめ

覚え方は、左上から時計回りで覚えます。

左上→右上→右下→左下

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

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

よく見る『中央寄せ横並びレイアウト』を3パターンのCSS Flexboxで実装してみる

CSS FlexboxとはCSS 3から導入されたレイアウトモジュールです。正式名称は『CSS Flexible Box Laout』です。

Flexboxを活用することでボックスレイアウトが簡単に実装できます。
特に横並びの配置に関しては従来のfloatよりもFlexboxのほうが簡単に実装できるので、横並びの配置ではFlexboxを積極的に活用していくとよいでしょう。

そこで今回はFlexboxを利用して横並びのレイアウトを実装する方法について紹介します。

具体的には、横並びの配置のなかでもよく目にする『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトを実装します。

  • 今回のゴール
    • Flexboxの概要について理解する
    • 中央寄せ横並びレイアウトをFlexboxで実装する方法を理解する
    • center、space-around、space-betweenの違いについて理解する

Flexboxの利用方法

display: flexをブロック要素に適用することで要素内をFlexboxとして扱えます。
Flexboxに作成されたブロック要素はFlexboxの設定値によって配置位置が決定されます。

Flexboxはjustify-contentという主軸とalign-itemsという交差軸の2つの軸によって構成されています。

初期設定ではjustify-contentは水平方向の、align-itemsは垂直方向の配置位置を制御するプロパティとなっています。

Flexboxで横並びにアイテムを配置する方法

『アイテムを横に並べる』は水平方向に関する配置なのでjustify-contentを利用します。

justify-contentプロパティには様々な設定値が用意されています。

justify-contentの設定値の中でも今回実装する『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトでは以下の3つがよく利用されます。

  • 中央横並びのレイアウトでよく利用される設定値
    • center
    • space-around
    • space-between

『200pxのアイテムを20px間隔で配置する』というレイアウトをそれぞれの設定値を利用して実装したサンプルを用意しました。

上からcenterspecec-arpundspace-betweenです。
利用している設定値は異なりますがアイテムの配置位置はどれも同じであることがわかります。

See the Pen fixed-centered-patterns by Toshiharu Nishina (@nishina555) on CodePen.

以下では設定値ごとの実装方法について紹介します。

『justify-content: center』の場合

justify-content: centerを利用するとアイテムがFlexboxの中央に寄ります。
中央に寄ったアイテム間にはスペースが存在しないため、間隔をあけてアイテムを配置する場合は別途marginを指定します。

以下にjustify-content: centerを利用したサンプルを用意しました。

Flexbox自身を画面の中央に配置するためdisply: flexだけでなくmargin: 0 autoも適用させています。( 参考: 【CSS】text-align・marginの中央ぞろえチェックポイントまとめ

See the Pen fixed-with-center by Toshiharu Nishina (@nishina555) on CodePen.

このように、justify-content: centerの場合はアイテム幅とアイテム同士の間隔さえ決めれば簡単に中央寄せを実装できます。

『justify-content: space-around』の場合

justify-content: space-aroundを利用するとFlexboxに均等にアイテムが配置されます。
このとき、Flexboxの両端にも『アイテム同士の間隔』の半分の幅の余白が用意されます。

つまりjustify-content: space-aroundでは、widthmarginの定義されたアイテムを配置するレイアウトが実装できます。

以下にjustify-content: space-aroundを利用したサンプルを用意しました。

See the Pen fixed-with-space-around by Toshiharu Nishina (@nishina555) on CodePen.

justify-content: space-aroundの場合アイテム同士の間隔は、アイテム幅として利用されてないFlexboxの余白から自動で計算されます。

ですのでjustify-content: space-aroundを利用して中央寄せにする場合、アイテム幅とアイテム同士の間隔が決まっているのであればFlexboxのwidthは逆算して設定する必要があります。

例えば今回の場合ですと、アイテム幅200px・アイテム同士の間隔20pxのレイアウトを作成したかったためFlexboxのwidthは逆算して660pxとしています。

『justify-content: space-between』の場合

justify-content: space-betweenを利用するとFlexboxに均等にアイテムが配置されます。
justify-content: space-aroundとは違い、Flexboxの両端に余白はできません。

以下にjustify-content: space-betweenを利用したサンプルを用意しました。

See the Pen fixed-with-space-between by Toshiharu Nishina (@nishina555) on CodePen.

justify-content: space-betweenjustify-content: space-around同様、アイテム同士の間隔はFlexboxの余りから自動で計算されるので逆算してFlexboxのwidthを用意する必要があります。

まとめ

以上でFlexboxを利用した横並びレイアウトの実装方法の紹介を終わります。

  • 今回のまとめ
    • display: flexを適用したブロック要素内がFlexboxとなる
    • Flexboxのレイアウトは主軸(justify-content)と交差軸(align-items)の2つによって構成されている
    • Flexboxによる横に並びのレイアウトは水平方向(初期設定における主軸)の設定を利用する
    • centerで中央寄せをする際はアイテム同士の間隔を設計する必要がある
    • space-betweenspace-aroundで中央寄せをする際はFlexboxのwidthを設計する必要がある

なお今回紹介した横並びのレイアウトはFlexboxが固定長です。
画面幅に応じてFlexboxを変更することでレスポンシブなレイアウトになります。

レスポンシブな横並びのレイアウトをFlexboxで実装する方法については横並びレイアウトをCSS Flexboxでレスポンシブ対応する方法で紹介していますのでこちらをご覧になってください。

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!

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

OS標準のテキスト エディタを使ったHTMLの編集方法

拡張子とは?

ファイルには様々な種類があります。その種類を区分しているのものと捉えてください。
ファイルの種類は写真や音楽や書類のカテゴリがありさらに写真は jpg、png。音楽にはmp3、wav。書類にはtextやdoc等に枝分かれします。

そのようにファイルと用途が紐付いてる事もあり、ファイルをクリックすると対応したアプリケーションで開くことができるようになっています。

この動画で解説するホームページを作成するHTMLは拡張子もhtmlになります
HTMLの詳しい解説は別の資料で行うので、割愛させていだだきます。
拡張子は慣習で多くは小文字で表記します。

またコンピュータの世界では漢字やひらがな、カタカナなど通常の日本語の文字を表現する全角文字列とアルファベット等を表現する半角があります。
ファイル名はどちらでも問題ありませんが拡張子は半角のアルファベットで書くようにして下さい。

また、プログラミングにおいては基本的に半角アルファベットでフォルダ名、ファイル名を使うのが慣習になっております。
ホームページ内の文字列の表現等を除いて全角文字列はエラーの原因になるので注意してください。

テキスト エディタとは

文字列を編集するアプリケーションです。Windowsでは「メモ帳」Macintoshではテキストエディットになります。

IDEとは

ソースコードを記述したり、そこからプログラムを起動させたりする機能が含まれたプログラミングの専用のエディタです。
正式名称はIntegrated Development Environmentで日本語では統合開発環境になります。

IDEを利用する場合はWinでもMacでも無料で利用できるMicrosoftが開発したVisual Studio Codeを推薦してますが、別途解説を用意予定です。

ショートカットとは

文字列のコピーや貼り付け、上書き保存等の定番の作業をマウスのクリック処理では無く、キーボードの特定のキーの組み合わせで実現させる仕組みです。

代表的ショートカット

Winの場合はコントロール、Macの場合はコマンドをキーボードの左下のキーと組み合わせた下記です

  • コントロール(コマンド) + c
    • コピー
  • コントロール(コマンド) + v
    • 貼り付け
  • コントロール(コマンド) + x
    • 切り取り
  • コントロール(コマンド) + z
    • やり直し
  • コントロール(コマンド) + s
    • 保存

覚えるコツはキーボードの左下に主に使う「cvxz」が横並びになってる事を意識する事です

コピーは「copy」の頭文字のc
その右隣のvで貼り付け
切り取りはハサミのx
やり直しはアルファベット最後のz

と覚えましょう

今回動作確認に使うソース

ファイル名:index.html

「index」は見出しという意味ですが、プログラムでは頻出する用語です。
この場合はトップページという意味合いで使われます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>
  <body>
    初めてHTMLでホームページ作ったよ

    <h1>初めてHTMLでホームページ作ったよ</h1>
    <h2>段落分けで文書構造を表現してくよ</h2>
    <h3>リストを作るよ</h3>
    <h4>画像も表示するよ</h4>
    <h5>HTMLらしく、ハイパーリンクも設定するよ</h5>
  </body>
</html>

作業中

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

ul・olタグ

ulをよく見かけますが、olがある日出てきてなんだこれとなったので調べました。
ざっくりいうとこんな感じです。

ol:順番を持つリスト(ordered list)
ul:順番を持たないリスト(unordered list)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTMLの勉強</title>
    </head>
    <body>
        <h1>To Do</h1>
        <ul>
            <li>本を読む</li>
            <li>不動産に連絡する</li>
            <li>買い物に行く</li>
            <li>郵便局へ行く</li>
        </ul>
        <h1>優先順位</h1>
        <ol>
            <li>本を読む</li>
            <li>不動産に連絡する</li>
            <li>買い物に行く</li>
            <li>郵便局へ行く</li>
        </ol>
    </body>
</html>



To Do

  • 本を読む

  • 不動産に連絡する

  • 買い物に行く

  • 郵便局へ行く


優先順位

  1. 本を読む

  2. 不動産に連絡する

  3. 買い物に行く

  4. 郵便局へ行く



順番をつけるかどうかの違いだと思います。
これに加えdlというのもあるようですが、時間があるときに詳しく調べようかと思います。

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

Materializeをflexbox化してcolの高さを適応的に揃える

ポイント

  • floatで作るグリッドは横並び部品のcolの高さを揃えることができない。揃えようとしたらheightに固定値を入れるしかない
  • materialize.cssなどfloatベースで作られているグリッド実装があるので注意。ただし、適当なcssを足してflexboxベースで動かすようにすることは可能

floatでグリッドを作った場合の動き

float: leftな要素は一行に入りきらないときに「上から下に入れる場所を探索していって、入れる行が見つかったら左に(止まるまで)スライドして行って、結果全域が入ればそこに表示」という仕組みのようす。なので一行目に並んでる要素たちの高さが一定でないと変なところに配置される。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container blue" style="width: 600px;">
    <div class="row orange" style="margin-bottom: 0;">
        <div class="col s6">
            <div class="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                2.一行目のcolの高さが不一致だと
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                3.これが変な位置に入ってしまう
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                4.ああああああ
            </div>
        </div>
    </div>
</div>

スクリーンショット 2020-10-02 9.13.04.png

flexboxでグリッドを作った場合の動き

flexboxは横並びのcolの高さ (の関係性) を明示的に指定できるようになっている。ちなみに2020年7月現在、flexboxを使っていてもそれ自体が致命的な表示崩れになることはあんまりなさそう。

  • align-items: stretch (デフォルト: 高い方に合わせて低い部品も引き伸ばす)
  • align-items: center (中央に寄せる)
  • その他詳しくは公式を参照

flexboxはほかにも、部品を並べる方向、幅が足りないとき折り返すかどうか、各部品の伸縮する割合、配置する順番、などなどいろいろ調整できる。メディアクエリを組み合わせるとモバイルときは1,2,3 ラップトップ幅では1,3,2みたいな順番で表示・折り返しなどできる。

materialize.cssをflexbox化する

float関係のcssを打ち消して、flexbox関連のcssを足すと、materialize.cssを使ったままflexboxベースでレイアウトできるようになる。その指定のためのcss classの名前をとりあえずm-flexとかにすると、こんな感じ。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style type="text/css">
.row.m-flex{
    float: none;
    display: flex;
    flex-flow: row wrap;
}
.row.m-flex.m-flex .col{ /* 優先度を上げるために2回指定 */
    float: none;
}
.row.m-flex.m-flex .col:not([class*="offset-"]){
    margin-left: unset; /* 元々ついているmargin-left: autoを解除 */
}
</style>
<div class="container blue" style="width: 600px;">
    <div class="row m-flex orange">
        <div class="col s6">
            <div class="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                2.一行目のcolの高さが異なっていても
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                3.これは次の段に必ず入る
            </div>
        </div>
        <div class="col s4 offset-s1">
            <div class="card yellow">
                4.offsetとかもそのまま使える
            </div>
        </div>
    </div>
</div>

スクリーンショット 2020-10-02 9.12.16.png

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

<a>, <button>, <input type=button>どれを使うか。

リンクを付与するときには、aタグ、buttonタグ、inputタグのどれでいくか。

結論

初心者の僕が悩みながら、どれを使うかを調べた結果、

  • 一般的には、aタグでボタンタイプをつける。

  • formタグでつかいたいなどの特殊なときは、button を使うこととする。

buttonタグを使う場合は、
リンク先は、onclick=”location.href=’aa.html'”と記述する。aタグよりもちょっと長くなる。

参考文献

https://www.ameamelog.com/html-a-button/

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

【超簡単】iframeを使ってYouTubeを埋め込んだ場合に簡単にレイアウトを整える方法

こんにちは、Yuiです。

今回はiframeを使ってYouTube動画を埋め込んだ際にものすごく簡単にレイアウトを整える方法をお伝えします。(私はVueで書いてますが、要はCSSを工夫するだけなので、HTML/CSSを使ってwebページを作成しているときにも使えます。)

先日Vue.jsでVuetifyを使ってページを作成してたら変に上部のスペースが空いて困った件という記事を書いたのですが、その最後の完成形として上げていたこちらの写真、確かにpaddingは消えていますが、「え、Youtube画像細長すぎない???バランス悪すぎない???」ということで、今回はレイアウトを整えることにしました。
スクリーンショット 2020-08-01 3.29.28.png

まずはYouTubeをiframeで埋め込みます

まずは埋め込みたいYouTube動画のページにいきます。

スクリーンショット 2020-08-03 7.59.00.png
共有をクリック

スクリーンショット 2020-08-03 7.59.19.png
埋め込むを押します

スクリーンショット 2020-08-03 8.00.03.png
そうすると上記のような埋め込みコードが出てくるので、それをそのままコピー&ペースト。

簡単にこのiframeのコードを説明すると、width="560"、height="315"という部分がその名の通り幅と高さを表しています。
ただ、注意が必要なのがこれはpxではなく、縦横の比率を表しているので基本的に変更してはいけません。

今回私が失敗した原因としてはこのiframeをブロックで囲んで、それをそれぞれグリッドシステムを利用してレイアウトを整えてから、その中いっぱいにこの動画が広がれば良いなと思って、width="100%"、height="100%"としたら、上記の写真のように横に細長いブサイクなレイアウトが出来上がってしまいました・・・。

iframeを一つのボックスで囲んでクラス名をつけてrelativeからの中身をabsoluteに

じゃあどうやるのかというと、iframeをまずはボックスで囲みます。私はVueで書いていたので、v-containerで囲みました。そしてそれを親クラスとしてrelativeを指定してからその中(つまりiframe部分)をabsoluteで移動させます。

実際のコードを見てみましょう。

YouTube1.vue
<template>
    <v-container class="responsive-style">
        <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        ></iframe>
    </v-container>
</template>

<style lang="scss" scoped>
.responsive-style{
    position:relative;
    width:100%;
    height:0;
    padding-top:50%;
}
.responsive-style iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
</style>

まず親要素でボックスの幅を最大にします。
注意が必要なのが、ここでは高さは0にするということです。
そのかわり、paddingを入れてあげます。
このpaddingに高さにしたい数値を入れます。
ここでポイントはpxで指定するのではなく、%で指定するということです。
そうすることで、PCからでもスマホからでも同じ割合で表示することができます。(後述しますが、PCでは2カラム、スマホでは1カラムとしたい場合は、グリッドシステムを利用して表示します。)

そして、その親要素のpaddingが中身(iframe)の入る部分になるので、余分な隙間をゼロにして(top:0;、left:0;の部分)縦横いっぱいに広げます。

これで簡単にレイアウトが整うのでぜひお試しください!

おまけ

上記の方法だと、デバイスごとでカラム数を分けることはできません。
というわけで、PCでは2カラム、スマホでは1カラムとしたい場合は、更に上記の親要素を大きな枠でくくって、グリッドシステムで表現します。

※今回、諸事情で左と右のYouTube部分をそれぞれ別のコンポーネントとしています。下記の感じ。

Home.vue
<template>
  <v-app>
    <v-container class="container-style">
      <v-row class="youtube-class">
        <v-col cols=12 sm=12 md=6>
          <YouTube1/>
        </v-col>
        <v-col cols=12 sm=12 md=6>
          <YouTube2/>
        </v-col>
      </v-row>
      <!--省略-->
    </v-container>
  </v-app>
</template>

こうすることで、無事PC画面では2カラムで、スマホでは1カラムでYouTubeを埋め込むことができました!

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