20210105のHTMLに関する記事は9件です。

投稿日：2021-01-05T20:49:40+09:00

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(2)

「基本的なAngularアプリをはじめる」をやってみる(2)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(準備)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(1)

Angular のチュートリアルをやってみています。

商品リストを作成する

Angular公式ページ：商品リストを作成する

今日から本格的にチュートリアルを進めていきます。と言っても指示通りにコピー＆ペーストしていくだけなのですが。

1.product-listフォルダ内の product-list.component.html に以下のタグを記述します。
product-list.component.html
<div *ngFor="let product of products">
</div>
2.divタグの中に下記のh3タグを記述します。
product-list.component.html
<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>
この時点でプリビュー画面は、以下のようになります。

*ngForはfor文のようですね。

3.{{ product.name }} を下記の a タグで囲みます。
product-list.component.html
<a [title]="product.name + ' details'">
  {{ product.name }}
</a>
製品名にオンマウスすると、文言が表示されるようになります。
チュートリアルを読んでいますと、この [] の使い方をプロパティバインディングと呼んでいるようです。

4.下記の p タグを追加します。
product-list.component.html
<p *ngIf="product.description">
  詳細: {{ product.description }}
</p>
product.description が表示されるようになります。
*ngIfはif文のようです。

ところで、product.description とは何でしょうか？
ファイルを見ていくと、products.ts に記述されている内容のようです。
ちなみに、以下の内容になっています。
products.ts
export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];
5.ボタンを追加します。

product-list.component.html に以下のタグを追加します。
product-list.component.html
<button (click)="share()">
  shareボタン
</button>
ボタンが表示されるようになります。（今のところクリックしてもメッセージが表示されるだけでshareされるわけではありませんが。）
(click) のような使い方をイベントバインディングと呼んでいるようです。

次の記事： [Angular] 「基本的なAngularアプリをはじめる」をやってみる(3)子コンポーネントにデータを渡す

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T20:23:41+09:00

【初心者でもわかる】親子関係を持つメニューの作り方

メニューの中でも、①②③と続く中で、①-1、①-2と子供を持つメニューを作る場面があると思います。
WEBサイトを利用するユーザーに伝わりやすいような親子関係が分かりやすいメニューを作ります。

ソース
index.html
<ul class="menu">
  <li>
    <a href="#">①あの段</a>
    <ul class="child">
      <li><a href="#">①-1 あ</a></li>
      <li><a href="#">①-2 い</a></li>
      <li><a href="#">①-3 う</a></li>
      <li><a href="#">①-4 え</a></li>
      <li><a href="#">①-5 お</a></li>
    </ul>
  </li>
  <li>
    <a href="#">②かの段</a>
    <ul class="child">
      <li><a href="#">②-1 か</a></li>
      <li><a href="#">②-2 き</a></li>
      <li><a href="#">②-3 く</a></li>
      <li><a href="#">②-4 け</a></li>
      <li><a href="#">②-5 こ</a></li>
    </ul>
  </li>
</ul>
style.css
.menu {
  width: 150px;                /* 適当なサイズを指定 */
  border: 1px solid #666;      /* 枠線を作成 */
}

.menu li a {
  width: 100%;                 /* 幅を100%に指定 */
  border-top: 1px solid #666;  /* 上に線を引く */
  padding: 10px 20px;          /* 余白を指定 */
  display: inline-block;       /* 幅指定・余白を付けるために必要 */
  box-sizing: border-box;      /* 計算を簡単にするために必要 */
}

.menu > li:first-child > a {
  border-top: none;            /* 最初は上の線を無くす */
}

.menu li a:hover{
  background: #CCF;            /* カーソルを乗せた時の見た目 */
}

.menu li .child li a {
  padding-left: 40px;          /* 左の余白を大きめに上書き */
}
解説

まずは親子関係を持たせるためにhtmlのソース側で親子関係を作ります。
ulのliの中に、またulとliの組み合わせを用意して親子関係を持たせます。
CSSを当てやすいように親のulには「.menu」、子のulには「.child」のクラスを付けています。

基本的にはliのデザインテイストを合わせるために.menu li aにたいして主要なCSSを作っていきます。

その後、.menu li .child以下にたいしてのみ効かせるようなCSSを書くことで、差別化を測ります。
今回の例ではシンプルに少し右寄せにしてみました。
ほかにもこのようなデザインも作る事が可能です。
style.css
/* .childのCSSを少し変更 */
.menu li .child li a {
  width: calc(100% - 30px);
  margin-left: 30px;
  padding-left: 10px;
  border-top: 1px solid #CCC;
}
まとめ

ヘッダーのハンバーガーメニューをクリックしたら、今回作成したメニューが出てくるように作成したり、
目次ボタンを押したらアコーディオンでメニューが出てくるなど使い方は様々あるかなと思います。

コーディング始めたての頃はタグの要素が2重になったりするとややこしくて上手くCSSがかけない事もありますが、
落ち着いて綺麗に作れば改良も修正も簡単になるので、様々なサイトを参考にしながら模写コーディングするなどでスキルを上げていくのがいいのかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T11:40:12+09:00

input type="file"のaccept属性がかなり使える

久しぶりの投稿になってしまいました。。

<input type="file">にaccept属性というのが存在するらしい。
拡張子またはMIMEを設定して、選択できるファイルの形式を制限することができるとのこと。

HTMLのドキュメント

使用例

pdfファイルのみ
<input type="file" accept=".pdf">
psdファイルまたはaiファイルのみ
<input type="file" accept=".psd,.ai">
こんな感じで複数指定ができます

画像ファイルのみ
<input type="file" accept="image/*">
僕は今のところほぼこれしか使ってない

動画ファイルのみ
<input type="file" accept="video/*">
音声ファイルのみ
<input type="file" accept="audio/*">
結果
<input type="file" accept="image/*">
この場合、

こんな感じで画像ファイル以外はグレーアウトされました。

twitter

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T11:17:37+09:00

３秒で画像をトリミングできます

今回は画像サイズがバラバラな状態から、たった一行CSSを付け加えるだけで画像をトリミングできる方法をお伝えします。
結論から言ってしまうと今回使用するプロパティーは「object-fit」になります。
おそらく聞いたことある人も多いかもしれません。
具体的な使用法ですが、本当に簡単です。
通常であれば
img {
width:100px;
height:100px;
}
としますよね。そうすると画像が縦や横に伸びて変な感じになりますが、先程紹介したプロパティーを追加してみてください。
img {
width:100px;
height:100px;
object-fit:cover;
}
これだけです！本当に簡単ですよね！
ただ、、、
自分が配置したい箇所が必ずしも中央にあるとは限りませんよね？
中央以外でトリミングしたい場合だってあります。
安心してください。こちらも簡単です。
今度は「object-position」プロパティーを設定しましょう。
object-position :縦の位置　横の位置;
このようにすれば簡単にお好みの部分にフォーカスしてトリミングすることができます。

今回は簡単にトリミングする方法を紹介しました。
今までpositionを使ってきた方からすれば早く紹介してよと言われそうな気がします...

では!

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T09:42:50+09:00

Excelの表をクリップボードにコピーしたときのHTMLの内容を調べてみた

まえがき

Excelの表を取り込んで、AsciiDocフォーマットに変換（※）しようと思い、とっかかりとして、Excelの表をクリップボードにコピーして得られるHTMLのフォーマットを調べてみた。

※：できた
ExcelとかWordでクリップボードにコピーしたデータからAsciiDocの表に変換するツールをつくってみた（結合セル対応） - Qiita

1. 実際の例

1.1. コピーした部分

1.2. 自作ツールでHTMLに変換した結果
Version:1.0
StartHTML:0000000105
EndHTML:0000002603
StartFragment:0000002174
EndFragment:0000002551

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file:///C:/Users/XXXXX/AppData/Local/Temp/msohtmlclip1/01/clip.htm">
<link rel=File-List
href="file:///C:/Users/XXXXX/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">
<style>

</style>
</head>

<body link="#0563C1" vlink="#954F72">

<table border=0 cellpadding=0 cellspacing=0 width=138 style='border-collapse:
 collapse;width:104pt'>

 <col width=69 span=2 style='width:52pt'>
 <tr height=49 style='mso-height-source:userset;height:36.5pt'>
  <td rowspan=2 height=98 class=xl65 width=69 style='height:73.0pt;width:52pt'>a</td>
  <td width=69 style='width:52pt'>b</td>
 </tr>
 <tr height=49 style='mso-height-source:userset;height:36.5pt'>
  <td height=49 class=xl66 style='height:36.5pt'>c</td>
 </tr>

</table>

</body>

</html>
2.1. ヘッダ情報

2.1.1. StartHTML と EndHTML

参考サイト1(Microsoft)より：

StartHTML: bytecount from the beginning of the clipboard to the start of the context, or -1 if no context.
EndHTML: bytecount from the beginning of the clipboard to the end of the context, or -1 if no context.
抜粋
StartHTML:0000000105
EndHTML:0000002603
105byteと2603byteは下記の位置にあたる。

ちなみに Versionの説明は下記。クリップボード自体のバージョン？

Version: vv version number of the clipboard. Starting version is 0.9.

2.1.2. StartFragment と EndFragment

StartFragment: bytecount from the beginning of the clipboard to the start of the fragment.
EndFragment: bytecount from the beginning of the clipboard to the end of the fragment.
(中略)
The fragment should be preceded and followed by the HTML comments and (no space allowed between the !-- and the text) to conveniently indicate where the fragment starts and ends. Thus the start and end of the fragment are indicated by the presence of these comments and by StartFragment and EndFragment byte counts in the description.

下記のように、byte位置StartFragment～EndFragmentのデータ領域には、コメント部分は含まれないよう。
抜粋
StartFragment:0000002174
EndFragment:0000002551
2.2. 文字コード

UTF-8固定のよう。

The only character set supported by the clipboard is Unicode in its UTF-8 encoding.

3. 表の中身

書式情報を拾いたいが、Fragment内で完結しない。。
抜粋
<table border=0 cellpadding=0 cellspacing=0 width=138 style='border-collapse:
 collapse;width:104pt'>

 <col width=69 span=2 style='width:52pt'>
 <tr height=49 style='mso-height-source:userset;height:36.5pt'>
  <td rowspan=2 height=98 class=xl65 width=69 style='height:73.0pt;width:52pt'>a</td>
  <td width=69 style='width:52pt'>b</td>
 </tr>
 <tr height=49 style='mso-height-source:userset;height:36.5pt'>
  <td height=49 class=xl66 style='height:36.5pt'>c</td>
 </tr>

</table>
<table>タグがFragmentの外にあり、罫線情報を拾うのが面倒くさい。

アライメント情報（右揃えとか）が、スタイルシートで指定されており、同じくFragmentの外にあり、拾うのが面倒くさい。（<td height=49 class=xl66 style='height:36.5pt'>c</td>の部分）

セル結合情報は rowspan=2 とかが含まれているので、想定通り。

ちなみにWordで（表をつくって）試したところ、（Excelとは異なり、）Fragmentのなかに<table>タグがありました。

4. 所感（？）

所感というか、ひとりごとです。

面倒くさそう。
COMでExcel操作するのとどっちが楽か、応用が利くか、ツールとして使いやすいか。。あとはExcelのバージョンが上がったときにどっちが影響を受けにくいか。。
考えても解がなさそうなのでまずは今回調べた内容でやってみるかな。

参考サイト

HTML Clipboard Format - Win32 apps | Microsoft Docs

HTMLクリップボードのデータフォーマット(VC++)

Microsoft TeamsのチャットログのテキストをクリップボードにコピーしてHTML Format形式の文字列として読み取ろうとしたら文字化けした件 - Qiita

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T01:19:04+09:00

Flexプロパティが分からない！

皆なさん「Flexプロパティ」はご存知でしょうか？
私自身flex:1 1 auto;というコードをみて
「何それ？美味しいの？」と思い調べて理解したので共有させていただきます。
まず、このflex:1 1 auto;こちらは
flex-grow、lex-shrink、flex-basisの３つを一気に指定するものになります。では、一つずつ見ていきましょう。

・flex-grow

こちらはflexコンテナ全体の幅にflexアイテム合計幅が満たない場合の伸縮率になります。
もっと噛み砕いていうと、flex-grow:1;の場合　「一つの部屋を３人でシェアする時、みんな均等にスペースを分けようね」っていうことです。

もしflex-grow:1 2 1;の場合
２の人が欲張りになっちゃいます。

続きまして。。。

・flex-shrink

こちらはflexコンテナ全体の幅よりflexアイテム合計幅が多い場合の縮む比率になります。
先程とほぼ一緒になりますが、噛み砕いていうと、flex-shrink:1 1 1;の場合　「一つの部屋を３人でシェアする時、俺だけ多めに撮ってしまってるからみんなで分け合おうぜ」っていうことです。

続きまして。。。

・flex-basic

flexアイテムの基準幅を設定するものになります。
px, em などの単位付きの数値や、親の Flex コンテナの main size に対するパーセンテージで指定します。
例えば親要素に今までのgrowやshrinkが設定されているとbasicで設定した値になるとは限らないので注意してください。

ここまできていうのもなんですが、一番王道な均等に全ての要素を配置したい場合はflex: 1 1 auto;としてしまえばOKかと思われます。

