f@ctor

今さら聞けないHTML　2020年06月25日

今さら聞けないHTML　2020年06月25日
目次

webでNeumorphismことはじめ

#tl;dr;
2020年初頭から注目されているデザイン、**Neumorphism**をご存知ですか？
広く普及しているマテリアルデザインと比較して紹介します。
**マテリアルデザイン**は、**影**を用いて要素を**浮かび上がらせ**ます。
一方、**Neumorphism(ニューモーフィズム)**では、**影**と**光**を用いて要素の**凹凸を表現**します。

**Neumorphism(ニューモーフィズム)**の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548175/5c634561-df84-d1ca-1126-ceecd11f9eda.gif)
[図1 : Neumorphismを用いたアプリケーション例 \(neutodo.com\)](https://neutodo.com)

#膨らみの表現
**Neum

元記事を表示

【初心者でもわかる】position: absolute;を使ってチキンラーメンの卵をど真ん中（上下左右中央）に落とす方法

# どうも、7noteです。今回はposition: absolute;で要素を上下左右中央に配置するお話。

「あー、お腹すいたなぁ。」
「チキンラーメンでも食べるか（深夜2時）。」
「じょぼぼぼぼ・・・（お湯を注ぐ）」

「・・・あっ、卵落とすの忘れてた！」
「この真ん中のポケットに卵を・・・・しまった！！」

## 失敗例
![cr_miss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/796cad98-ca00-f4ff-fb23-6a4f602ebb57.png)

「あーーー・・・」

みんなはこうならないために、**上下左右中央に卵を配置できるようposition: absolute;をマスターしよう！**

## 材料はこちら(1人前)
|ファイル|CSSプロパティ|意味|
|:—————-|:——————|:——————|
|index.html|||
|style.css|position: 〜〜

元記事を表示

学習日記5日目(2020/6/24)

# 学習内容

– HTML&CSS学習（Progate）→終了

#その他

– タイピング練習

# 明日の予定

– JavaScript基礎(Progate)

元記事を表示

【jQuery】手数料を計算して表示させたい

ユーザーが入力した数値に計算を加えて表示させる際の手順について
簡潔にまとめたのでご紹介します。
（今回は、価格と販売利益として表示します。）

# 1. HTMLで価格コーナーを準備する

“`haml:sample.haml
~省略~

= f.number_field :price, placeholder: “0”, class: ‘exhibit-form_price’ do　-#入力欄
　　%span.mark
　¥
.exhibit-form_right
.commission-line
.commission-line_left
販売手数料 (10%)
.commission-line_right
ー
.profit-line
.profit-line_left
販売利益
.profit-line_right
ー

~省略~
“`

# 2. Jsの準備をする
フォームの入力値を取得し、任意の計算をした数値を
販売利益の欄に差し込みます。

“`js:sample.js

$(‘

元記事を表示

Atomの色が消える

Atomで色が消えてしまう。。。

「Atom」→「環境設定」→「コア設定」→「Use Tree Sitter Parsers」のチェックを外すと直りました。

元記事を表示

タグのリンクを無効化するには？

##aタグにはdisable属性がない

Chromeの場合、＜input＞ ＜textarea＞ ＜select＞タグなどはdisabledを書けば非活性になりますが、**＜a＞タグにはdisable属性がないので利きません。**

##aタグのリンクを無効化するには？

“`ruby:css
pointer-events:none;
“`
上記で非活性化することができます。
＜img＞タグも同様です。

##ある条件のときだけ複数の項目を一括で非活性にするには？

そういう場合はJavaScriptを使います。
変更したい項目を＜div＞で囲み、idを付与します。

タグ名で要素を指定することで、項目を複数取得することが出来ます。
【document.getElementById(“ID名”).**getElementsByTagName(“input”)**】

それをFor文で回して各項目ごとにdisable属性や、css.Style属性を付与していきます。

“`ruby:JavaScript
window.onload = function(){
var

元記事を表示

【初心者でもわかる】CSSのセレクタ3種類の書き方（隣接セレクタ・間接セレクタ・直下セレクタ）

# どうも、7noteです。今回はセレクタのお話。
セレクタは、どの対象にCSSを適用させるかを指示するもの。
「セレクタって何？」という方、近日中にセレクタについての記事もかきますのでお待ちくださいませ！

## 『隣接セレクタ』（+）
次の兄弟要素、つまり**ある要素から見て同階層にある次の要素に対してCSSを適用する**ことができます。

#### 隣接セレクタの書き方

学習記録4日目(2020/6/23)

# 学習内容

– HTML&CSS学習（Progate）

#その他

– タイピング練習

# 明日の予定
　HTML＆CSSの基礎は大体問題なさそうなので明日で道場編を一通り行い、次に移りたいと思います。

元記事を表示

Progate学習 0日目メモ

#練習#

まずは書き出し方法の整理のみ。

今後実施予定

– 自己紹介
– 始めた動機
– ロードマップ

元記事を表示

メディアクエリの使い方

#メディアクエリの使い方

個人アプリでレスポンシブ対応が必要だったので、その使い方を記事にまとめました。

“`php:index.blade.php

@foreach($posts as $post)
HTMLのタイトルを取得する [Node.js, シェルスクリプト]

httpリクエストでHTMLのページを取得して正規表現でタイトルを引っ張り出します。Node.jsを使う方法とシェルスクリプト(Bash)を使う方法で出来たので書き残しておきます。

ちなみに、Node.jsもシェルスクリプトも初心者です。

環境
Mac OS 10.14.6

## Node.js

[Node.js](https://nodejs.org/ja/)からダウンロードします。

“`
$ node -v
v12.18.1
“`

### requestモジュール

Node.js標準でもHTTPリクエストできるそうですがrequestモジュールを使うと楽、らしい。[](https://www.npmjs.com/package/request)

“`
$ npm install request
“`

これはできるだけ上位のディレクトリでやったほうがいい。インストールしたところ以下で`request`が使えるがそれより上のディレクトリでは使えない。（個人的な実験の結果）（[npmについてのまとめ – Qiita](https://qiita.com/riho

元記事を表示

クリックしたところがおしゃれに光るナビゲーションバー 8日目【WEBサイトを作る30日チャレンジ】

# ナビゲーションバーをクリックした箇所にスライドさせてグラデーションをかける

■ポイント
・CSSでグラデーションの処理（linear-gradientを使用）
・JavaScriptのdocument.querySelectorで要素を取得
・offsetLeftでクリックした対象要素の左からの幅をpx単位で（左）へ移動させる
・offsetWidthでクリックした対象要素のWidth（幅）を決定
（説明がわかりずらいかもしれません・・・検証ツールで幅の変化等を見て頂くとわかりやすいです）
offsetLeftの説明はこちらのサイト様を参考にいたしました（わかりやすかった、ありがとうございます）
https://syncer.jp/javascript-reference/element/offsetleft
念の為こちらも載せときます↓
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
・addEventListenerでクリックされた場所に反応するように指定
・そしてトップバーだけじ

元記事を表示

inlineやblockの整理

[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？](https://saruwakakun.com/html-css/basic/display)

元記事を表示

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

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

MAMPのバーチャルホスト設定でShift_JISのHTMLに対応する

[MAMP](https://www.mamp.info/)のバーチャルホスト機能は複数サイトの開発・運用に非常に便利ですが、Webサイトの文字コードがShift_JISの場合には文字化けが発生してしまいます。
（現在ではUTF-8が一般的ですが、長い歴史のあるWebサイトの運用などでは稀に遭遇します）

バーチャルホストの設定をする httpd-vhosts.conf 内に下記のように記述することで、該当サイトのみShift_JISでの表示をおこなうことが可能です。

※ポート番号（`8001`）やルートディレクトリのパス（`/path/to/shift_jis_website/`）は適宜書き換えてください。

“`apache:httpd-vhosts.conf

Listen 8001

DocumentRoot “/path/to/shift_jis_website/”

AddType “text/html; charset=Shift_JIS”

元記事を表示

【jquery】tablesorter機能でよく使うものメモ

#はじめに

業務で必要だったのでtablesorterを使ったのだが、
欲しい情報が分散していて（何なら英語サイトにしかなかったりして）わかりにくかったので、まとめ。

#基本的な使い方

ダウンロードしたjqueryライブラリをscriptに読み込み、
function()でcallするだけ。かんたん。

tableにidを付けるのと、ヘッダを

に入れるのを忘れずに。
tbodyの中身だけがソート対象になる。
tfootはあってもなくてもいいけど、あってもソート対象外。必ず末尾に入るから合計行とかに便利。

“`




pythonで送信する画像つきのhtmlメール

## 環境
* python3.6
* gmail

## 機能
* pythonでhtmlメールを送信する
* htmlメール内でローカル画像を使用する

## 1. 設定とコーディング1
gmailのアプリ設定

googleにログイン後、[次のURL](https://myaccount.google.com/security)に遷移する

下記の画像の画面に遷移するので、2段階認証プロセスをONにして、
アプリパスワードを作成してください。
アプリパスワードはどこかにメモをしておいて下さい。

![image (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192308/d1d0456e-81c3-aabb-9dff-4c22ca6790fc.png)

## 2. 設定とコーディング2

“`
import smtplib
import os
from email.mime.multipart import MIMEMultipart
from email.mime.text im

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

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

OTHERカテゴリの最新記事