f@ctor

今さら聞けないHTML　2020年07月27日

今さら聞けないHTML　2020年07月27日
目次

CSSでプリンを作ってみた

#はじめに
昔ながらの喫茶店に行くのが好きなのだけれど、ここ数ヶ月コロナの影響で行くことができずにいる。
そろそろ喫茶店のプリンが食べたいし、そろそろ苦手なCSSも克服したい。
というわけで、CSSでプリンを作ってみた。

#?

See the Pen 【初心者でもわかる】インライン要素に指定できないcss

# どうも、7noteです。インライン要素に指定しても効かないcssの話。

cssってたくさんありすぎて、どれがどう反映されるのか覚えるだけでも大変なのに、
要素によっては効かないものまであるという初心者にはかなり厄介なものかなと思います。

今回はそんなcss初心者の人向けに**「インライン要素には効かないcss」**をまとめて紹介していきます。

## インライン要素に指定しても効かないcss一覧

#### ・ margin（の上下）
“`間違った記述.css
span {
margin: 100px 0; /* ← 効きません */
}
“`
インライン要素にはmarginの上下を指定することはできません！
親要素のブロック要素に指定するか、「display: inline-block;」「display: block;」を当ててインライン要素ではなくしてからなら効きますよ。

#### ・ margin（auto）
“`間違った記述.css
span {
margin: 0 auto; /* ← 効きません */
}
“`
インライン要素にはmarginのaut

元記事を表示

textareaの文字を色分けする（しているように見せる）方法を考えてみた

codepenやGASのエディタでは、入力された文字は次々と色分けされていきます。本記事ではそんな機能を、つまり入力された文字をそれぞれ色分けする機能を、JavaScriptのライブラリを駆使して「簡単に」再現してみようと思います。…再現と書きましたが、原理は根本的に異なるものであるということはあしからず。
> ![sfdfg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532858/d44b8088-c30b-ec42-efae-db2931f7b50c.png)
> サンプルのスクリーンショット
> CSSを入力したら、こんな具合に色分けする。

###必要なもの
– [highlight.js](https://highlightjs.org/) (JavaScriptライブラリ)
– JavaScript/CSSについての最低限の知識

#0. はじめに知っておくべきこと
ご存知の方もいらっしゃるかもしれませんが、textarea内の文字をそれぞれ別の色に変えることは**できません**（tex

元記事を表示

初心者によるプログラミング学習ログ 382日目

#100日チャレンジの382日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
382日目は、

ブロック要素とインライン要素

ブロック要素の幅は親要素の幅一杯に広がる。
インライン要素の幅はコンテンツ幅に依存する。
インライン要素の中にブロックレベル要素を配置することはできない。

元記事を表示

静的サイトでサイトマップ/RSSを生成する

[あおやぎのさいと2.0](https://www.saoyagi2.net/)という個人サイトを HTML 手打ちの静的サイトで運営しています。静的サイトであってもサイトマップとか RSS とかは出力したいのですが、さすがにそれらまで手打ちで作っていたら面倒でしょうがない。ということで、こんな簡単スクリプトを作って生成しています。

“`Perl:mksitemap.pl
#!/usr/bin/env perl

use strict;
use warnings;

use POSIX ‘strftime’;

print <<'XML';

XML

foreach my $file (`find . -name “*.html”`) {
chomp $file;
$file =~ s!^\./!!;
my @stat = stat($file);
my $lastmo

元記事を表示

aタグで作ったボタンでPOST送信する

##はじめに
PHPのフォームで値を送信する際、aタグで作ったボタンでも送信する方法です。
自分が実装する際に困った箇所もまとめます。

###なぜaタグで送信する必要があったか
・inputタグ（type=”submit”）ではデザイン通りに実装できなかったため。
・formの外のボタンはaタグで実装されており、サイト・システム全体でボタンのスタイルや挙動を統一したかったため。

##ソースコード
**名前**と**メールアドレス**を送信するフォームを例に。
index.phpでフォームの値を送信してフォーム上に値を表示させてみます。

“`form.php

元記事を表示

HTML入門（自分向けメモ）

!エンターでのHTMLの雛形が自動作成される。

“`





Document



“`

元記事を表示

初心者によるプログラミング学習ログ 381日目

#100日チャレンジの381日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
381日目は、

javascriptを使って簡単な計算機を作るpart5 入門者向け

#計算機を作る

##今回作る機能
・クリアボタンと小数点ボタンの追加
・クリアボタンでテキストボックスの値をリセットする機能
・入力できる文字列や文字数などの制限

これらの機能実装するにあたり、スタイルの変更を行った。

##ボタンの追加とスタイルの変更
(スクリーンショット)
スクリーンショット 2020-07-21 12.24.07.png

CLEARボタンで、テキストボックス内の値をリセットすることができる。

RECORDボタンは、今後追加するであろう計算結果をリストに追加するためのボタンを前もって配置しておいた。

##入力できる文字列や文字数などの制限
###意図しない文字列
(制限済み)・最初に記号ボタンが押せてしまう
(+ – * / . =)

(制限済み)・記号ボタンを連続で押せてしまう

元記事を表示

Vue.Js マウスオーバー(mouseover)で画像をゆっくり表示

VueJs初学者のちょっとした倉庫です。~~簡単だけど~~シンプルだけど使えそうな表現を目指しています。

#マウスオーバーで画像がゆっくり表示される
←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

![VueJsmouseover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679465/deedee9d-0353-cdf2-6117-62372d62e843.gif)

#ソース

“`html:shuffle.html



元記事を表示

validate.jsを使ってクライアントバリデーションを設定してHTMLで躓いた話

# 結論：input type=numberは電話番号や郵便番号に使ってはいけないよという事。

### やりたい事
– テキストボックスに全角文字、半角英字、「0」で始まる数値を入力できないようにする
– 「0」始まる数値が入力された時はvalidate.jsを使ってフォームを送信できないようにする

### 参考
> input type=”number”の落とし穴 – “number”を使うと先頭の0が認識されない
> https://plustrick.com/input_type_number/
validate.js
> https://validatejs.org/
jQuery Validation 独自のルールを追加する
> https://symfoware.blog.fc2.com/blog-entry-2354.html

### HTML

`input type=text`で全半角英字・全角数字を入力できない関数をJsで作ってみたけど、テンキーで数字が入力できなかったり、tabキーを使えないなど、様々考慮する事があったので、ここは手っ取り早く`input t

元記事を表示

【初心者でもわかる】インライン要素とブロック要素でそれぞれの中央寄せの方法と、中央寄せする時の考え方の違い

# どうも7noteです。インライン要素とブロック要素では中央寄せの考え方が違うお話。

中央寄せにするとき、いくつかの方法がありますが間違えずに使いこなせている自身はありますか？
中央寄せといっても、marginを使うこともあれば、text-alignでcenterを指定することもあります。

その中でも初心者の方が特に躓きやすい**ブロック要素とインライン要素では中央寄せの仕方が異なる事と、中央寄せする時の考え方の違い**について解説していきたいと思います。

## ブロック要素とインライン要素の違い

今回の話をする上でブロック要素とインライン要素の違いを理解していなければかき分ける事ができないので、まずは簡単にこの要素の違いを理解しておきましょう。

### ブロック要素
（div, p, ul, li, hタグなど）

– 横幅、高さを指定できる
– marginは4方向とも指定できる。

### インライン要素
（a, span, img, brなど）

– 横幅、高さを指定できない
– 上下にmarginを取ることはできない

他にも違いはありますが、関係してくる事は上記

元記事を表示

ノンフレームワークなJavaScriptでもDOMとうまく付き合う方法

ReactやVueなどのフロントエンドフレームワークが全盛期を迎えているJavaScriptですが、様々な制約から導入を足踏みしているプロジェクトは多々あると思います。

そして、そのようなプロジェクトではおそらくjQueryが現役で使われており、フロントエンドのコードはスパゲッティと化し、ネストされたコードは可読性を落とし、どの関数がどこで使われているのかわからない、そんな状態に陥っているのではないでしょうか。

この記事では、そんなプロジェクトを対象に、ノンフレームワークでも出来る限り可読性を向上させるための工夫をまとめてみました。

### JavaScriptからHTMLをできるだけ触らない

#### JavaScriptとDOMは密結合になりがち

JavaScriptとDOM・HTMLの密結合がスパゲッティ化を招きます。逆に、JavaScriptとDOMを疎結合にしてしまえばスパゲッティ化しにくいといえます。

JavaScriptはHTMLによって運ばれブラウザで実行される言語なので、JavaScriptとHTMLを完全に分離することは不可能です。ただし、アプローチの仕

元記事を表示

初心者によるプログラミング学習ログ 380日目

#100日チャレンジの380日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
380日目は、

Vue.Js　リストにマウスオーバー(mouseover)すると文字が拡大され、値を取得する

VueJs初学者のちょっとした倉庫です。~~簡単だけど~~シンプルだけど使えそうな表現を目指しています。

#カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

![VueJsPickUp2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679465/5dd714a0-e37b-e388-b533-6de946491873.gif)

画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記：それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224ca

#ソース
“`html:shuffle.html


元記事を表示

リンクを別タブで開かせる方法（注意点）

#aタグとtarget属性

**リンクを貼る**

“`index.html

“`

1.同じタブで開く　target=”_self”　　省略可能

2.別タブで開く　target=”_blank”

##target=”_blank”　使用する際の注意点

“`index.html

“`

あまり良くない記述

“`index.html

“`

**rel=”noopener noreferrer”を追加するだけ**

###詳しいことは[参考サイト](https://wwg.co.jp/blog/3807)に載ってます。

元記事を表示

OTHERカテゴリの最新記事