見出しテキストに蛍光マーカーを引いたデザインを作りたかったが、横全体にCSSが適用されてしまう

# はじめに

こちらは、[エンジニアの新たな学びキャンペーン](https://qiita.com/official-events/716dbcb617afc83e9555)に向けた記事となります。

[ざっくり理解するHTML5・CSS3　｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！](https://www.udemy.com/course/html5css3-n/)を含む、いくつかのコンテンツを参考にしながら、
ブロックレベルとインライン要素の違いについて、学習したことを記事にします。

# 今回、問題になったこと
次の画像で示すような、まるで蛍光マーカーを引いたかのようなデザインの見出しを作成しようとしました。


しかし私が書いたHTMLとCSSでは、そうはいきませんでした。
テキスト部分だけ強調される

「lazyload 対応」スムーズスクロールの書き方

#どうも7noteです。lazyloadを入れていてもスムーズにページ内リンクできる方法

以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。

もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず
画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。

ですがjQueryのwhenを使うことでこの問題を解決することができます。

## lazyload対応スムーズスクロールの書き方

※jQueryを使用しています。jQueryってなんだという方は[こちら](URLURL)

“`
$(function () {
$(‘a[href^=#]’).click(function(e) {
var headerHight = 50; /* ヘッダーの高さ(50px) */
var href = $(this).attr(“href”);
var target = $(href == “#” || href =

position: sticky;で固定ヘッダをらくらく実装

# 実装

1. 固定させたい要素に`position: sticky;`を付与する
2. 固定させる位置`top: 0;`を指定する

footerの場合は`bottom: 0;`とすれば下に固定されます。

“`html:HTML

ヘッダ

メインコンテンツ

“`

“`css:CSS
.ly_header {
position: sticky;
position: -webkit-sticky;
top: 0;
}
“`

【カンタン実装】aタグ押下でYoutube動画をポップアップ表示させる

# 概要
・以下のGIFのようなことができます。
（Youtube Linkという文字をクリック→Youtube動画がポップアップ表示→✖︎で閉じる）

・Magnific_Popup　というjQueryを使います。

# 実装

## 1.Magnific-Popupのファイルを入手
https://github.com/dimsemenov/Magnific-Popup/
にアクセスし、ZIPファイルをダウンロードします。

【JavaScript】英単語数をカウントする

わりと簡単に作れると思っていましたが、
スペースがあったときに1カウントとすると、スペースが2つ続いたときも1単語としてカウントされてしまうことに頭を悩ませました。

# 解決策

### HTML
“`html


“`
### JavaScript
“`javascript
const input = document.getElementById(‘count-area’);
input.addEventListener(‘keyup’, countWords);

function countWords() {
// \S+の意味は「空白、タブ、改行以外が1回以上続く」
const spaces = input.value.match(/\S+/g);

let words;
if (spaces) {
words = spaces.length;
} else {
words = 0;
}

docume

Mapbox入門

#Mapboxを使って地図を表示

###CDN

“`html
“`
###[Mapbox GL JS](https://account.mapbox.com/) / [マイアカウント](https://account.mapbox.com/)でアクセストークンを取得

“`js
mapboxgl.accessToken = ‘hoge’;
“`

##mapboxglのMapオブジェクトを生成（インスタンス化）

“`js
const map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://hoge’,
center: [

Safariでのonchangeが発火しない場合の対処法

## TL;DR

Safariではなぜかinputのchangeを拾えないことがある（リロード時の挙動により差分を検知出来ない事があるんだと思う）
その場合はonclickイベントでinputのvalueを空にしてやればよい
onclickはonchangeよりも先に発火するのでこれで常にnullと比較でき、変更を検知できる

“`javascript
const input = document.createElement(‘input’);
input.type = ‘file’;
input.onclick = () => {
this.value = null;
};
input.onchange = () => {
// なんか処理
};

Adobe Target RecommendationsのDesign記法について(基本編)

Adobe Target ではA/Bテストやパーソナライゼーション機能に加えて、レコメンデーション機能もあります。(Premium 契約が必要ですが)

[Adobe TargetRecommendations | Adobe Target](https://experienceleague.adobe.com/docs/target/using/recommendations/recommendations.html?lang=ja)

レコメンデーション機能を使うにあたって、必要な設定の一つであるレコメンデーションが入ったオファーを作るためのDesign(HTMLなど) を設定する為の記法についてまとめてみました。

## Design の基本的な書き方

基本的にはヘルプに色々と説明が書いてあります。が…非常に量が多いので、かいつまんで説明をしていきますね。とりあえずWeb(HTML)を使った場合を想定してまずは話しします。

### その1. マーキング文字を入れて埋めていく

一番シンプルなのはAdobe Targetがレコメンデーション情報を入れる為のマーキング文字を埋め

ヘッダーも内容も高さが決めれない場合の２カラム

####【忘備録】
ヘッダーも内容、どちらの高さも決めれない場合のフレキシブな２カラム。

####【経緯】
システム系の開発していると、ユーザの入力内容によって要素の量が異なるため、
ヘッダーやメインのwidth(幅)やheight(高さ)を固定値で決め打ちするのが難しい。

これではヘッダー固定値にしてその固定値から計算して高さを出すやり方が使えなかったりする。

js使ったら現在値取得して簡単にできると思うけど、そんなのいちいち作りたくないし、
なんとかならないものかと考えに考えた挙句、これならどうだ！的なのを閃いた。

####【結果】

“`html:html

　
　

　　

ロゴマークなど

　　

この要素は2行にも3行にもなるため高さ可変なると仮定

　

　
　

　　

　　　

　　　　
• menu1

　　　　

• m

【HTML】頻度高めのHTMLタグ早見表

# 頻度高めのHTMLタグ早見表

## 基本構造
| タグ | 説明 |
| —- | —- |
| DOCTYPE | 使用するHTMLのバージョンを指定する |
| html | HTMLの文書であることを示す |
| head | HTMLのヘッダ情報で、ページの情報を記載する |
| meta | ページのメタ要素(文字コードや説明文など)を指定する |
| title | ページのタイトル(ブラウザのタブに表示される)を指定する |
| link | 参照する外部ファイル(CSS,JSなど)をロードする |
| body | HTMLのコンテンツ部分で、ブラウザに表示される |

## コンテンツ
| タグ | 説明 |
| —- | —- |
| h1 ~ h6 | 見出しを表示する(基本的には数字順に使用する) |
| p | 文書の段落をつける |
| img | 画像を挿入する |
| a | ハイパーリンクを挿入する |
| ul | 順序なしのリストとして表示する |
| ol | 番号付きのリストとして表示する |
| li | リストの項目を

対応ブラウザをIEからChromeに変更する時の注意点その３(アドレスバーの非表示)

# 対応ブラウザをIEからChromeに変更する時の注意点その３(アドレスバーの非表示)

対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。

# 発生問題点
IE表示時はアドレスバーを非表示としていたが（＊１）、Chromeではアドレスバーが表示されてしまう。

＊１：window.open()のオプションlocation=noで指定していた

# 環境
* __OSはWindows10__
* バージョン：1803(OSビルド17134.407)

* __Microsoft Internet Explorer__
* バージョン：11.407.17134.0
* 更新バージョン：11.0.95(BK4466536)

* __Google Chrome__
* バージョン：76.0.3809.100(Official Build) (64ビット)

# 解決方法
アプリケー

パンくずリストを作成する

[パンくずリストの構造化データの書き方](https://cluster-seo.com/blog/structured-data-for-breadcrumb.html)

Vue.jsの基本的な使い方　備忘録

#Vue.jsを使うには
HTMLファイルでVue.jsをCDNを用いて直接読み込む場合、ソースコードは上から下に読み込まれて行くのでbodyタグの一番最後の記述する。

“`ruby:HTML

⇦　divタグにid=appと指定することでappの部分は任意の文字でOKです。
　　　

“`

jsファイルで「 var app = new Vue 」と変数化することでコンソールからアクセスすることができる。

“`ruby:js
var app = new Vue({
el: ‘#app’,
})
“`

##v-if
真偽値を用いて要素を表示・非表示の切り替えを行う。要素自体を生成/破

【初心者でもわかる】お知らせマークや未読件数をつける方法2選

# どうも7noteです。新着のお知らせなどがあった時に丸いアイコン等を付けてクリックやタップを促す方法

スマホの普及もあり、画像に小さいアイコンがつくようなデザインを多く見かけるようになりました。
さっそく丸いアイコンを付けたいと思います。また数字が入る場合は桁数が増えるも考慮して考えます。


## 文字や記号入る場合の綺麗な作り方の例（疑似要素を使用）

“`index.html

お知らせ

“`

“`style.css
.news {
/* ボタンっぽいデザインを入れる */
width: 70px;
padding: 3px 5px;
border: solid 1px #000;
border-radius: 5p

デイトラWeb制作コース初級編DAY6の学び

# 【この記事に書いてあること】

プログラミング学習6日目⏩

Web制作コース 初級編DAY6?

学習時間:3時間23分⏳

学習内容:ゼロからサイトを作る②✏

学び?
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ inputタグのrangeの値(value)が文字列でドハマりした話

``

こいつの`value`を使っているときに、意図しない動作に遭遇し、追っかけてみたら、文字列でした・・・(;・∀・)
仕様はちゃんと読みましょう。ってことですね。。。

# `input`タグの`range`のイメージ

こんな感じのコントロール（文字列は別）：

# うまくいかなかった箇所をさらしてみる

`curHue1 = hue1.value;` とか代入しています。

“`js

let diffHue = newHue0 – curHue0;
curHue0 = newHue0;
console.log(“diff hue:”);

元記事を表示

Angular の Binding 備忘録

～BindingはAngularの重要な概念の1つです～

AngularのBindingについて改めて調べることがあったので、備忘録として。
ざっくり大筋のイメージを書いてあるので粗さには目をつぶってほしい。

#AngularにおけるBindingとは
component(TypeScript)とtemplate(HTML)間で情報を渡すこと。
AngularのBindingは他のフレームワークと比べて簡単。
ビューモデルなど難しい定義は必要ない。

Angularには大きくわけて3つのBindingタイプがある。
1.Data Binding
2.Event Binding
3.Two-way Binding

##1.Data Binding：データバインディング
TypeScriptからHTMLにデータを単方向に送るバインディング。
Data BindingにはInterpolation(補間) Binding とProperty(プロパティ) Bindingがある。

####〇Interpolation Binding (補間バインディング)
Interpolatio

【HTML】コピペでできる入力フォーム

# 記事の対象者
* HTMLをあまり触ったことがない人
* とりあえずHTMLの雛形が欲しい人
* これからフロントエンドの勉強がしたい人

# コピペでできるHTML
### HTML雛形

“`HTML:index.html

Hello World!

“`
表示結果

### 見出

laravel 背景画像を固定化させる方法

#はじめに
1. 今回、久々にHTML CSSを編集して画像を背景にしたいと思い備忘録で投稿させて頂きます。
1. 画面をスクロールしても背景は固定化されている。
2. 背景の大きさは画面一杯に設定します。
3. Asset関数を使用してフォルダを参照します。
3. 写真素材はこちらでDLしました。[写真AC](https://www.photo-ac.com/)

#HTMLの編集
HTMLとCSSを結びつけるasset関数を記述して下さい。
` `
これをhead内に記述して下さい。

“`sample.blade.php




//これを記述し

デイトラWeb制作コース　初級編DAY5の学び

# 【この記事に書いてあること】

プログラミング学習5日目⏩

目標:Web制作コース 初級編DAY5?

学習時間:2h27min⏳

学習内容:ゼロからサイトを作る✏

学び?
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前＋用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa

— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi)