20201009のHTMLに関する記事は11件です。

【VSCode】拡張機能無しでbrタグのショートカット追加

rectangle_large_type_2_969247d7d006986fbd588cca5e651ed4.png

あらすじ

デザイン上のテキストをpタグなどにコピペして、それぞれの行にbrタグ入力して…ってやっていたけど流石にメンドすぎたので、ハックをGoogle.

white-space: pre-line; とかにしても良かったけど、開きタグの次は改行するっていうポリシーがあったのでやっぱやめた。

wpautop に慣れすぎるといけないな(でもやっぱり好きWordPress)

キーバインディングの追加

br タグショートカットといえども、機能的には「任意のキーを押したとき「<br>」という文字列を出力する」というモノなので、あしからず。

まずは「Ctrl + P」でコマンドパレットを開き

keyboard

と入力します。

そして、「基本設定: キーボード ショットカットを開く(JSON)」をクリックします。

すると、keybindings.json というJSON形式のユーザー用設定ファイルが表示されると思いますので、そちらに追記します。

公式ドキュメントより(というか以下のコードコピペでよいけど)

{
    "key": "ctrl+enter", 
    //Ctrl + Enterを押したとき macはCmdでも○
    "command": "type", 
    //argsの内容をもとに入力
    "args": {
        "text": "<br>" 
        //入力内容は<br> 改行タグ
    },
    "when": "editorTextFocus && editorLangId == 'html'" 
    //発動できるのはエディタ内がフォーカスされている && HTML形式のファイルを開いているときのみ
}

を追記します。

保存してCtrl + Enterを押してbrタグが入力されることを確認します。

めでたし!

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

【デイトラ】初級ノートDAY6~DAY7

◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

わたしも同様に初学者です。内容の正確性を保証することはできません。
訂正やより良い情報があればご教授お願いします。

✔この記事で解決できること

  • 講義内容と課題の中でわからないことが解決できるかもしれない。
  • 調べる時間を短縮できるかもしれない。
  • 学習の仕方を効率化できるかもしれない。

DAY6 ゼロから作る ②

✔ button タグはインラインブロック

違い ブロック インライン インラインブロック
改行 要素の前後 入らない 入らない
幅、高さ 指定できる 指定できない 指定できる
margin 上下左右 左右のみ 上下左右
タグ div,h1,p,ul a,span,input button

私は、インラインブロックが何かはわかりましたが、
どう使い分けるのか未だにわかっていません。
しかし、コードを読むために今のうちに特徴はを覚えた方が良いと思います。

参考サイト
https://www.itra.co.jp/webmedia/what-is-inline-block.html

✔ Flexbox

今後必ず使いますので、
可能な限り慣れたほうが良いです。

私は、いざ使う時にどの要素に
display: flex
を記述するのかわからなくなりました。

下記にとても良い練習サイトがあります。

練習サイト
https://flexboxfroggy.com/#ja

参考サイト
https://www.ameamelog.com/css-flex-header/

DAY7 ゼロから作る③

✔ レスポンシブ

max-width = 以下
min-width = 以上
iPadの表示幅は768px

モバイルファーストという記述方法が一般的だそうです。
教材では、PCの表示を作ってからモバイル向けに作っていますが、
まず、モバイル向けに作ってからPC向けに作ることを言うそうです。

メリットは、スマートフォンで見られる可能性がとても高いということ。
そして、スマートフォンで見る場合にPC用の不要なデータまで通信することで、
表示が重くなってしまう可能性があるということです。

個人的なメリットですが、
レスポンシブの記述をする時にどうしても尻込みしていたのが、
軽減されたと思います。

私は、復習する際にモバイル向けに作ってから、
教材のようにPC向けに作るようにしました。

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

リンク先がpdfやwordなら自動的にそのファイルのマークを付ける方法

どうも7noteです。ちょっとした小技を紹介。

ファイルを表示したり、ダウンロードする時にそのファイルがどんなファイルなのかがアイコンがついて一目で分かれば見やすいサイトですよね。
たくさんファイルがあるサイトを作るときに1つ1つclass名を付けたり、アイコン画像を用意してリンク先を1つ1つ変える必要がありますが、この手間をなくします。

ファイルのリンク先の拡張子を読み取って、自動でアイコンを変える方法があります。

CSSでファイルのリンク先の拡張子を絞り込み

CSSの属性セレクタを使います。属性セレクタで[href*=".hogehoge"]とすることで.pdfがファイル名に含まれるものにのみCSSを当てることができます。
アイコンにはフォントオーサムを使います。

pdfファイルの例

index.html
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサムを読み込み。 -->
</head>

