f@ctor

今さら聞けないHTML　2021年07月22日

今さら聞けないHTML　2021年07月22日
目次

SurgeにWebページをデプロイするメモ

## ざっくりSurge

https://surge.sh/

静的Webページを公開することができるサービスです。
無料プランと　月30ドルの有料プランがありますが、無料プランでも趣味の範囲なら十分そうです。

– `surge`コマンドを使って、マシン上のどのディレクトリのコードでもデプロイできる
– カスタムドメインを利用できる。(`xxxxxx.surge.sh`。購入済みドメインも設定できる。)
– 無料版でもパブリッシュの上限なし

## さっそくデプロイしてみる

surgeのCLIツールをインストールします。

“`bash
npm i -g surge
“`

デプロイしたいディレクトリに移動し、surgeコマンドを実行します。

“`bash
cd /path/to/publish/directory/
surge
“`

初回実行時のみユーザー登録が必要なので、登録しましょう。

いくつかオプションを聞かれるので、答えます。
– `project`: デプロイしたいディレクトリ。カレントディレクトリがデプロイしたいディレクトリであればそのままでOK。
–

元記事を表示

html,css,sassによるアプリのビューをコーディングする際、便利な書き方

説明

本記事はbootstrapなしでSassを使ったコーディングの際に便利書き方に関する記事です。

前提条件

html,css,sassを使っている事、自分はバックエンドをrailsで開発していますが、他の言語でも差異はないと思います。

よく使うcolorを変数として定義しておく

“`application.scss
:root {
–main-bg-color: #f6fafa;
–main-text-color: #A0A0AC;
–main-color: #95c9c9;
}
“`

まずapplication.scssファイルを作りapplication.cssをsassで書けるようにします。それからcolorを定義してのですが、各場所は必ず全てのcssに反映されるapplication.cssファイルの上部に記述してください。そうでないとせっかく定義した変数を使えません。上記の記述では3つ、背景色、文字の色、目立たせたい部分に使う色を定義してます。

`

元記事を表示

jsとhtmlのコメントアウト

jsは先頭に以下ををつける
//

htmlは以下で囲む

元記事を表示

SwiftUIっぽくHTMLを作成するライブラリを作ってみた

例えば、

“`html

  • ベーグル
  • バゲット
    • パリジャン
    • バタール

“`

のようなHTMLを、

“`swift
ul.children {
li.children { “ベーグル” }
li.children {
“バゲット”
ul.children {
li.children { “パリジャン” }
li.children { “バタール” }
}
}
}
“`

のようなSwiftで書けるライブラリを作成したのでご紹介です。

# Swift Package Manager

`MarkUpDynamic` としてSwift Package Managerで配布しています。

https://github.com/coe/MarkUpDynamic

# 使い方

## MarkUp

元記事を表示

Railsで架空のCafeのHPを作ってみよう!【9日目】『簡単にGoogleMapを導入』編

#概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

#9日目の作業内容:round_pushpin:
・ビューの作成

#9日目の気になった箇所:zap:
よく見るGoogleMapを導入したいけど
どうしたらいいだろうか。

#仮説:pushpin:
調べた結果APIKeyを導入したり
色々と設定しないといけないので時間がかかってしまうし
めんどくさい。

#結論:star:
トップページでGoogleMapを動かすことは不可能だが
GoogleMapに遷移してもらう方法を取ると
簡単に実装が可能！

まずGoogleMapに行き、自分で好きなポイントを選択！
![23ec4248b89f917bdade1b2dac907001.jpeg](http

元記事を表示

[HTML/CSS]justify-contentの種類について

# はじめに
本記事では、justify-contentの種類を記述していきます。
間違えまくり&覚えきれない箇所でしたので備忘録です。

# justify-contentとは
display: flex;と併せて使用します。
主軸方向(初期値は水平方向)の配置の詳細を決めます。

# 種類(学習したもの)
・justify-content: flex-start; 左寄せ
![flex-start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/bfd0124d-33a9-7be3-5647-b05fecdf9eaf.png)

・justify-content: flex-end; 右寄せ
![flex-end.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/796c869e-f230-79c3-69c7-74b76b292444.png)

・justify-cont

元記事を表示

Font-weightについて

:::note warn
・Progate環境の話になります
・まだまだ知識が浅いので拙い話だったり、間違っている点もあると思います
:::

最近ProgateでHTMLの学習をしています。
`

`と`

`タグの太字をなくそうと思ったところ、できるときとできない時があったので不思議に思いながらまとめてみました。
htmlは下記のコードです。

“`html:top.html

さぁ、あなたもProgateでプログラミングを学んでみませんか?

Let’s learn to code, learn to be creative!

“`

できなかったコード

“`css:stylesheet.css
.contents-copy {
font-weight:normal;
color:#5f5d60;
}
“`

できたコード

“`css:stylesheet.css
.conte

元記事を表示

HTMLで画像をRetina対応させる

# はじめに
コードを読んでいたら、html の imgタグに`srcset`という見慣れない属性があったので調べた。

# Retinaとは
RetinaとはApple社が開発したディスプレイのこと。
通常のディスプレイと比べ高画質であり、同じ画像でもぼやけて見えてしまいやすい。
そのため、しばしば Retina用の画像を別で用意する。

# srcset属性
**これまでよく使っていた imgタグ**

“`

“`

**今回初めて目にした imgタグ**

“`

“`

hoge.png と hoge@&#;2x.png を見比べたところ、大きさだけが異なる同じ画像だった。

結論から言うと、`srcset`はHTML5.1から追加された属性で、複数の画像と解像度の組み合わせを指定し、表示ディスプレイの解像度に応じて画像を使い分ける役割があるらしい。

画像の指定は、解像度が低い順に`srcset =

元記事を表示

[HTML]aタグとlinkタグの違い

# はじめに
本記事では、aタグとlinkタグの違いを理解しましたので、
アウトプットも兼ねて改めてまとめました。

# aタグとは
`リンク`という言葉を聞くと、
***「aタグ」***を連想する方は多いでしょう。

### `aタグはHTMLの文章の一部をハイパーリンクにするタグ` です。
・インライン要素
・「Anchor（アンカー）」とも呼ばれている
・`bodyタグ`に記載　　　＊個人的に重要

aタグ＝ハイパーリンクだと思っても良いと思います。
`文章中でリンクを作る場合`はこのタグを使う必要があります。

# linkタグとは

### `指定しているページと関係のあるページを関連付けるためのタグ`です。
linkタグがWebサイトの`見栄えに直接関係することはありません`。

・`headタグ`に記載　　　　　＊個人的に重要
・外部ファイルになっているCSSを読み込む。

# 終わり
今回のように似た意味でも、全く違う使い方をするものは、
`どのように`使用するかは理解しておきたいです。

また他には、
同じ言葉なのに使う場面が違う
といったものもまとめて

元記事を表示

セレクトボックスを選択後、自動でサブミット(送信)する方法

この記事では、
**セレクトボックスを選択後、自動でサブミット(送信)する方法**
について解説していきます。

具体例としては、記事の並び替えなどに使うことができます。

![auto_select_submit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/833332/2b7c6d29-2def-9710-c7e0-55412769bc90.gif)
https://muscle-meal-recipes.com/

##前提
– HTMLのformでセレクトボックスを作成できる。
– JavaScript(jQuery)の環境が整っている

##実装

“`html



“`
typeにpasswordを入力することで、伏字になります。

また、複数行使う時はtextareaを使いましょう。

“`HTMl