以上Flexプロパティでした!

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T00:20:44+09:00

Tailwind CSSでQiita模写を1つのHTMLファイルにまとめるとこうなる

TailwindCSSとは

CSSフレームワークの一種です。便利なクラス集。

TailwindCSSを使うと何が嬉しいのか

CSS触らなくてもHTMLクラス付与だけでスタイリングができちゃいます。

例えばフォントサイズを18pxにしたい時、普通のCSSなら本来

<div class="hoge">fuga</div>

<style>
  .hoge {
    font-size : 18px;
  }
</style>

と書くところ、TailwindCSSを使えば

<div class="text-lg">fuga</div>

と書くだけで済んじゃいます。

"text-lg"と書く = フォントサイズが18pxになるの関係性はどこで知れば良いんだ？と思うかもですが、有志がTailwind CSS Cheatsheetという神サイトを作ってくれているので、これを使って検索すれば一発です。

画面左上の検索欄にfont-sizeなど適用したいCSSプロパティ名を入力すれば".text-lg"が18pxだと表示してくれます。ちなみに、".text-lg"と表示されいるクラス名の部分ををクリックするとクラス名の部分だけ全選択してくれるのでそのままcommand(Ctrl)+Cでコピーしましょう。

TailwindCSSでQiitaのトップページを書くとこうなる

ここまでの説明を踏まえた上で、実際の実装コードをみてみましょう。DLリンクも貼っておくのでこちらDLしてブラウザ表示しつつ、コードを眺めてみて下さい。Tailwindはめっちゃ簡単なので一瞬で習得できると思います。学習コストの低さに対して時短効果が高すぎ。神。

DLリンク

https://drive.google.com/u/0/uc?id=1v4_axDJZbr2ezUhPWFSWcsZKMuM7Cfee&export=download

実装コード