<a href="./abc.pdf">ABCファイル(PDF)</a>
a[href*=".pdf"]::after {
  content: "\f1c1";
  font-family: "Font Awesome 5 Free";
  color: #F30401;
}

結果
pdf.png

*(アスタリスク)を付けることで、「含まれるかどうか」という条件判定になります。

pdf以外の場合であれば、以下の通りで対応することができます。

wordやエクセルはバージョンによって拡張子が違うので注意が必要。

ワード

index.html
<a href="./abc.doc">ABCファイル(ワード)</a>
a[href*=".doc"]::after,
a[href*=".docx"]::after {
  content: "\f1c2";
  font-family: "Font Awesome 5 Free";
  color: #0061C2;
}

word.png

エクセル

index.html
<a href="./abc.xls">ABCファイル(エクセル)</a>
a[href*=".xls"]::after,
a[href*=".xlsx"]::after {
  content: "\f1c3";
  font-family: "Font Awesome 5 Free";
  color: #1F6F43;
}

xlsx.png

まとめ

クラス名付ける方が誤作動は少ないかもしれないですが、99%この方法で大丈夫だと思います。
ファイル名やディレクトリ名に.pdfとか.docがはいってしまうと誤作動してしまいますが。

属性セレクタを指定するときに「.」(ピリオド)を入れていないと、ファイル名にたまたまpdfという文字がはいっていても反応してしまうので、必ず「.」(ピリオド)も入れることをおすすめします。

・他のアイコンをお探しの方はこちら

おそまつ!

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

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

Vimium でクリックできない要素をクリック可能にする

はじめに

「クリックできない!」というケースに遭遇することがまれにあるので。

Vimium でのクリック

Vimium は、ブラウジング操作を Vim のようなキーバインドで可能にする、Chrome 及び Firefox 用の拡張機能です。

Vimium では LinkHints という方法でクリッカブルな要素をクリックできます。
LinkHints というのは、クリック可能な要素のところに文字列を表示し、その文字列がキーボードで入力されたらクリックイベントを発火させるというものです。

が、まれに、クリック可能であるにもかかわらずヒントが表示されないことが起きます。
それでは Vimium だけでクリックすることができません。

なぜクリックできないのか

Vimium は、要素のタグ名や要素の属性、CSS であてられたスタイルなどからクリック可能かどうかを判別しています。

大体の要素は正しく判別できますが、HTML の書き方があまりよろしくない場合などはクリック可能であると判別されずヒントが表示されません。

やるべきことはこれだけ

なら、ユーザースクリプトで HTML を編集し、クリック可能であることを明示してあげればよいのです。
幸い、Vimium はよくできていて、属性をちょこっといじるだけで済みます。

targetElement.setAttribute('role', 'button');

要素のrole属性をbuttonに設定しています。

role属性というのは、要素の意味付けのための属性で、WAI-ARIA というアクセシビリティをより良くするための、HTML に付け加える形の言語によるものです。
(詳しくは私もわからないのですが、buttonタグを使えなかったときに、読み上げツールなどに対し「ボタンである」と示すために使われるものだそうです)。

これで、クリック可能になります。

おわりに

HTML は正しく書こうね!

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

Flexboxで縦並びかつ左右中央揃えがうまくいかない理由と対策

ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します!

Flexboxで縦並びかつ左右中央にする

要素を縦並びかつ左右中央揃えにしたいな〜
「よし!Flexboxを使おう!」

ということで、
要素を縦並びにするのは flex-direction: column
要素を左右中央揃えにするには justify-content: center

HTMLはこんな感じ
index.html
<main>
    <div class="main-box">
      <h1>タイトル</h1>
      <p>pタグです</p>
    </div>
  </main>

早速やってみる!

style.css
.main-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

スクリーンショット 2020-10-08 23.23.02.png

あれ?あれれ?
左右中央にならない...

なぜ左右が中央にならないのか

ググってみたら発見した!

参照:https://baqamore.hatenablog.com/entry/2018/02/14/220836

この記事を書いた人曰く、縦並びにするということは、
スクリーンショット 2020-10-08 23.51.50.png
こういうことだそうだ!

解決方法

ということは左右を中央に寄せたいならば、
justify-content: centerをalign-items:centerに変えれば......

style.css
.main-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

スクリーンショット 2020-10-08 23.56.38.png

できた!!

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

画像フォーマット:EPSをSVGに変換する

モチベーション

論文等でLaTeXで原稿を書く際、画像ファイルはEPS,JPG,PNGを使うことが多いと思います。特に実験データのグラフなどはベクター画像形式であるEPSを用いることになります。

ところでこのEPSというフォーマットは、HTML中のimgタグでパスを記述してもWebブラウザでは表示できません。Web技術全盛の昨今ではいささか使いにくいと感じます。

