【初心者でもわかる】CSSで文字の上に点「・」をつけて強調させる方法

# どうも7noteです。こ・ん・な・か・ん・じ・に文字の上に点をつける方法

2種類の方法で文字の上に付けていきたいと思います。

## 方法１： HTMLだけで行なう方法

“`index.html

こ・ん・に・ち・は・

“`
**完成例**

こ・ん・に・ち・は・

ただ、タグの意味に対して使い方が間違っているので非推奨です。
``は本来漢字等にルビを振るためにあるタグなので、装飾や強調として使う使い方はあまり正しい使い方ではありません。

## 方法2： CSSの疑似要素を使っ

他の要素と重ならないように、ヘッダーを上部に固定

スクロールした時、他の要素と重ならないように、ヘッダーを上部に固定したい。

“` “`:html

.
.
.

“`

固定するためには position: fixedを使用し、
他の要素（文字など）と重ならないようにするためにz-indexを指定する。

“` “`:css

.header {
position: fixed;
z-index: 99;
width: 100%;
background-color: white;
}
“`

Pythonさえ分かればDjangoでWebアプリは作れる

この記事は[Django Advent Calendar 2020](https://qiita.com/advent-calendar/2020/django) の最終日の記事です。

# はじめに
はじめまして。

普段からDjangoを使用してWebアプリを開発しています。

– [シルトレンド](https://siru-trend.com)

今年もこの時期がやって来ましたね。
ちなみに、去年も同じ日に投稿させて頂きました。

– [Djangoの個人的Tips](https://qiita.com/Taro_man/items/3a0e6256db22d5e64a68)

今年の Django Advent Calendar 2020 も素晴らしい、そして実用的な記事が多く、
楽しく拝見させて頂きました。

個人的にDjangoの良さは**「簡単な」**アプリケーションを**「手軽に」**作れるところにあると思っています。
そこでこの記事では、簡単な、そして基本的な**Djangoアプリケーションを作る過程を**コードとともに記載したいと思います。

この記事がDj

Lightningにメニュー項目を追加(function.php/header.php)

#wordpressの無料テーマLightining
管理画面で設定できるメニュー箇所を追加する方法をご紹介

完成系は
有料版にあるヘッダー右上のヘッダーサブメニューを無料版Lightningに追加

ダッシュボードにも、ちゃんとメニューバーの設定項目が出力されます！

#functino.phpに追記
以下を追記
・header_sub :　任意の文字列
・ヘッダーサブメニュー : 外観＞メニューで表示される任意の文字列

“`php

register_nav_menus(array(
‘he

スキルアップの為のUdemy活用術と世界で60万人が選んだWeb開発入門講座の紹介

スキルアップを求めてここまで行き着いたみなさん！
新しい技術を習得したい、プログラミングを学びたい、web関連に強くなりたい！私もそんなスキルアップを求めるひとりです。この記事はここ半年間の自身の経験を元に、前半はスキルアップのためのUdemy活用術を、後半はweb開発入門講座と自作webアプリの実装について紹介します。本文最後には知っていると便利なリンク集が付いてます。

# どんな人向け？

– 本で勉強するのに飽きた人
– プロから系統的に何かを教わりたい人
– Web開発の基本を身につけたい人

# どうしてweb開発の勉強をするの？
– かっこいい自分のwebサイトが欲しい[^1]
– 研究室・プロジェクト・会社のwebサイト管理 or 製作を任された
– BootstrapのようなCSSフレームワーク使えるようになりたい

みなさん各々事情があるかと思います。Web開発の技術があれば、上記のようなニーズに答えられることはもちろん、その他にもこんなweb開発技術習得のメリットがあるかもしれません。

HTMLソースを見たいのに見づらい。。。

#はじめに
プログラミング初心者。
HTMLソースについて、まとめたので投稿しますわ。

#HTMLソースを見たい時?

###そもそも論として
ソースコード見たくなる時は、気になるサイトのここをパクリてえ?って時。
あれ、コピペして編集すれば似たようなサイトが作れるんとちゃう？？？?

自分の使っているパソコンはMacBook Proなので、Macでの見方を紹介。
①右クリック
②「（要素を）検証」をクリック
③ソースコードを確認?

うわあ！簡単だね！！！???（小並感）

よーし！これでたくさん見て学んでヤベえサイト作るぞぉ！！！

？？？？？

あれ、あれあれ？？？
###ソースがうまく見れない（読み解けない）んですけど、、、
調べてみたら、読み解けづらくする対策があったので紹介します。

#HTMLソースを見えづらくする方法?
###改行を取り去る
改行コードをすべて取り去ってしまうプログラムを作成します。

rubyが使える環境であれば、

“`
while (<>) { s/[\r\n]+$//; print; }
`

ウルトラソウルﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｲｯｯｯゲーム作った

#ウルトラソウルでもっとﾊｱｱｱｱｲｨｯｯｯｯｯｯしたい！
「そして輝く？」と言われたら皆さんはなんと答えますか？
そうですね、「__ｳﾙﾄﾗｿｳｳｩｯｯｯｯｯ　ﾊｱｲｨｯｯ__」ですよね。

でもその__ﾊｱｱｱｱｲｨｯｯｯｯｯｯ1回で足りてますか？？？__
「私、__もっとﾊｱｱｱｱｲｨｯｯｯｯｯｯしたい。。。一回じゃ足らない！！__」と悩んでいる方もいらっしゃるのではないでしょうか。
そこで今回はYoutube Player APIを利用して__たくさんﾊｱｱｱｱｲｨｯｯｯｯｯｯできる__ゲームを作ってみました。
ただﾊｱｱｱｱｲｨｯｯｯｯｯｯしても面白くないので、音ゲー要素をちょっと入れてみてます。
コードも是非是非ご覧ください！

Appは[ここから](https://haihaihaihaihaihaihaihaaai.ml/)
コードは[ここから](https://gist.github.com/canonno/e62f67c6fe77cafb8224b66edf4d568d)
[前回の記事](https://qiita.com/canonno/items/964b9ff

WHATWG Living StandardとHTMLパーサ

この記事は[ドワンゴ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/dwango) 最終日の記事です。年の瀬ですね。

# はじめに

本記事は、WHATWG Living Standardに準拠することを目的としたHTMLパーサである「[gammo](https://github.com/namusyaka/gammo)」の紹介を目的としている。gammoが実現していることを詳細に伝えるため、単なるgemの紹介に留まらず、HTMLの歴史や昨今のHTMLを取り巻く状況を簡単に解説し、WHATWG Living StandardにおけるHTML文書の解析アルゴリズムについて、実例と共に紹介する。

本記事で紹介するgammoの開発に取り掛かった理由は、主に以下の二点が挙げられる。

– [WHATWG Living Standard](https://html.spec.whatwg.org/multipage/)に準拠したHTMLパーサをRubyGemsの中から見つけられなかったため。
– 現在HTMLパーサの

HTML datalistタグでvalueと違う値をsubmitしたい

# datalistでvalueとは違う値をsubmitしたい

datalistタグはselectタグとはちがって、valueが表示されてしまう。
optionの中に書いても、valueの方が目立って表示されるし不便……
表示自体は「name1」などのテキストにしたい。でもpostするのは「id1」とか別の値が良いのよな～
そんな時は、jsごりごりして、post用のhiddenなinputを用意すれば簡単。

### やればよいこと
– js(今回はjquery)でごにょごにょする。
– data属性を使えば良い。
– submitする際は、hiddenなinputでpostすればよい。

## HTML
“`html:index.html

【初心者でもわかる】border付き下向きの吹き出しを作る方法

# どうも7noteです。枠線付きの吹き出しの作り方。

四角形を２つ使って吹き出しを作ります。
微調整しながら作らなければ、うまく線がつながらないので注意しましょう。

**完成イメージ**


## border付き吹き出しの作り方

“`index.html

ふきだしのテキスト

“`

“`style.css
.fukidashi {
color: #333; /* 文字色をグレーに指定 */
text-align: center; /* 文字を中央寄せにする */
min-width: 200px; /* 長くなっても大丈夫なようにmin-widthで横幅指定 */
background: #FFF;

フルサービスリゾルバをなんとなく可視化してみた

#はじめに
こちらは SLP KBIT Advent Calendar 2020 24日目の記事です．
他のサークルメンバーが面白い記事を多く書いているのでぜひご覧ください．

今日は12/24，もう少しでお正月なシーズンですね，うん．

#作ったもの
　今回作ったものはタイトルにもある通り「フルサービスリゾルバの可視化」です．見た目は写真のようになりました．
いきなりフルサービスリゾルバと言われても…という方がいると思うので，そちらから説明していきます．

#フルサービスリゾルバとは
　以下のサイトにこのように書かれています．
http://e-words.jp/w/%E3%83%AA%E3%82%BE%E3%83%AB%E3%83%9

メルマガの心得

今日の当番：ちむ

いろんなメーラーに対応するのは骨が折れます。
強い心をもって作成しましょう。

メディアクエリと縁を切る
–
メルマガにおいて、メディアクエリは信用なりません。
特に、スマホのブラウザでメーラーを開いたときなど、
「そうじゃない」ってなることが多いです。
なるべくレスポンシブしなくて済むような、シンプルなデザインにするといいでしょう。

Gmailの102KB問題
–
Gmailでは、メールの容量が102KBを越えると省略表示されます。
まあそれのせいでデザインが崩れるよ〜〜〜〜なんてことはたまにしかないのですが、
デザインの他に１つ困る場合があります。
それは開封タグを“`“`の直前に置いているときです。

メールの開封率なんかを測るためにちっこい画像を配置して、その画像urlにリクエストが飛ぶことで開封したかどうかをカウントするのはメルマガでよく見かける手法です。
しかし、この開封計測画像を“`“`直前に置くと、Gmailで省略表示されたときに、メールは開いているけど全体表示がされていないから開封にカウント

元記事を表示

【初心者】ハンバーガーメニューの詳細表示後のバーを装飾してみた

※この記事はプログラミング初心者が書いたものです。間違っている所があればどんどん指摘してください。

今回はハンバーガーメニューをクリックした際のナビバーの一覧をデザインする方法について書こうと思います。

前提条件

モデル名をpostsと定義。

フレームワークはRuby on Rails。

BootstrapはHTMLを書くだけで自動で最低限のデザインをしてくれる超便利な機能です。必ず記述しておきましょう！

“`application.html


<%= csrf_meta_tags %>
<%= csp_meta_tag %> 【CSS】画像を親要素内からはみ出さずに表示する

サイトをコーディングしていて、`div`にクラス`container`とし、下記CSSを指定した。

“`CSS:CSS
.container {
height: 600px
}
“`

その中に画像を設置。
しかし、画像の縦幅が600pxを超えており、親要素をはみ出してしまいました。　

##解決法
下記のプロパティを設定したら解決しました。

“`CSS:CSS
.container {
height: 600px
overflow: hidden; /*overflowプロパティを追加*/
}
“`

##overflowプロパティとは

領域内に収まりきらなかった内容を、どう処理するか、を指定するプロパティです。

**visivble**
領域をはみ出して表示する（デフォルト値）

**hidden**
はみ出した部分を表示しない　今回適用したのはコレです。

**scroll**
はみ出した部分は、スクロールバーを出して表示する

**auto**
自動

##まとめ
`overflow`プロパティは、
テキストの回り込み回避や、floatの解除にも使えるよ

元記事を表示

コンポーネント指向とは

# 概要
普段からマークアップ側で意識しているコンポーネント指向のイメージを
テキストで残しておこうと思い書きました。

# コンポーネント指向とは
そもそもコンポーネント指向とは、
webサイトにおける機能毎だったり、パーツ毎に作成し
それらを組み合わせて使うという考え方です。

実際にサンプルのサイトをイメージしながらやるとわかりやすいかもしれないです。

## サンプルのサイト
いらすとやで拾ってきたやつです↓

## どう分割するか
このサイトをコンポーネント指向で組んでいくと
大きく分けて
– header
– サイドバー
– 記事一覧
– ポップアップ
という感じになるかと思います。

こうすることで仮にこのサイトをトップページだと仮定して
記事詳細ページなどでサイドバーが必要だったり、ポップアップが必要だったりした

元記事を表示

ECサイトコーディングでよく使うcss

仕事でECサイトのフロントコーディングをさせていただくにあたって、度々目にするソースをメモ

# Masonry

– フッターでよく使うレイアウト
– https://codepen.io/Mimuko/pen/poEwMJE
– jsライブラリ：https://masonry.desandro.com/index.html

# 「…」で文章を省略
– https://codepen.io/Mimuko/pen/ExgXqyQ

# PCはテーブル、SPは縦積み商品カード
– https://codepen.io/Mimuko/pen/PoGGLzz

元記事を表示

CSSで重なり順を意識する

##はじめに
`z-index`を使うことははよくあると思います。
ですがちゃんと理解してないで使うと思った通りにならないということが多々あります。
実際私もなんとなくで使っていてハマりました…
なので自分でも理解できるようにまとめてみました。

##そもそもz-indexとは？
要素の重なり順（スタックレベル）を指定するCSSのプロパティです。
通常は後に書いた要素の方が上に表示されますが、`z-index`を使用することによって自由に優先順位を設定することができます。
書き方は以下のように記述します。

`z-index: 値;`

“`
z-index: 10;
z-index: 20;
z-index: 100;
“`
値は整数またはauto（初期値）を指定します。
指定した値が大きい要素ほど上に表示されます。

##どんなときに使う？
`position: absolute`や`position: fixed`で要素を重ねた時などに重なり順を指定するのに使うことが多いです。
`z-index`を使用するには、その要素に`position`プロパティで**static（初

元記事を表示

数値入力で input[type=”number”]を使ったら、ユーザから問い合わせが増えてしまった話

この記事は [SmartHR Advent Calendar 2020](https://qiita.com/advent-calendar/2020/smarthr) 23 日目の記事です。

こんばんは！ [@diescake](https://twitter.com/diescake) です。

今年は、React で「そこそこの規模で、そこそこ機能のフォームアプリケーション」を設計・実装する機会がありました。
技術選定で `formik` + `yup` を選んだので、その選定理由と結果を共有しよう！

……そんなふうに考えていた時期が私にもありました。

驚くほど筆が進まず、いつの間にやら当日どころか既に夜になってしまったので tips 的な話に逃げる運びとなりました。ご了承ください。

というわけで、数値入力フォームに何気なく `input[type=”number”]` を利用したら、ユーザから問い合わせが増えてしまった話です！

## input[type=”number”] とは？

今更説明するまでもないくらい基本的な要素ですが HTML において `input`

元記事を表示

【初心者でもわかる】CSSで立体文字を再現する方法

# どうも7noteです。CSSで3Dの文字を再現するには。

基本的にwebサイトは平面ですが、立体感のある表現をしたい時にちょっと無理やりですが文字を立体にさせることができます。

**見本**

## 立体文字の書き方

“`index.html

777

“`

“`style.css
.text {
font-size: 30px; /* 文字サイズを30pxにする */
font-weight: bold; /* 太文字にする */
text-shadow: 1px 1px 0 #666,2px 2px 0 #666,3px 3px 0 #666; /* 影を3重に指定 */
}
“`

正確には立体ではなく、あくまでも立体に見せかけているだけですが、パッ

元記事を表示

VScodeでPHPにコードユニペットを登録・追加する方法

開発に必須で何回も打つこいつ。

“`php:qiita.php
var_dump($qiita);
“`

簡単に予測変換してくれないから登録した！

#コードユニペットに登録する

##PHP.jsonファイルを見つけ出す

Code > Preferences > User Snippets
検索窓に「PHP」と入力して

“`
PHP.json(PHP)
“`

を開く。

そしたらこんな内容のファイルが開かれる。

“`php:php.json
{
// Place your snippets for php here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab

元記事を表示