コードを眺めましょう。TailwindCSSは、こんな感じで使われます。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tailwind</title>
    <meta name="csrf-param" content="authenticity_token" />
    <meta
      name="csrf-token"
      content="zByjZVc/0WIHDSWQIplovx+f2TRdU3U4ZZX2V6oyE9/76aJX285CAYfRVJrAlBAvIytL/b8yTsj3tDW6CRGy5A=="
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"
    />
    <link rel="stylesheet" href="./Tailwind_files/all.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com/" />
    <link href="./Tailwind_files/css2" rel="stylesheet" />
    <script src="./Tailwind_files/jquery-3.5.1.js"></script>
    <link
      rel="stylesheet"
      media="all"
      href="./Tailwind_files/application.debug-25676c933af431efc91ca08c8e3aa32c3741965809772acad111dc847f1ef258.css"
      data-turbolinks-track="reload"
    />
    <script
      src="./Tailwind_files/application-35f12e96cdd61beb0556.js"
      data-turbolinks-track="reload"
    ></script>
  </head>

  <body>
    <header
      class="h-14 flex items-center justify-center px-12 bg-qiita text-white"
    >
      <div class="mw-1088 flex justify-between">
        <div class="flex items-center">
          <a
            href="http://localhost:3000/"
            class="font-bold tracking-widest text-3xl"
            style="font-family: 'Goldman', cursive"
            data-turbolinks="false"
            >Kiita</a
          >
          <div class="modal-btn1 relative">
            <i
              class="fas fa-caret-down ml-2 rounded cursor-pointer inline-block w-5 h-5 text-center text-xs leading-5 bg-qiita-sub"
            ></i>
            <div
              class="hidden modal1 bg-white absolute z-10 top-9 -left-20 cursor-pointer rounded-sm shadow w-56"
              style="display: none"
            >
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa fa-check mr-3 inline-block w-2"></i>
                <span>Qiita</span>
              </a>
              <div class="px-6 my-1 text-11px font-bold text-gray-400">
                ログイン中のチームがありません
              </div>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-sign-in-alt mr-3 inline-block w-2"></i>
                <span>Qiita Teamsにログイン...</span>
              </a>
            </div>
          </div>
          <div
            class="modal-btn2 relative cursor-pointer mx-6"
            id="community-btn"
          >
            <span class="text-xs">コミュニティ</span>
            <i
              id="community-btn-icon"
              class="fas fa-caret-down text-xs pl-1 text-qiita-sub"
            ></i>
            <div
              class="hidden modal2 bg-white absolute z-10 top-9 -left-20 cursor-pointer rounded-sm shadow w-56"
              style="display: none"
            >
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-building mr-3 inline-block w-2"></i>
                <span>Organization一覧</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa fa-calendar-alt mr-3 inline-block w-2"></i>
                <span>アドベントカレンダー</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-search mr-3 inline-block w-2"></i>
                <span>Qiita Jobs</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-comments mr-3 inline-block w-2"></i>
                <span>Qiitadon(β)</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa fa-newspaper mr-3 inline-block w-2"></i>
                <span>Qiita zine</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-book mr-3 inline-block w-2"></i>
                <span>コミュニティガイドライン</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-book mr-3 inline-block w-2"></i>
                <span>良い記事を書くために</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa fa-book mr-3 inline-block w-2"></i>
                <span>リリースノート</span>
              </a>
            </div>
          </div>
          <form
            class="relative"
            action="http://localhost:3000/"
            accept-charset="UTF-8"
            data-remote="true"
            method="get"
          >
            <input
              class="rounded h-7 pl-8 py-4 text-xs w-48 text-gray-700 shadow-inner"
              placeholder="キーワードを入力"
              type="text"
              name=""
              id=""
            />
            <i
              class="fa fa-search fa-xs absolute top-1/3 left-0 text-gray-400 ml-2 pl-1"
            ></i>
          </form>
        </div>
        <div class="flex leading-8">
          <a
            href="http://localhost:3000/"
            class="leading-8"
            data-turbolinks="false"
          >
            <i class="fab fa-get-pocket fa-sm"></i>
            <span class="hover:underline text-xs">ストック一覧</span>
          </a>
          <div
            class="modal-btn3 relative text-sm h-8 leading-8 bg-qiita-sub text-white px-5 mr-2 rounded cursor-pointer ml-4"
          >
            <i class="far fa-edit fa-sm"></i>
            <span class="text-xs px-1">投稿する</span>
            <i class="fa fa-caret-down"></i>
            <div
              class="hidden modal3 bg-white absolute z-10 top-9 -left-20 cursor-pointer rounded-sm shadow w-56"
              style="display: none"
            >
              <a
                href="http://localhost:3000/articles/new"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>記事</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>質問</span>
              </a>
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>質問(テンプレートあり)</span>
              </a>
            </div>
          </div>
          <div
            class="text-sm h-8 leading-8 bg-white text-qiita-sub px-2 mr-2 rounded cursor-pointer ml-4"
          >
            <i class="far fa-envelope"></i> 0
          </div>
          <div
            class="text-sm h-8 leading-8 bg-qiita-notify px-2 mr-2 rounded cursor-pointer"
          >
            <i class="far fa-bell"></i> 99+
          </div>
          <div class="modal-btn4 relative cursor-pointer" id="user-btn">
            <div
              class="fa fa-user text-gray-600 bg-gray-200 inline-block w-7 h-7 leading-7 text-center rounded-full"
            ></div>
            <div
              id="user-btn-icon"
              class="fa fa-caret-down fa-xs ml-1 gb-gray-200 text-qiita-sub"
            ></div>
            <div
              class="hidden modal4 bg-white absolute z-10 top-9 -left-20 cursor-pointer rounded-sm shadow w-56"
              style="display: none"
            >
              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>マイページ</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>下書き一覧</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>限定共有記事一覧</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>編集リクエスト一覧</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>設定</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>Jobsプロフィール</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500 border-b"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>ヘルプ</span>
              </a>

              <a
                href="http://localhost:3000/"
                class="p-3 my-1 hover:bg-gray-100 flex items-center text-xs text-gray-500"
                data-turbolinks="false"
              >
                <i class="fa mr-3 inline-block w-2"></i>
                <span>ログアウト</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="py-8 px-12 relative bg-gray-100 flex justify-center">
      <div class="w-52 sticky inset-0 text-xs font-bold">
        <div class="border-b-2 mb-2">
          <div class="mb-2">記事フィード</div>
          <a
            href="http://localhost:3000/articles/index"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2 active"
            ><i
              class="fas fa-chart-line inline-block w-6"
              data-turbolinks="false"
            ></i
            >トレンド</a
          >
          <a
            href="http://localhost:3000/articles/timeline"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-users inline-block w-6"
              data-turbolinks="false"
            ></i
            >タイムライン</a
          >
          <a
            href="http://localhost:3000/articles/tags"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i class="fas fa-tag inline-block w-6" data-turbolinks="false"></i
            >タグ</a
          >
          <a
            href="http://localhost:3000/articles/milestone"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-flag-checkered inline-block w-6"
              data-turbolinks="false"
            ></i
            >マイルストーン</a
          >
          <a
            href="http://localhost:3000/articles/calendarfeed"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-calendar inline-block w-6"
              data-turbolinks="false"
            ></i
            >カレンダーフィード</a
          >
        </div>
        <div class="mb-2">
          <div class="mb-2">質問フィード</div>
          <a
            href="http://localhost:3000/questions/index"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-chart-line inline-block w-6"
              data-turbolinks="false"
            ></i
            >トレンド</a
          >
          <a
            href="http://localhost:3000/questions/timeline"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-users inline-block w-6"
              data-turbolinks="false"
            ></i
            >タイムライン</a
          >
          <a
            href="http://localhost:3000/questions/tags"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i class="fas fa-tag inline-block w-6" data-turbolinks="false"></i
            >タグ</a
          >
          <a
            href="http://localhost:3000/questions/question"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-question inline-block w-6"
              data-turbolinks="false"
            ></i
            >回答募集中</a
          >
          <a
            href="http://localhost:3000/questions/news"
            class="block text-gray-400 hover:bg-gray-200 cursor-pointer h-8 rounded-l leading-8 pl-4 mb-2"
            ><i
              class="fas fa-sort-numeric-down inline-block w-6"
              data-turbolinks="false"
            ></i
            >新着</a
          >
        </div>
      </div>

      <style>
        .active {
          color: #fff;
          background: #55c500;
          font-weight: normal;
        }
        .active:hover {
          background: #33a300;
        }
      </style>

      <div class="bg-white w-144 mr-4">
        <div class="px-4 pt-4 border-b-2 text-gray-600">
          <i class="fas fa-chart-line fa-lg"></i>
          <span class="px-1">トレンド</span>
          <span class="text-xs text-gray-400">
            最近人気の記事を毎日5時/17時に更新
          </span>
          <div class="flex mt-4 text-sm text-gray-500">
            <a
              href="http://localhost:3000/"
              class="period px-4 cursor-pointer pb-2 mx-1 period-active"
              data-turbolinks="false"
              >1日</a
            >
            <a
              href="http://localhost:3000/?scope=weekly"
              class="period px-4 cursor-pointer pb-2 mx-1"
              data-turbolinks="false"
              >週間</a
            >
            <a
              href="http://localhost:3000/?scope=monthly"
              class="period px-4 cursor-pointer pb-2 mx-1"
              data-turbolinks="false"
              >月間</a
            >
          </div>
        </div>
        <div class="p-4 border-b">
          <div class="text-sm mb-1">
            <a
              href="http://localhost:3000/"
              class="rounded-full bg-gray-200 text-center inline-block w-5 h-5 leading-5"
              data-turbolinks="false"
            >
              <i class="fas fa-user text-xs text-gray-600"></i>
            </a>
            <a
              href="http://localhost:3000/"
              class="mx-1 hover:underline"
              data-turbolinks="false"
              >@soeno_onseo</a
            >
            <span class="text-gray-500">が2020年12月27日に投稿</span>
          </div>
          <a
            href="http://localhost:3000/"
            class="hover:underline font-bold text-lg"
            data-turbolinks="false"
            >Rails6 &amp; Tailwind CSSでQiitaを作ってみた</a
          >
          <div class="text-gray-600">
            <i class="fas fa-tags text-xs"></i>
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >CSS</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Ruby</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Rails</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >JavaScript</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >TailwindCSS</a
            >
          </div>
          <div class="text-center flex items-center mt-1">
            <div
              class="text-sm font-sans font-extrabold text-gray-500 w-6 cursor-default"
            >
              <div class="h-3 tracking-widest">LG</div>
              <div>TM</div>
            </div>
            <span class="text-sm ml-2 text-gray-700">100</span>
          </div>
        </div>
        <div class="p-4 border-b">
          <div class="text-sm mb-1">
            <a
              href="http://localhost:3000/"
              class="rounded-full bg-gray-200 text-center inline-block w-5 h-5 leading-5"
              data-turbolinks="false"
            >
              <i class="fas fa-user text-xs text-gray-600"></i>
            </a>
            <a
              href="http://localhost:3000/"
              class="mx-1 hover:underline"
              data-turbolinks="false"
              >@soeno_onseo</a
            >
            <span class="text-gray-500">が2020年12月27日に投稿</span>
          </div>
          <a
            href="http://localhost:3000/"
            class="hover:underline font-bold text-lg"
            data-turbolinks="false"
            >WEBプログラミング学習最短ロードマップ</a
          >
          <div class="text-gray-600">
            <i class="fas fa-tags text-xs"></i>
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Rails</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >JavaScript</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >SQL</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >AWS</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >docker</a
            >
          </div>
          <div class="text-center flex items-center mt-1">
            <div
              class="text-sm font-sans font-extrabold text-gray-500 w-6 cursor-default"
            >
              <div class="h-3 tracking-widest">LG</div>
              <div>TM</div>
            </div>
            <span class="text-sm ml-2 text-gray-700">100</span>
          </div>
        </div>
        <div class="p-4 border-b">
          <div class="text-sm mb-1">
            <a
              href="http://localhost:3000/"
              class="rounded-full bg-gray-200 text-center inline-block w-5 h-5 leading-5"
              data-turbolinks="false"
            >
              <i class="fas fa-user text-xs text-gray-600"></i>
            </a>
            <a
              href="http://localhost:3000/"
              class="mx-1 hover:underline"
              data-turbolinks="false"
              >@soeno_onseo</a
            >
            <span class="text-gray-500">が2020年12月27日に投稿</span>
          </div>
          <a
            href="http://localhost:3000/"
            class="hover:underline font-bold text-lg"
            data-turbolinks="false"
            >Rails6 &amp; Tailwind CSSでQiitaを作ってみた</a
          >
          <div class="text-gray-600">
            <i class="fas fa-tags text-xs"></i>
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >CSS</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Ruby</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Rails</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >JavaScript</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >TailwindCSS</a
            >
          </div>
          <div class="text-center flex items-center mt-1">
            <div
              class="text-sm font-sans font-extrabold text-gray-500 w-6 cursor-default"
            >
              <div class="h-3 tracking-widest">LG</div>
              <div>TM</div>
            </div>
            <span class="text-sm ml-2 text-gray-700">100</span>
          </div>
        </div>
        <div class="p-4 border-b">
          <div class="text-sm mb-1">
            <a
              href="http://localhost:3000/"
              class="rounded-full bg-gray-200 text-center inline-block w-5 h-5 leading-5"
              data-turbolinks="false"
            >
              <i class="fas fa-user text-xs text-gray-600"></i>
            </a>
            <a
              href="http://localhost:3000/"
              class="mx-1 hover:underline"
              data-turbolinks="false"
              >@soeno_onseo</a
            >
            <span class="text-gray-500">が2020年12月27日に投稿</span>
          </div>
          <a
            href="http://localhost:3000/"
            class="hover:underline font-bold text-lg"
            data-turbolinks="false"
            >WEBプログラミング学習最短ロードマップ</a
          >
          <div class="text-gray-600">
            <i class="fas fa-tags text-xs"></i>
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Rails</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >JavaScript</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >SQL</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >AWS</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >docker</a
            >
          </div>
          <div class="text-center flex items-center mt-1">
            <div
              class="text-sm font-sans font-extrabold text-gray-500 w-6 cursor-default"
            >
              <div class="h-3 tracking-widest">LG</div>
              <div>TM</div>
            </div>
            <span class="text-sm ml-2 text-gray-700">100</span>
          </div>
        </div>
        <div class="p-4 border-b">
          <div class="text-sm mb-1">
            <a
              href="http://localhost:3000/"
              class="rounded-full bg-gray-200 text-center inline-block w-5 h-5 leading-5"
              data-turbolinks="false"
            >
              <i class="fas fa-user text-xs text-gray-600"></i>
            </a>
            <a
              href="http://localhost:3000/"
              class="mx-1 hover:underline"
              data-turbolinks="false"
              >@soeno_onseo</a
            >
            <span class="text-gray-500">が2020年12月27日に投稿</span>
          </div>
          <a
            href="http://localhost:3000/"
            class="hover:underline font-bold text-lg"
            data-turbolinks="false"
            >Rails6 &amp; Tailwind CSSでQiitaを作ってみた</a
          >
          <div class="text-gray-600">
            <i class="fas fa-tags text-xs"></i>
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >CSS</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Ruby</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >Rails</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >JavaScript</a
            >,
            <a
              href="http://localhost:3000/"
              class="text-sm hover:underline"
              data-turbolinks="false"
              >TailwindCSS</a
            >
          </div>
          <div class="text-center flex items-center mt-1">
            <div
              class="text-sm font-sans font-extrabold text-gray-500 w-6 cursor-default"
            >
              <div class="h-3 tracking-widest">LG</div>
              <div>TM</div>
            </div>
            <span class="text-sm ml-2 text-gray-700">100</span>
          </div>
        </div>
      </div>
      <div class="w-72">
        <img
          class="mb-4 cursor-pointer"
          src="./Tailwind_files/4184501152671230819"
          alt="ad"
        />
        <img
          class="mb-4 cursor-pointer"
          src="./Tailwind_files/advent_calendar_2020_online_meetup-757c788ae4ed630428aa863a3d985824.png"
          alt="ad"
        />
        <img
          class="mb-4 cursor-pointer"
          src="./Tailwind_files/banner-300x250-31e017c77ed4cd65133e44c5c8659826.png"
          alt="ad"
        />
      </div>
    </div>
  </body>
</html>

まとめ

TailwindCSSというCSSフレームワークが便利でフロント実装爆速化に使える
<div class="text-lg"></div>と書くだけでfont-size: 18px;が適用できる

とても便利なので使いましょう。

筆者連絡先

https://twitter.com/soeno_onseo

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T00:08:56+09:00

Selenium Alert Confirm Box のOK キャンセルボタン押下

SeleniumでAlert Confirm Boxを操作する。

下記をOKしたい場合
from selenium import webdriver
from selenium.webdriver.common.alert import Alert

driver = webdriver.Chrome("driverPath")

# OKボタン押下
Alert(driver).accept()

# キャンセルボタン押下
Alert(driver).dismiss()
環境情報

IDE

Python

python-3.9.1

OS

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-05T00:04:32+09:00

?「HTMLへBootstrapを組み込み後CSSが反映されない」エラー解消

今日の勉強時に発生したエラー記録です。

＜内容＞
htmlへBootstrapを組み込んでいた際に、<hr>,<h1>のcssが反映されないエラーが発生しました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ご利用アンケート</title>

  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <header>
      <div class="row">
        <div class="col-sm-6">
          <h1>ご利用アンケート</h1>
        </div>
        <div class="col-sm-6 align-right">
          <a href="/">HOMEへ戻る</a>
        </div>
      </div>
    </header>
  </div>

    <hr>

    <hr>

  <div class="container">   
    <footer>
      <p>&copy; H20 space</p>
    </footer>
  </div>