個人的にも、LaTeXフォーマットの執筆がやりにくいので、代わりにMarkdownで原稿執筆するエディタを作ったりしました1。レンダリングはHTML+Javascript+CSSで行い、Electronでアプリとして固めました。しかしEPS画像は表示できないのは論文執筆には不便です。

ブラウザで表示させるためにJPGやPNGに変換しても良いですが、ベクター系式ではなくなってしまいます。
変換するならベクター形式であるSVGが良いだろうということで、方法を模索したのでここで紹介します。

方法 EPS → PDF → SVG

Latex環境一式とGhost Script(GS)をインストールします[^2]。
場合によりPerlも必要です。私の場合はWindows環境だったのでstrawberryperlをインスコしました。

Latex環境の中に入っているepstopdfコマンドを使って、EPSからPDFへ変換します。続いて、pdftocairoコマンドを使ってPDFからSVGへ変換します。実際には次のようなコマンドになります

epstopdf hoge.eps hoge.pdf
pdftocairo -svg hoge.pdf

上手く行けばhoge.svgというファイル名でSVGファイルが作成されると思います。

Note 1

GSは32bitと64bitの設定が混在しているとerrorになります。環境変数のpathでtexのbinとGSのbinが共に64bitになっているか確認しましょう。

Note 2

他の方法としてpstoeditも試しましたが、上手く行きませんでした。

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

表(テーブル)で斜線を引く方法 

空のセルに対して、斜線を引く

例えば下記のような表があって、水曜日のセルに斜線を入れたい時。
(初心者のため表のイメージの貼り付けができなくてごめんなさいね)

一番下の水曜日のセルには何も書かない。空にしてある。

index.html
<table border="1">
            <tr>
              <th>診療時間</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <th>9:00~15:00</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>

CSSで空のセルに対して。

style.css
/* 空のセルに斜線を引く 透明ー黒黒ー透明 */
table td:empty {
  background-image: linear-gradient(to top left,
  transparent, transparent 49%,
     black 49%,
     black 51%,   /* 線の太さ */
    transparent 51%, transparent);
}

解説

table td:empty:空のセルに対して。
・グラデーションlinear-gradientを利用します。
グラデーションの仕組みは、なんとなくの理解だけど、
「透明〜黒〜黒〜透明の順番でグラデーションしろ。」ってイメージでいいかと。
→→ちょうど中間で黒い線が引かれる。=斜線 
線の太さは%を変更すれば良い。(ちなみにこれは最小)
47%〜53%とかいい感じじゃないかな。

★この時に、to top left,て指定しているのがポイント。
「(右下から)左上に向かってグラデーション」となるので、右上りの斜線になる。

逆に右下がりの斜線ならrightに変更すれば良い。

他のやり方だと45度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。

参考リンク

CSSで斜線を引く方法

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

HTML & CSS WEB基礎知識

FTPとHTTP

FTP (File Transfer Protocol)
HTTP (Hyper Text Transfer Protocol)

タグの種類

<p>         「Paragraph」の略で、<p>~</p>で囲まれたテキストは1つの段落であることを示します。 

<H1>~<H6>  「Heading」の略で、見出しを表します。

<div>       「Division」の略で、区分や部分などの意味を持ちます。 
       したがって、その意味から推測できる通り、divタグは複数のタグを1つにまとめる働きを持ちます。

<ul>        「unordered list(順序がないリスト)」の略で、
       その名前の通り順序がない箇条書きのリストを表示する際に使用するタグです。

<ol>        「ordered list(順序のあるリスト)」の略で、
       その名前の通り順序のある番号付きのリストを表示する際に使用するタグです。

<li>        「list item」の略で、リストの項目を表示するために使用するタグです。

<a>         「アンカー(anchor)」の略で、リンクの出発点と到達点を指定するために使われます。 
       様々な属性を持ちますが、リンク先を指定するhref属性、
       対象となるファイルへの関係を指定するrel属性などが比較的よく使用されます。

<em>        「emphasis」の略で、強調を表すタグです。

<br>        「Break」の略で、改行を行うためのタグです。

<hr>        「horizontal rule(水平方向の罫線)」の略で、水平の横線を引くためのタグです。

<tr>        「table row」の略で表の行部分(横方向)を指定するタグです。

<td>        「table data」の略で、テーブルセルの内容を指定します。

<th>        「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。 
       セルの内容がデータに対する見出しの場合はこの<th>要素を使用します。


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

iosでinputタグがボコってみえるのを直す

課題

まず1枚目と2枚目を比べてみる。
IMG_3121.jpg
IMG_3122.jpg

1枚目はデフォルトのinputタグで上の方にshadowみたいな彫りの深さが出ているバージョン
2枚目はそのiosのデフォルトの仕様に対してcssで彫りの深さを消したバージョン

解決法

inputタグのcssに appearance: none; -webkit-appearance:none; を追加する

css
input {
  appearance: none;
  -webkit-appearance:none;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryの導入(HTML)

jQueryのライブラリを読み込む

jQueryをダウンロードする

▶︎jQueryダウンロードはこちら

リンクへ飛んでjQueryの項目1番上のまでをコピーする
※バージョンが更新されると少し表記変わっている場合もあります。
スクリーンショット 2020-10-09 13.32.31.png

コピーした物をindex.htmlのheadに貼り付けると読み込める

※jQueryは他のJavaScriptファイルよりも先に読み込まないとエラーが出る。
そのため他の全てのJavaScriptファイルよりも上に、jQueryの読み込み先を記述する。

index.html
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="stylesheet/style.css">
  <link rel="stylesheet" type="text/js" href="js/index.js">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon/t-awesome/4.6.3/css/font-awesome.css"></script>
  //この行に貼り付け(今回は以下のmain.jsのJavascriptファイルより上)
  <script src="./main.js"></script>
  <title>appTitleSample</title>
</head>

これで導入は完了です。

Memo

HTML取得はJavascriptと同じです。
上記で < script src="./main.js">< /script >と記述してあるので、
この場合main.jsのファイル内に取得したいクラス名などを記述していきます。

main.js(自分で作成したファイル.jsに記述)
$(function() {
  console.log($(".クラス名"));
});

※ここにはクラス名だけではなく色々入れることができる。

最後にひとこと

今回もまた理解不十分な点が浮かび上がりました。

不明点 「①jQueryのリンク先タグをコピーする方法と②gemのインストールしてからの導入方法の違い」

JavaScriptのライブラリjQueryは導入する際に今回のように、
リンク先のscriptタグをコピーしてindexに貼り付ける方法がある。
また、hamlで非同期通信でのjQueryの導入はgemをbundle installしてindexに追記したのでけれど、その違いがまだわかっていません。

今回はHTMLを例に記録をに残していますが、
hamlの場合を別で記録記事を残します。

①の方法はタグの切り替えを想定した物でhtmlを使用すものを参考にしました。
②はhamlを使用し非同期通信をすることを想定したものを参考にしています。

導入に関してもまだまだ未熟なので調べていきたいと思います。

ブラウザ情報だけだったら、①の方法で良いのかな
②の方法はデータ情報などを持ってこなければならないAjaxとか関係するのかな。
知りたいことがまだまだあります。

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

Railsで簡単にプルダウンを作る方法

簡単にプルダウンを作る方法

使用するディレクトリ(私の場合)⚠️命名はご自身で

  • ビューファイル(new.html.erb)
  • コントローラー(mentors.controller.rb)
  • モデル(sukill_id.rb)

目指す完成形

95c0f8244478d3536e6dd971b06a4a0f.png

まずビューファイルから(どこからでもいい)

1.こういうパターンや

new.html.erb
<select>
          <option>チャットするユーザーを選択してください</option>
          <option>ユーザー1</option>
          <option>ユーザー2</option>
        </select>

2.こういうパターンもある

new.html.erb
  <div class="mentors-detail">
   <div class="form">
     <div class="weight-bold-text">
       スキル
       <span class="indispensable">必須</span>
     </div>
     <%= f.collection_select(:skill_id, Skill.all, :id, :name, {}, {class:"select-box", id:"mentor-skill"}) %>
   </div>

今回は2のf.collection_selectを使用してプルダウンを作成します!

6行目で「:skill_id, Skill.all」となっていますがこれは選択したいプルダウンの内容は「skill_idモデル」から選ぶわけなので次はモデルの中身を書いていきます!

モデル作成

skill_id.rb
class Skill < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: 'HTMLCSS' },
    { id: 3, name: 'Ruby' },
    { id: 4, name: 'Javascript' },
    { id: 5, name: 'PHP' },
    { id: 6, name: 'Python' },
    { id: 7, name: 'SQL' },
    { id: 8, name: 'GO' },
  ]
end

あとはコントローラーにnewアクションやらcreateアクションを記述してルーティングやパスをrails routesで確認しながら記述すれば出来上がり!

95c0f8244478d3536e6dd971b06a4a0f.png

まとめ

CSSの部分は省きましたが多分こんな感じ(ここはご自身でやってみてください)

new.css
.mentors-detail {
  display: flex;
  justify-content: space-between;
  padding: 2vh 0;
}

.mentors-detail>.form {
  width: 300px;
  padding: 2vh 0;
}

.select-box {
  margin: 2vh 0;
}

現場からは以上です!

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