- 1. 前回のおさらい
- 2. 1.CRUDページ
- 2.0.1. 先輩から教えてもらったJavaScriptの知見を応用してlaravelに乗っけてみる
- 2.0.2. 【初心者向け】書いたことが反映されない時(CSS)
- 2.0.3. Nuxt.jsでハンバーガーメニュー実装
- 2.0.4. 使ってはいけない `:read-only` 疑似クラス
- 2.0.5. フォームからGAS経由でGoogle Driveに画像を保存する方法(Chrome V8ランタイム対応）
- 2.0.6. 【初心者でもわかる】CSSで下から”ニュッ”と出てくる文字(要素)の作り方
- 2.0.7. リハビリのHTML
- 2.0.8. 動く！水玉模様のレイアウト【HTML・CSS】
- 2.0.9. 【初心者でもわかる】CSSで発光させて、光るボタンや文字を作る
- 2.0.10. データを読み取る条件式
- 2.0.11. 【HTML】target=”_blank”の問題点
- 2.0.12. HTMLの主な要素〜初心者だった自分に向けて〜 その④インライン要素
- 2.0.13. JsでHTML文の表記を変える
- 2.1. メールで予約
【備忘録】html上の改行を挿入する
# 概要
下記のようなケースの対処法– ESLintでHTMLに直接改行したら怒られる
こんな時“`html
おはようございます。
今日もいい天気ですね“`
– Javascript側に変数用意しても直接改行しても怒られる
こんな時“`javascript
“`
– ``で括ってもformatterで改行が解除されてしまう
こんな時“`html
おはようございます。
今日もいい天気ですね“`
# 対応
1. JavaScriptに変数を用意する
この時、改行したい時に改行文字`\n`を入れる
2. 上で生成した変数をhtmlで読み込む
この時``で囲む
3. CSSに`white-space: pre-line`を挿入#動作
【初心者でもわかる】css1行！画像や要素を左右反転させたり上下反転させる方法
# どうも7noteです。上下左右の反転方法。
画像を配置するとき、左右を反転させた画像が必要な場合わざわざフォトショップなどの画像編集ツールを使う必要はありません。
CSSで簡単に反転することができます。
**今回使う画像**
## 左右を反転させる方法
“`style.css
img {
transform: scale(-1, 1); /* 左右反転 */
}
“`
## 上下を反転させる方法
“`style.css
img {
transform: scale(1,
ASP.net coreの探索 ～2 CRUDページを編集してRazorを見てみる～
前回のおさらい
https://qiita.com/CheerfulGeneral/items/be34fcccfe397c27d064
1行掲示板を
モダンになったASP.net coreで作ってみようという試みです。
前回は
・Model(掲示板データ)を定義
・データベースのマイグレーション(初期化)
・スキャフォールディング(骨組みページ)の作成
を行いました。
今回はスキャフォールディングを編集して、掲示板を完成させたいと思います。
軽くRazorも見てみましょう。1.CRUDページ
https://wa3.i-3-i.info/word123.html
CRUD(クラッドと読むらしい)とは
Create, Read, Update, Delete
の頭文字であり、要するにデータを作ったり処理することです。
スキャフォールディングを作成すると、このCRUDページが自動作成されます。
以下の名前でページが作成されています。
・Index (データを表示させるページ CRUDのR)
・Create (データを作成するページ CRUDのC)
先輩から教えてもらったJavaScriptの知見を応用してlaravelに乗っけてみる
# 目的
– 先輩から教わったJavaScript（以降、js）の内容をもとにlaravel6のビューにjsを書いてみる
# 環境
– ハードウェア環境
| 項目 | 情報 |
| — | — |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |– ソフトウェア環境
| 項目 | 情報 | 備考 |
| — | — | — |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
【初心者向け】書いたことが反映されない時(CSS)
#はじめに
CSSに書いたはずのものが何故か反映されない時に、他の記事を試してみたが上手くいかず、イライラする前にチェックするべきことを書きました。一部のCSSは適用されているのに他のところが適用されていないと思っている場合にも、この方法が有効でしたので、ここに書こうとおもいます。
#解決方法
**1 . `main`と`footer`の初めに`.`を付けない。**classと間違えて付けてないか確認しましょう。
（例）
・修正前~~~
.main{
background-color: purple;
}
~~~・修正後
~~~
main {
background-color: purple;
}
~~~**2 . CSSを読み込むための名前が間違っていないか確認**
CSSを読み込むためには、headに
**““**
と書きます。
その中の、読み込みたいファイル名が間違えていないのか確認します。**3 . 全角のスペース（ ）や全角英数字が入っていないか確認す
Nuxt.jsでハンバーガーメニュー実装
# Nuxt.jsでハンバーガーメニュー実装
## 各ファイルの記述例
toggle用の要素`class=”header__toggle_open”`と開閉するメニュー`class=”header-nav`を用意する
※クラス名は自由です。その他のファイルの該当部分と一致させるようにしてください“`vue:compunents/Header.vue
使ってはいけない `:read-only` 疑似クラス
## はじめに
煽りタイトルです。
実際は単純に汎用的なフォームコントロールのクラスをつくって使いまわしていたら失敗した話です。何が言いたいかというとセレクタをいろんな要素に使い回す場合は `:read-only` より `[readonly]` にしたほうがいいのかもしれないということです。
## やりたかったこと
以下のような汎用的なクラスをつくってinputやselect要素で使いまわしたかった。
(プロパティは適当です)“`css:CSS
.control {
background: #fff;
border: solid 1px #999;
border-radius: 4px;
}
.control:read-only {
color: red;
}
“`“`html:HTML
フォームからGAS経由でGoogle Driveに画像を保存する方法(Chrome V8ランタイム対応）
# 解決すること
フォームからGAS経由で画像をアップロードするとファイルが破損して開けないという状況を回避します。（以下がその情報の記事）
https://qiita.com/TechnoKuRo/items/442d5d9ace73edcb4be7# やりたいこと
1. 入力フォームから画像を選択
2. JSで画像データをGASの関数に渡す
3. GASの関数がGoogle Driveに保存する# 実践
本記事では、フォームのコードについては割愛しています。
今回は画像を保存したいので、フォームでは`image/*`のみ許容するようにしました。
ちなみに私は[VuetifyのFile inputコンポーネント](https://vuetifyjs.com/ja/components/file-inputs/)を最近使用しました。## 1. JS
入力フォームからは以下のような関数を呼ぶようにしておきます。
“`js:saveImage
function saveImage() {【初心者でもわかる】CSSで下から”ニュッ”と出てくる文字(要素)の作り方
# どうも7noteです。ふわっとじゃなくてにゅっと出てくる文字を作ります
まるで地面から生えてくるような文字を作ります。
こんなかんじ↓
みえない位置で下からにゅっと生えてくるように上に出てくる文字です。
要素ごとふわっと出す、というよりも文字のアニメーションみたいなイメージの方が近いかなと思います。## “ニュッ”とでてくる文字の作り方
“`index.html
HELLO!“`
“`style.css
.popout {
border-bottom: solid 1px #000; /* 装飾用の下線 */
display: inline-block; /* 装飾用。なくても可。 */
padding: 0 5リハビリのHTML
## はじめに
ありがたいことに、2年ぶりにエンジニアとして働けることになりました。
2年間仲間とはぐれて修行をしていたわけではなく、ただプログラミングから遠ざかっていました。
リハビリと称して感覚を取り戻したいと思います。## HTMLの勘所
基本的にこの2つの特徴を押さえていればいいのではないかと思っています。
- 1. Webを構成する
- これは言うまでもないですね。
- 2. SEOを有利にする
- Webサイトをなんのために作るのかといったら、売上向上、集客向上のためですよね。
- そのためにはSEOを意識する必要があります。
- 極論divタグだけでも作れますが、それではよくないと、[W3C勧告](https://www.w3.org/) がなされています。
## お役立ちサイト
### 公式リファレンス- [MDN](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML)
動く！水玉模様のレイアウト【HTML・CSS】
#できること & 完成図
水玉模様のレイアウトを実装する方法について述べます。
#概要
HTMLとCSSを使い、以下の記述をコピペするだけで水玉模様のレイアウトを実装できます。#実装方法
##HTML“`index.html
“`
“`styles.css
@import url(‘https://fonts.googleapis.com/css?family=Exo:400,700’);.circles{
top【初心者でもわかる】CSSで発光させて、光るボタンや文字を作る
# どうも7noteです！光る文字やボタンの作り方
アニメーションをつけていろいろな要素をピカピカ光らせたい方へ。
文字やボタンをピカピカ光らせる方法を紹介。## ピカピカ光る文字の作り方
※過去の記事で作ったネオン文字を加工利用しています。
過去記事→[ネオン風の文字を作る方法（無料フォントサイトも紹介）](https://qiita.com/7note/items/c1a78a5e2e41123c4a74)“`index.html
NEON“`
“`style.css
body {
background: #000; /* 背景色を黒に指定 */
}.neon {
color: #FFF; /* 文字色を白に変更 */
font-size: 50px; /* 文字サイズを50pxに指定 */
font-family: Beon; /* ネオン風のフォントを指定(ダウンロードしたもの) */
animation: flash 1s infinite; /* アニメーションfデータを読み取る条件式
#WHY
情報が入ってるか否かでよく使うのがnil?やblank?といったものですがいまいち違いがわからなかったため、調べてみました。
結果、記事はたくさんみつかったのですが忘れないためにもアウトプットしていきます。—–
“`ruby
def index
@items = Item.all
end
“`
コントローラーでこのような記述をしたとします。
このときHTML文で“`html
@itemsにデータがあるとき↓を表示させたい！
<% @items.each do |item|%>
<%= image_tag(item.image, class: "item-img") %>
<% end %>@itemsにデータがない時表示させたい！
<%= image_tag "sample.jpg", class: "item-img" %>
“`このような記述をします。
Itemsテーブルにデータがあればtrueなければfalseと言う感じにすればいいのですがすでにeach文ではItemsテーブルにデータがあれば【HTML】target=”_blank”の問題点
#プログラミング勉強日記
2021年2月17日
Twitterでtarget=”_blank”問題という言葉を見て知らなかったので、調べて簡単にまとめる。#target=”_blank”とは
HTMLタグの1つでリンク先を別のタブで新しく開くように指定するもの。“`html
新規タブで開く
“`#target=”_blank”の問題点
##1. セキュリティにおける問題点
target=”_blank”のリンクは別タブで開かれるので、リンク元のページとリンク先のページの両方が1つのブラウザ内に存在していることになる。リンク先のページに、悪意のあるJavaScriptが記載されていた場合、リンク元であるページを好き勝手改竄することができる。自分のサイト内のページにtarget=”_blank”でリンクを貼ったサイトが、悪意のある人によって作られたページだった場合、開かれた新しいタブ側でリンク元のページのURL操作が可能になってしまう。
##2. パフォーマンスにおける問題点
リンHTMLの主な要素〜初心者だった自分に向けて〜 その④インライン要素
#HTML・インライン要素
###はじめに
今回の記事にはHTMLの中の主なインライン要素についてまとめてあります。
その他のHTMLに関する記事は[こちら](#これまでの記事)##a要素 ``
この要素は、別のWebページやファイル、メールアドレスや電話番号などへのリンクを作成する要素です。
####``要素に必須で指定する属性
– `href` = “リンク先のURL”また、同じページ内の特定の場所へのリンクを作成することもできます。そうすることによってランディングページのような長いWebページでも目的の場所までのスクロールが省略され、ユーザーが閲覧しやすくなります。
_使用例_
“`html:HTML
私にご連絡ください
~~
JsでHTML文の表記を変える
#WHY
javascriptの練習がてらinnerHTMLで遊んでいた内容をアウトプットさせていただきます。
基本的なinnerHTMLの動きは理解できるとおもいます。
※今回はJQueryは使用しません##jsファイルを反映させましょう。
html文のbodyの最後に記述します。“`html
“`##html文の記述を変えよう
https://qiita.com/totacho/items/e019473ad1fea29593b2
で作成したhtmlファイルを少し改造します。“`html
メールで予約
TAX
円Web デザイン初心者がホームページを作ってみた(HTML編)
# はじめに
ポートフォリオを作ろうと思い、`HTML` `CSS` `JS` などの知識が必要なのかなと感じました。
タイトルでは初心者と書いていますが、普段は`Swift`を書いたりしているので、デザインという点では初心者？かもしれません。
今回は、挑戦という意味も込めてホームページを作成してみることにしました。# 環境
– MacOS 11.0.1
– VSCode 1.53.2# 目的
以下の事に挑戦してみたいと思います。
– 画面の中央にカードを縦並びで配置してたい
– カーソルが重なるとカードを拡大させたい
– スクロールしたらフェードインさせてみい# 実践
### HTML
まずは、`HTML` を書いていこうと思います。
一回は見たことあるコードがかけましたが、ここからが本番という気がします。“` index.html
“`次に`
HTMLタグの英語の意味
HTMLを勉強してるとタグの種類がいっぱいあって訳わからん状態でしたが、タグの英語の意味を知ったら覚えやすかったので備忘録として残しておきます。
初投稿になるので、温かい目で見てやってください。# HTMLで使うタグ一覧
| 要素 | 意味 | 説明 |
| —- | —- | —- |
| <a> | 「anchor」|リンクの出発点や到達点を指定する|
| <b> | 「bold」 |フォントを太字にする|
| <br> | 「break」|改行を表す|
| <div> | 「division」|囲った部分をブロックレベル要素としてグループ化する|
| <hr> | 「horizontal rule」|水平の横線を引く|
| <li> | 「list item」 |リストの項目を表示する |
| <ol> | 「ordered list」 |順序のある番号付きのリストを表示する|
| <p> | 「paragraph」|段落を指定すMapboxで地図を表示してみた
#1. はじめに
**Mapbox**では、地図情報サービスの開発プラットフォームが提供されています。
今回は JavaScriptライブラリ **Mapbox GL JS** を使用して、
マップをブラウザ画面に表示してみます。#2. 準備
##2-1. アカウント 作成
**Mapbox**を利用するにあたって、
まず 以下リンク先にて アカウントを作成します。https://account.mapbox.com/auth/signup/
##2-2. アクセストークン 取得
Mapbox を使用するには、**アクセストークン**が必要になります。
以下リンク先の アカウントページにアクセスし、アクセストークンを取得します。https://account.mapbox.com/
#3. コーディング
簡単
ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）
>本記事は、[Simon Holdorf](https://thesmartcoder.dev/author/simon-holdorf/)氏による「[40+ JavaScript Projects For Your Portfolio [With Videos!]](https://thesmartcoder.dev/9-awesome-projects-you-can-build-with-vanilla-javascript/)」（2021年1月5日公開）の和訳を、著者の許可を得て掲載しているものです。
ご好評いただいている記事「[2020年にフロントエンド開発者が作りたい9つのプロジェクト](https://qiita.com/baby-degu/items/df70cccf686ad9fe4940)」の**2021年改訂版**です！
**続編はこちら！**「[フロントエンド開発者のための刺激的なプロジェクト10選]()」#ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた