今さら聞けないHTML　2020年08月28日

Vue.jsで簡易的ないいねボタン

こんにちは
Vue.jsに関して色々調べながら書いてます。
備忘録で簡易的にコンポーネントに関して色々勘違いしていたので
書き直してみました。
（触り始めたばっかなので間違ったらそっと教えていただければと思います！）

vue-cliでのプロジェクトの作成やらは省きます。
（いっぱい記事あったので書いても意味ないかなと?）

##環境
vue/cli 4.4.6
vue: 2.6.11
FontAwsome（アイコンで使いました。CDNでやっちゃってます）

##ディレクトリ

この画像のWEB以下のcomponentsとviewsを使います。（あとrouter）
（Javaのプロジェクトも混ざってるのでbuile.gradelとか余計なファイルもあります?‍♂️）

##components
co

後ろから選択した範囲を前から選択したように選択し直してみる

# はじめに

文字列を選択するときに、**後ろから選択しても前から選択したのと同じように扱いたい**！という要求があったため、実装してみました。

# やりたいこと

“`html

ふるいけや
かわずとびこむ
みずのおと

“`

例えば、以上のような DOM 構造の文字列を以下のように選択すると、選択範囲の始点のノード(`anchorNode`)と終点のノード(`focusNode`)はそれぞれ次のようになります。

| | 選択した範囲 | 始点ノード(`anchorNode`) | 終点ノード(`focusNode`) |
|:–|:-:|:-:|:-:|
|前からの選択| 「**い**」から「**み**」まで | \ふるいけや\ | \みずのおと\ |
|後ろからの選択| 「**み**」から「**い**」まで | \みずのおと\ | \ふるいけや\

imgにsrcsetでしている場合のonerrorハンドリングが失敗する

HTMLの`img`タグにおける[srcset](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)といえばデバイス毎にいい感じに指定した画像を取得してくれる仕組みですが、これをonerrorでハンドリングした際のハマリポイントを書き残しておきます。

## onerrorでハンドリング
`img`タグの画像がうまく読み込めなかった場合に別の画像に差し替える手法として`onerror`が利用できます。

“`html

“`

`src=”/path/src.jpg”`が読み込み失敗した場合に`onerror=”this.src=’/path/error-src.jpg'”`onerrorが実行され、javascriptにより`this.src`が上書きされます。

## srcset利用時に

HTML/CSS　備忘録

HTMLとCSSの備忘録です。

・画像と文字を重ねたい時、
position: relative;
position: absolute;
topとwidthで数値を調整する。

・横並びにする時、
display: inline-block;

Geeksalon

８月からGeeksalonという学生限定のプログラミングサロンに入会することになりました。以前から、独学をしておりましたが、それでは厳しいことを実感し、入会することを決意いたしました。
教材は既におわり、もうすぐポートフォリオ作成に入りますが、自分の納得のいく成果物が作れるように精一杯努めて参ります。サロンに入ったことを後悔しないように、日々勉学に励む所存です。

【初心者でもわかる】cssで文字を等間隔（均等割り付け）にしたり、数行の文章の右端がキッチリ揃う方法

#どうも7noteです。文字を等間隔にしたり、文章の右端を揃える方法です。

予め述べておきますと、タイトルのような事はできますが、

***「デザインを見直した方がいい」***

と思います。**理由は3つ。**

– ブラウザによって今回使うcssが対応していない（異なる指定方法が必要な場合も）
– 1行の文字量が変わる事で、対応できずデザインが崩れる場合がある
– あのgoogleですら使っていない **（検索結果画面の話）**

**「それでもどうしてもやりたいんだ～！」**

という方だけ、続きをお読みください。

## 方法

文字を等間隔にするプロパティとして今回使うのは`text-align-last: justify;`を使います。
ただChromeやFirefoxにしか効かないので、IEやEdgeに対応させるためには`text-justify: inter-ideograph;`も指定が必要です。

|ブラウザ|プロパティ|
|:–|:–|
|Chrome・Firefox|text-align-last: justify;|
|IE・Edge|text-just

tableの行全体(tr)をリンクにする(jQuery)

trタグ全体や、tdタグの塊をaタグで囲っても、行全体をリンクにすることはできないようです。
jqueryを使って実装したので、サンプルを記録しておきます。

“`html

foo

bar

baz

“`

ボタンをクリックしたら端からプロフィールが出てくるアニメーション

#はじめに
ブログでよくある最初は隠れていてボタンを押すとプロフィールがヌッと出てくるアニメーションを作りました。
最初からプロフィールを表示しているサイトもありますが、トップページの面積を大きく使いたいときに便利です。

#ポイント