</body>
</html>
style.css
header {
  margin-top: 30px;
  color: #2e99a9;
}

hr {
  border-width: 3px;
  border-color: #2e99a9;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.align-right {
  text-align: right;
}
＜web上画面＞

＜確認事項.1＞デベロッパーツールの確認



＜確認事項.2＞コードのスペルミスの確認
問題なかったので、google検索を実施しました。
＜検索結果＞
Bootstrapとcssのファイルが喧嘩していたのが原因のようです。

＜検証①＞cssタグの前に直前のクラス名を入れてみる
.col-sm-6 h1
.conteiner hr
＜結果①＞全く効果無しのため次の検証②へ進みました。

＜検証②＞linkタグ順を入れ替えcssファイルの優先順位を上げる
index.html
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="../css/style.css">
＜結果②＞成功！！cssファイルが<hr>,<h1>へ反映されました！

ファイルの優先順位に関する知識の復習不足が原因でした。復習、アウトプットを今後も続けていきます?

google検索時の参考記事↓↓
cssが効かない・反映されないときの対処法
https://saruwakakun.com/html-css/wordpress/cant
teratail Q&A
https://teratail.com/questions/86446

　 Tweet
Qiitaで続きを読む

20210105のHTMLに関する記事は9件です。

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(2)

「基本的なAngularアプリをはじめる」をやってみる(2)

商品リストを作成する

1.product-listフォルダ内の product-list.component.html に以下のタグを記述します。

2.divタグの中に下記のh3タグを記述します。

3.{{ product.name }} を下記の a タグで囲みます。

4.下記の p タグを追加します。

5.ボタンを追加します。

【初心者でもわかる】親子関係を持つメニューの作り方

ソース

解説

まとめ

おそまつ！

input type="file"のaccept属性がかなり使える

使用例

pdfファイルのみ

psdファイルまたはaiファイルのみ

画像ファイルのみ

動画ファイルのみ

音声ファイルのみ

結果

３秒で画像をトリミングできます

Excelの表をクリップボードにコピーしたときのHTMLの内容を調べてみた

まえがき

1. 実際の例

1.1. コピーした部分

1.2. 自作ツールでHTMLに変換した結果

2.1. ヘッダ情報

2.1.1. StartHTML と EndHTML

2.1.2. StartFragment と EndFragment

2.2. 文字コード

3. 表の中身

4. 所感（？）

参考サイト