- 1. あいうえお
- 2. あいうえお
- 2.0.1. select タグ 文字列 中央よせ
- 2.0.2. APIを使い郵便番号から住所を検索するWebサービスを作成する
- 2.0.3. 春なのでさくらの花と花びらをCSSで再現
- 2.0.4. フォーマッター色々
- 2.0.5. css OMG
- 2.0.6. [CSS] width:100% と width:auto の違い
- 2.0.7. rubyでinteger型の変数をカンマ区切りで表示する
- 2.0.8. [検索機能]検索機能におけるURLの特徴と活用例
- 2.0.9. 1pxより細く
- 2.0.10. プログラミングスクールの後半で考える、デザインについて
- 2.0.11. railsのfile_fieldにおける画像アップロードボタンのデザインの変更方法
- 2.0.12. buttonタグ忘れそう
- 2.0.13. HTMLとは、コードの記述
- 2.0.14. 【PHP】GET・POST サーバー 作成
- 2.0.15. いまさらindex.htmlのhrefは省略できることを知った
- 2.0.16. Chormeでクリックした要素に枠線が付く現象
- 2.0.17. ダメなことはないけど避けた方が楽になるCSSの書き方
- 3. このページのタイトル
CSS~擬似要素と擬似クラス~
今回はCSSで使用する、疑似要素について学習していきます。
#疑似要素とは
指定している要素の特定の部分にスタイル付けすることができます。“`index.html
あいうえお
“`
“`style.css
h1 {
color: red;
}span {
color: blue;
}
“`#疑似クラス
HTMLをいじることなく要素を作ることができます！“`index.html
あいうえお
“`
“`style.css
h1::before {
content: ‘いぇあ！いぇあ！’;
}
“`
あいうえおの直前にいぇあ！が出ます。
疑似クラスには他にも、active,hover,checkedなどがあります。#疑似クラスを使うメリット
①HTMLの文章構造を変えることなく見かけ上の要素を追加することができる
②あとから追加することができる。
③コピペされたくないとき（？）
となります。具体的な使い方は次の記事で触れていきたいと思います！！
select タグ 文字列 中央よせ
selectタグの文字列の中央よせはかなり難しいです
`text-align` や `display: flex` などのよくある中央よせ表示ができないからですなので **`text-align-last: center`** を使用します
※ 全てのブラウザーに対応している訳ではないので、対応ブラウザの範囲内か確認しましょう
[*text-align-last 対応ブラウザ*](https://caniuse.com/?search=text-align-last)APIを使い郵便番号から住所を検索するWebサービスを作成する
# 概要
本記事では**郵便番号データ配信サービスzipcloud様**が提供するAPIを用いて，7桁の郵便番号を入力すると住所が検索できるWebサービスの作製法を記載する．
# ブラウザで様々なパターンのJSONを表示検証してみる
下記URLの後ろに様々な文字列を連結してブラウザでアクセスしてみる．
`https://zip-cloud.appspot.com/api/search?zipcode=`* **実在する郵便番号`1050011`を連結**
[https://zip-cloud.appspot.com/api/search?zipcode=1050011](https://zip-cloud.appspot.com/api/search?zipcode=1050011)
**住所の詳細が表示された．（ステータスコード: 200）**“`json
{
“message”: null,
“results”: [
{
“address1”: “東京都”,
“address2”: “港区”,
“address3”: “芝公園”,
春なのでさくらの花と花びらをCSSで再現
# どうも7noteです。さくらの花と花びらをCSSで再現
（cssで作った花と花びらの見本）
再現シリーズ、季節に合わせていろいろ作っていきたいと思います。
季節に合わせたサイトとかって個人的にめっちゃ好きです。きれいなデザインやわかりやすい構成のWEBも素晴らしいと思いますが、どこかに造り手の遊び心が入っているサイトって素敵だなって思います。そんなサイト作りができるクリエイターになりたいものですね。
ではでは日本の春といえば桜?かなと思ったのでさくらをCSSで再現していきます。
##
フォーマッター色々
※ html formatter
https://webformatter.com/html※ html beautifier
https://beautifytools.com/html-beautifier.php※ css formatter
https://codebeautify.org/css-beautify-minify
css OMG
#### footer固定したい
positionをabsoluteや、width:100%で試した
[CSS] width:100% と width:auto の違い
# はじめに
質問されたときにパッと答えられなかったので記事にまとめました！
## width: 100%とは？
widthにpaddingとborderは含まれない
widthの幅指定にpaddingとborderが含まれないため、HTMlの子要素にwidth:100%を指定したうえで、paddingとborderを指定してしまうと、親要素から子要素がはみ出て画面に表示される
### サンプルコード
“`html
children.parent {
width: 400px;
height: 200px;
background-color: red;
}.children {
width: 100%;
height: 150px;
border: 10px solid blue;
background-color: yellow;
}“`
### デザイン
** で表示しようとしていたが、別件のエラーを直そうとしていたところ、
この記述で下記のエラー“`’to_s’: wrong number of arguments (given 1, expected 0) (ArgumentError)“`
(このエラーについては解決策はネットに乗っていたが、ちょっとわかりずらかったのでやめました)
コードって好みが出るますねぇ、、、が出たので、別の記述で応急処置を施しました?
**応急処置コード**
“`インスタンス変数.to_s.gsub(/(\d)(?=\d{3}+$)/, ‘\\1,’)“`
正規表現を使った記述ですね、詳しいことは気にせず、使えるものは使います笑
いずれか深掘りしてみようと思う。。。今回はインスタンス変数をカンマ区切りにしたかったので、インスタンス変数先頭において解決
## 参考文献
http://rubytips86.hatena
[検索機能]検索機能におけるURLの特徴と活用例
# はじめに
世の中にはGoogle,Yahoo等検索サービスがたくさんあります。
さらに、検索サービス以外のwebサービスでも、Youtube,Twitter等それぞれの中での検索機能を持っているものがたくさんあります。
それらの多くにはあるURLの特徴があります。# URLの特徴
Googleで”Qiita”を検索する場合、”Qiita”を入力欄に入れたうえで検索処理を実行します。
その結果は以下のように検索結果ページに遷移し表示されます。
そのページのURLは下記のとおり“`
https:/
1pxより細く
border1pxをより細くしたい場合
border:1px solid black;
transform: scaleY(.5);
transform-origin: 100% 0;上記を追加
プログラミングスクールの後半で考える、デザインについて
40代DTPデザイナーが、ゼロからプログラミングスクールに通ってみて
思ったことは、やっぱり、自分の得意分野って何？ってこと。ゼロからスタートのプログラミングは、
どうしても脳がついていかない事が多くて
同じクラスの20代がグングン成長していく中、
適正もダイレクトに感じてしまう。というか、わかっちゃう。嬉々として長時間のプログラミングに挑むクラスメイト。
エンジニアとしてプロダクトへのこだわりを見せる先輩たち。20代なら、なりふり構わず集中できるかもしれない。
勢いで覚えていけるかもしれない。
でも、脳が追いつかない40代は、純粋にキーボードを叩き続けられるか否かで
ストレートにエンジニアへの道を目指すべきか、ちょっと考えちゃう時がある。だから、デザインとかけ合わせる方法を選びました。
単純に美しいものは、世の中に溢れてる。
使いやすくシンプルなものも、すでにある。
自分だけの経験と、自分だけの感性を活かしたものを作りたい。40代からは、得意 × 個性 × 経験 × プログラミング！！
今、この時代に、自分を深く見つめて再起動。
スクールに通えて、ホントに良かっ
railsのfile_fieldにおける画像アップロードボタンのデザインの変更方法
#環境
ruby 2.6.5
rails 6.0.0#やりたいこと
画像をアップロードする際に，アイコンをクリックするとファイル選択に移るようにしたい#実装
“`ruby
<%= f.label :image, class: "far fa-image" do %>
<%= f.file_field :image, style:"display:none;" %>
<% end %>
“`上記のコードを任意のforループの中に挿入する．このときid値は同様のものにしておく必要がある．
#あとがき
labelについての理解が浅いことがわかって良かったです．#参考文献
[railsのfile_fieldで画像クリックによりアップロード](“https://qiita.com/zukakosan/items/41ed95fea2323cf458a9”)
[Railsのfile_fieldで画像クリックでアップロードしてプレビューを差し替える](“https://qiita.com/hirogw/items/b4937dbb0ea5f0b60085”)
buttonタグ忘れそう
buttonタグにはoutline: none;をつけておく
クリックしたときに緑色の枠が表示されてしまうから気を付ける
HTMLとは、コードの記述
# そもそもHTMLとは
ウェブサイトに表示される情報を記載する言語# 構成
< html>
< head>
(head要素)
< /head>
< body>
(body要素)
< /body>
< /html>
【PHP】GET・POST サーバー 作成
今回はphpのget・postサーバーの作成について書きます。
正直、今回の記事は自身のメモとしての意味合いが大きいです。
似たようなことが書かれた記事は多いですし、コードの内容も多くないため簡潔に書いていこうと思います。
##実装環境
今回はそんなに手間をかけるつもりはないため、xamppを使用します。
VSCodeを使用してコードを書きましたが、コマンドでビルドが必要だとかいうこともないので、テキストエディターは何でも良いです。
##GET・POST サーバー
“`index.php
いまさらindex.htmlのhrefは省略できることを知った
# 概要
aタグのhrefでindex.htmlを指定する時に「/index.html」とするところを「/」のみにすることができることを知った“` html:index.html
リンク
リンク
“`# ちなみにローカルでChromeから確認すると
ローカルファイルをchromeで開き、index.htmlを省略した形のリンクを開くとディレクトリが表示されてしまう
Chormeでクリックした要素に枠線が付く現象
# 概要
chromeである要素だけクリックした時に黒い枠線が表示されることがあった# 原因
対象要素にtabindex属性が付いていて、クリックした時に強調としてoutlineプロパティが設定される### そもそもなぜtabindexが付いたのか？
スライダーライブラリのslick.jsを使用しており、そこでtabindexが付与されるようになっていた# 対処2種
– tabindexを削除
– outline: none;を設定（そもそもスライダーの範囲の横に余白があり、その余白部分だけ枠線が表示されていた。なのでスライダーとそのコンテンツのサイズは合わせるようにすれば良い）
# 参考
[tabindex – HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/tabindex)[outline – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla
ダメなことはないけど避けた方が楽になるCSSの書き方
## これはなに
– CSSでマージンをつける際、気をつけると後からちょっと楽になるかもしれないTips記事です
– [記事を書くために使ったコードはここに置いてあります](https://github.com/xrxoxcxox/qiita-css-tips)## このスタイルを組むとする
## ありそうなマークアップの例（若干はしょってる）
### 例1：各要素をフラットに書いている
“`html
このページのタイトル
ちょっと強調したテキスト
なにかしら文章が書いてある。以下はダミーテキスト。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾
OBS Studioでの配信用レイアウト背景をHTMLで作ってjQueryで動的に変化させる（配信レイアウトをリアルタイムに変更してみる）
OBS Studioで配信をする際、リアルタイムに編集したテキスト等を表示させたい。
でもテキストエディタをそのままキャプチャするのは格好悪い。
そんな人向け。配信画面レイアウトを作るだけなら、もっと簡単な方法やツールもあるのですが、
+ 様々な分野で使われているので、応用が利く
+ やろうと思えばツールの限界など無くいくらでも作り込める
+ その為に参考になるドキュメントも豊富等の理由から、この記事では HTML + CSS + jQuery で作っていきます。
環境はWindows 10を想定していますので、異なる場合は適当に読み替えてください。## サンプルの動かし方
実際に動くサンプルが手元にあると分かりやすいと思うので、まずは最短でそれを用意する手順だけを書いていきます。中身の説明はまた後で。### 1.ファイルの置き場所になるフォルダを作る
デスクトップでもマイドキュメントでも、どこでもいいので触りやすい場所にフォルダを作りましょう。
フォルダ名は半角英数字で。### 2.ファイルを入れる
以下の3つのファイルを先ほど作ったフォルダに入れます。文字コー
【初心者向け】もうz-indexの数字で迷うのはヤメにしたい！
#どうも7noteです。z-indexのめちゃくちゃな指定はもうヤメにします！
要素の前後の優先順位を決めることができる、`z-index`ですが便利です。
便利だけど、適当に指定していると思わぬ順番になってしまい、ぐちゃぐちゃに。。。
重ね順の指定ってムズカシイ。ということで、**マイルールを決めます！**
## その前に、z-indexについておさらい
>CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
引用元：https://developer.mozilla.org/ja/docs/Web/CSS/z-index### 1. 「z-indexを何も指定しないと、後ろに書かれた要素が上にくる。」
### 2. 「使えるのは整数のみ。（0やマイナスは可）」
ちなみに最大値「2147483647」、最小値「-2147483647」が限界。
### 3. 「z-indexを有効にするためにはposition指定が必要」