・端から出したい要素を画面の外に隠す

“`html
.profile{transform: translateX(-100vw);} //左に隠す場合
.profile{transform: translateX(100vw);} //右に隠す場合
“`
transformを使ってCSSだけで隠すとjQueryでhideやfadeOutを書く手間が省けます。

・隠した要素を表示するためのclassを記述

“`html
.profile.a

CSSの@keyframesとanimationでポケモン捕獲っぽい画面を作ったよ

HTMLとCSSの`@keyframes`と`animation`を使ってポケモン捕獲画面のようなボールが左右に動くローディング画面を作ってみました。

## CSSのkeyframesとanimationについて
`@keyframes`はアニメーションの開始から終了までの動きをカスタマイズできるCSSの文法です。
`animation`プロパティはHTML要素にどのアニメーションを適応するか、アニメーションの時間、繰り返し回数はどを指定することができます。

## ソースコード

“`html:index.html




【初心者でもわかる】cssを共通化させて、短く書こう！

# どうも7noteです。cssの共通化は永遠のテーマです。

cssを記述する際、**似たようなcssを何度も書いてませんか？**

## 共通化でcssを短く書く様々な方法

### セレクタで一括指定

“`css

/* 隣接セレクタ */
li + li {
margin: 10px 0 0; /* liの次のli*/
}

/* 間接セレクタ */
p ~ p {
margin: 10px 0 0; /* p以降のp*/
}

/* アスタリスク（*） */
body * {
box-sizing: border-box; /* body配下の全要素 */
}

“`

### カンマ(,)つなぎで複数同時指定

“`css
section .class1,
section .class2,
section .class3 {
margin: 20px; /* class1とclass2とclass3に同時に効く */
}

“`

### nth-child,nth-of-typeを使って一括指定

“`css
/*よくない例*/
li:nt

Qiitaの質問フィードでなぜ一瞬アイコンが大きく表示されるのか

（※8月27日16時追記：修正されたらしく現在はアイコンが大きくなりません）

質問フィードを開くと、一瞬このような感じで質問者のアイコンが大きく表示されます。
（アイコンなので公開情報だとは思いますが質問者を晒す意図はないのでモザイクをかけています）

どうしてこうなってしまうのか、HTMLの仕様を眺めて解説をしてみようと思います。

## まずはインスペクタで覗いてみよう

アイコンが大きくなるのは一瞬だけで、次の瞬間には小さくなっています。


アイコンの部分をインスペクタで覗いてみると、こんな感じです（

わざわざ a href=”javascript:void(0)” って書いてまで，リンクタグをボタン機能にするのは気持ち悪かったので，BootStrap に瞬殺解決してもらった

# リンクをリンクとして使わない仕様

本来，青色フォントに下線の施されたリンクタグって，「ページ遷移」というイメージがあります。

共通認識ともいえる，このイメージからかけ離れたコードを書いてしまうことは，利用者（そして開発者も）の常識を裏切ることにもなるので，できれば避けたいデザインですが，声とコダワリの強いユーザがいたりする場合，以下のような仕様：

– リンクタグ `` を押したとき，ページ遷移**させない**
– リンクタグ `` を押すことで，何がしかの JavaScript 処理を呼ぶ

を実装せざるを得ないケースもあります。

実装そのものは単純で，一つの例としては，以下のようなコードがあるかと思います：

“`php:index.blade.php

リンク

“`

“`js:index.js

$(‘#btn_edit’).click(function(){

// 何がしかの処理

[PHP]Googleの構造化データ（パンくず）の対応を一括で簡単に

##はじめに
近年のWebサイトでは必須となったパンくずリストですが、Webエンジニアの皆さんならSEO対策の一貫として構造化マークアップを行うケースが少なくないと思います。しかし、HTMLを生成するコードとJSONを生成するコードが別々にあると、管理が二重になってしまって煩わしい…。そしてコードが長くなって読みにくい！

また、WordPressのテンプレートなどでは、microdataによって構造化マークアップを行っているものもありますが、GoogleはJSON-LD形式での構造化マークアップを推奨しています。

ということで、以下の2つのポイントを抑えつつ、Googleの構造化データに対応したパンくずリストの生成ができるようなメソッドを作っていきたいと思います。

– JSON-LD形式でマークアップする
– 一括でHTMLとJSONのマークアップができるようにする

## まずは結論から
以下のクラスを追記します。WordPressなら`functions.php`とかに書くのが良いでしょう。

“`php:functions.php

class breadcrumb
{

htmlとcssでいのちを輝かせる

こんばんは。りーぜんとです。

昨日からTwitterで大阪万博のロゴが話題です。
参考↓
[大阪万博公式サイト](https://www.expo2025.or.jp/)

そう。みながTwitterで言ってるように、**ちょっときもい**んです。
ちなみにTwitterではみんながいのち輝く君って呼んでるんですが、本当はなんていうんでしょう。

何はともあれ、この記事ではこのロゴをHTMLで好きな場所に入れれるようにCSSで書いていきたいと思います。

### まずは円から

手始めに円を一つ書いてみます。cssのbackground属性にradial-gradientを適用してみます。

“`html:index.html

Windowsショートカット集

#Windows
###Illustrator
| 記号 | 説明 | 小ネタ |
|:———–|:———–|:———–|
| Ctrl+K | 環境設定ファイルが開く | Kaleidoscope（万華鏡） |
| BackSpace | 削除 |
| Ctrlキー | 長方形ツールを選んでいるときでも、選択ツールになる |
| Spaceキー | グラバーハンドになる? |
| Altキー+クリック | ダイアログボックスが開く | Alternative（別の選択肢） |
| Ctrl+Yキー | プレビューモード |
| Altキー+ドラッグ | スクロール |
| Altキー+ホイール | ズーム |
| Ctrl+Shiftキー | ズームイン |
| Ctrl+Dキー | 繰

Safariのvideoタグ＋trackタグ

getUserMediaからstreamを取り出してvideoタグで表示していのだが、
どうも、SafariのVideoタグにtrackタグがあると動かなくなる。

“`

“`

だと動かない。

“`

“`
にしたら動いた。なかなか情報がなくて困った。

smartyでhtml形式の変数をhtmlとして表示する3つの方法

smartyでhtml形式の変数をhtmlとして
表示するための方法を調べていていくつかパターンがあり、
環境によって適応できる形式が異なるようなのでまとめました。

例えば

`$test = ‘こんにちは‘`

というhtml変数があったとして

\こんにちは\

ではなく

こんにちは

というように太字で表示させたい(htmlを反映させたい)時の出力方法です。

いくつかのサイトを見ましたが以下の3つのうち、1つしか書いていない記事が多く混乱したのでまとめました。
以下の3パターンを試せばどれかでうまくいくと思います。

– `{$test nofilter}`

– `{$test|smarty:nodefaults}`

– `{$test|unescape}`

もし他のパターンがあれば教えてください！

元記事を表示

Webページのviewportとは何か、今年こそ理解する

viewport、ちゃんと理解できておりますでしょうか。

それには歴史的経緯やスマホにおけるブラウザの実装などを追う必要があり、たくさんの記事を読むというしんどい過程を迫られることと思います。

この記事は、そうしたネットに転がる情報をまとめ、これひとつ読むだけで **「あ～なるほどね、だいたい理解した」** となれる道しるべ的なものとして書きました。2020年にしては少し古すぎる話かもしれませんがご了承ください。

なお、ぼく自身はフロント歴がほぼ0のぺーぺーです。RFCとか各ブラウザの実装、最近のドラフトではこうだよ～とかあればご教示いただけると幸いです。

# viewportを理解する

viewportはモバイル端末で使われる **レイアウトを計算するときの仮の領域** [^横幅] です。

[^横幅]: 本当は縦幅も含めた概念ですが、実装しているブラウザはないため本記事ではほとんど横幅の話しかしません。

これでほとんど説明はおしまいなのですが、この記事ではさらに

1. 歴史的経緯
1. 現在の状況
1. `meta` タグでの実践
1. 表示上のピクセル、デバイス上

元記事を表示

【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法

#どうも7noteです。疑似要素が効かない時の確認事項（永久保存版）

**「疑似要素が思っている箇所に反映されない！！」**

という悩みはあるあるじゃないかなと思っている今日この頃です。

そこで、**考えられるほぼ全ての原因をまとめました！**
たぶん考えられる全パターンあると思います。永久保存版としてお使いください。

## 疑似要素が表示されない時に確認する7つの事

### 1.contentが宣言されているか

“`css
p::before {
content: “”; /* ←宣言してますか？ */
}
“`

### 2.inline要素のまま高さを指定していないか

“`css
/* NG例 */
p::before {
content: “”;
background: #000;
width: 20px;
height: 20px; /* ←効かない */
margin-top: 5px; /* ←効かない */
}
“`

疑似要素はインライン要素扱いになります。そのためheight(高さ指定)や上下のmarginは効きません

元記事を表示

記号集

| 記号 | 説明 |
|:———–|:———–|
| [] | ブラケット |
| （） | サークルブラケット |
| {} | カールブラケット |
| : | コロン |
| ; | セミコロン |

元記事を表示