f@ctor

今さら聞けないHTML　2019年12月08日

今さら聞けないHTML　2019年12月08日
目次

reactで横幅で別物のHTMLを出す

#なぜやるのか
とあるプロジェクトで、結構厳密なデザインHTMLをBootstrapのレスポンシブで対応を試みた所、かなり期待通りの動きをしないので、Bootstrapを捨ててReactで画面サイズによって見せるHTMLをそもそも変えようと思った。

#用意したもの
react（本体）
react-responsive　（MediaQuery関係）
react-snap (react プリレンダリング）
ソースはこちら
https://github.com/UG/reactResponsiveTest

##PCサイトの見栄え　（例）
![pc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269117/349717c1-ec19-ca30-52d3-22c7163b6623.png)

##スマホサイトの見栄え（例）
![sm1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269117/30e6511f-e905

元記事を表示

GitHub Pages で静的ページを公開するまで

CSSのお勉強がてら、HTMLとCSSだけで静的ページを作ってGitHub Pagesで公開してみた

備忘録として書くぞ〜

# やること

– GitHubで公開リポジトリを立てる
– ソース等をプッシュする
– リポジトリのSettingsからGitHub Pagesの項目へ移動し、Sourceを設定する

これだけ。

**これだけ。**

簡単すぎる。

# 詳細な手順

流石に内容がないようすぎるので、後からすぐにわかるように画像つきで。

まずは公開でリポジトリを作るぞ。
Repository nameがURLになるからそれっぽい名前をつけておこう。
img2.png

あとは作りながらプッシュしていく。
VisualStudio Codeならエディタ内だけでGitの操作が完結するのでめちゃ便利。

元記事を表示

filter()とfind()の違い

# find()
jQueryオブジェクトの各要素の子孫要素を対象として要素を絞り込む

例

“`html

“`
“`js
$(‘.parent’).find(‘.child’);
“`

この場合の対象の要素は⬇️

“`html

“`

# filter()
jQueryオブジェクトの各要素を対象として要素を絞り込む

例

“`html

“`
“`js
$(‘.parent’).filter(‘.child’);
“

元記事を表示

HTML classの書き方　どっちの方がいいのか

①

学べるレッスン

②

学べるレッスン

section-titleというクラスをh3要素につけなさいと言われたので最初②のやり方で書いたら怒られました。
答えをみると①の記述があったのですが、なぜ②の書き方じゃいけないのですか？

元記事を表示

日本語Markdown文書をPandocする際に「余計な空白」をどうにかしたい

これは「[Pandoc Advent Calendar 2019](https://adventar.org/calendars/4338)」の8日目の記事です。
（7日目は [niszet0 さん](https://niszet.hatenablog.com/entry/2019/12/07/000000) です。）
（9日目は skyy_writing さん です。）

ご存じの通り、Markdownにおいては「**入力における段落[^paragraph]内の改行は改行にならずに空白と解釈される**」という規則があります[^objection1]。例えば、次のようなMarkdown文書[^udhr]があったとします。

[^paragraph]: 原則として、Markdownでは文章を空行で区切った各々の部分が段落となります。
[^objection1]: 異論については冷蔵庫に入れてカチカチにしちゃいましょう。
[^udhr]: 文章は「世界人権宣言」の第1条です。

“`markdown
All human beings are born free and equal
in

元記事を表示

横に1行で並べるスクロール可能なリストをCSSのみで表現

# はじめに
横に1行で並べるリストは「カルーセル」が有名で、多数のパッケージやライブラリが存在します。
一方で、スマートフォンでの操作はスワイプになるので、単純にスクロールできるだけで良い場合もあります。

以下では、横にスクロールができるメニューを作る想定でサンプルを紹介します。

# リストを横に並べる
まず、リストを横に並べます。

“`html

  • item1
  • item2
  • item3

    • …

“`

“`scss
ul {
/* reset ul */
margin: 0;
padding: 0;
}

.horizontal-list {
&__list {
display: flex;
}
&__item {

元記事を表示

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

# 100日チャレンジの178日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

178日目は

あなたのdiv、多すぎですよ?【セクショニングコンテンツを攻略せよ】

*googleはdivの意味を理解できない（そもそもdivに意味はない）
クローラーに正しくコンテンツを認識してもらうため、きちんとセクショニングコンテンツを利用せよ*

今回の趣旨は簡単に言うと、上記の通りです。

例えば、下記のコードですが…

“`html

home
about
recruit
blog
contact

元記事を表示

【Flexbox】display:flex; justfy-content:space-betweenで左詰めしたい。

#space-betweenめっちゃusefulやけど。
カードUIを作りたい時に困った話。

## 2カラム横並びの場合
![f05f5244f7bedf60d798047c59574ff1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542762/6c3395ee-d5ee-b90b-6bc7-6e2efbbaeb0f.png)

“`html

“`
“`css
.wrap{
display: flex;
justify-content: space-between;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.wrap .item{
/* 50%←カードが2枚なので(100/2%)。

元記事を表示

謎のスペースを殲滅する

# 事の始まり
コピペした内容をテキストボックスに貼り付けて、
送信ボタン押下したら、処理が通らねぇ。

# 何が起こった
見えない文字がある。
コピペ元のHTMLソースを見ると`​`なるものが。

# `​`
調べると、ずらずらと記事が出てきます。
**ゼロ幅スペース**
なるものだそうです。

# 対応について
こんなものがたくさんあったら、対応仕切れないよぅ・・。

と思って調べていたら、
まとめてくださっていた方がいらっしゃいました！
[\sが完全には空白文字を網羅できていなかった件](https://www.pandanoir.info/entry/2018/03/11/193000)

神かっ

要点をかいつまむと、
**`\s`で対応していないホワイトスペース文字がたくさんあるよ!**

というわけで、二番煎じ感すごいですが、コードにします。

# コードにする
“`js:正規表現のところだけ抜粋
export const unmanagedSpaces =
‘\\u001c-\\u001f\\u11a3-\\u11a7\\u180e\\u2

元記事を表示

React, Components, and Design

## What is React and why?
I am a designer who studies & uses React.js for developing UI and UX in the front-end development team. In our team, we are using React.js for developing our application admin panel(**管理画面**). React is a component-based JavaScript library for developing user interface. It helps in building & handling a big application efficiently and as far as I can tell, react is the best library to connect **designers** and **developers**.

私は、フロントエンド開発チームでReact.jsを使用するデザイナーです。私たちのチー

元記事を表示

さぁ、サイトを下からグイッっとパンしてサイトのロゴがドーン！する新しいjQueryプラグインを考えてみた

サイトのロゴはそのサイトを表す重要なものです。ただレイアウト的にはサイトの上部にちょこんとあるぐらいで、いろいろなサイトを見慣れてる人は スルーしているかもしれません。しかしせっかく作ったんだから見てほしい！そのニーズに答えたのがこのプラグインです。
デモ

どのようなものかこちらのデモをご覧ください。確認ブラウザはこの記事を書いた当時のIE・Firefox・Chromeの最新版です。

standup.jsのデモ

これでバッチリ、サイトのロゴがアピール出来ましたね。

## 使い方

以下のライブラリを読み込みます。

“`html