- 投稿日:2020-10-09T23:11:41+09:00
【VSCode】拡張機能無しでbrタグのショートカット追加
あらすじ
デザイン上のテキストを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
タグが入力されることを確認します。めでたし!
- 投稿日:2020-10-09T23:10:21+09:00
【デイトラ】初級ノート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向けに作るようにしました。
- 投稿日:2020-10-09T22:10:45+09:00
リンク先が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以外の場合であれば、以下の通りで対応することができます。
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; }エクセル
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; }まとめ
クラス名付ける方が誤作動は少ないかもしれないですが、99%この方法で大丈夫だと思います。
ファイル名やディレクトリ名に.pdfとか.docがはいってしまうと誤作動してしまいますが。属性セレクタを指定するときに「.」(ピリオド)を入れていないと、ファイル名にたまたまpdfという文字がはいっていても反応してしまうので、必ず「.」(ピリオド)も入れることをおすすめします。
・他のアイコンをお探しの方はこちら
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-10-09T21:16:46+09:00
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 は正しく書こうね!
- 投稿日:2020-10-09T20:23:33+09:00
Flexboxで縦並びかつ左右中央揃えがうまくいかない理由と対策
ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します!
Flexboxで縦並びかつ左右中央にする
要素を縦並びかつ左右中央揃えにしたいな〜
「よし!Flexboxを使おう!」ということで、
要素を縦並びにするのは flex-direction: column
要素を左右中央揃えにするには justify-content: centerHTMLはこんな感じ
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; }あれ?あれれ?
左右中央にならない...なぜ左右が中央にならないのか
ググってみたら発見した!
参照:https://baqamore.hatenablog.com/entry/2018/02/14/220836
この記事を書いた人曰く、縦並びにするということは、
こういうことだそうだ!解決方法
ということは左右を中央に寄せたいならば、
justify-content: centerをalign-items:centerに変えれば......style.css.main-box { display: flex; flex-direction: column; align-items: center; }できた!!
- 投稿日:2020-10-09T17:59:01+09:00
画像フォーマット: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
も試しましたが、上手く行きませんでした。
- 投稿日:2020-10-09T17:11:23+09:00
表(テーブル)で斜線を引く方法
空のセルに対して、斜線を引く
例えば下記のような表があって、水曜日のセルに斜線を入れたい時。
(初心者のため表のイメージの貼り付けができなくてごめんなさいね)一番下の水曜日のセルには何も書かない。空にしてある。
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度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。
参考リンク
- 投稿日:2020-10-09T17:04:19+09:00
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>要素を使用します。
- 投稿日:2020-10-09T16:09:19+09:00
iosでinputタグがボコってみえるのを直す
- 投稿日:2020-10-09T14:39:14+09:00
jQueryの導入(HTML)
jQueryのライブラリを読み込む
jQueryをダウンロードする
リンクへ飛んでjQueryの項目1番上のまでをコピーする
※バージョンが更新されると少し表記変わっている場合もあります。
コピーした物を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とか関係するのかな。
知りたいことがまだまだあります。
- 投稿日:2020-10-09T00:30:21+09:00
Railsで簡単にプルダウンを作る方法
簡単にプルダウンを作る方法
使用するディレクトリ(私の場合)⚠️命名はご自身で
- ビューファイル(new.html.erb)
- コントローラー(mentors.controller.rb)
- モデル(sukill_id.rb)
目指す完成形
まずビューファイルから(どこからでもいい)
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.rbclass Skill < ActiveHash::Base self.data = [ { id: 1, name: '--' }, { id: 2, name: 'HTML•CSS' }, { 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で確認しながら記述すれば出来上がり!
まとめ
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; }現場からは以上です!