bodyに背景画像や背景色を挿入したものの、containerなどの要素の中も透過して画像や色を反映させたいと思った事はありませんか？

そんな時はrgba(255,255,255,0)と設定しましょう。
以下のようになります。

ナビゲーションヘッダー作成する。

https://atom.io/

ナビゲーションの土台を作成

.navigation {
    background-color: #584b4f;
    color: #efeae1;
    height: 43px;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">

            </nav>
        </>
    )
}

↓こうなる

メニューの作成

.wrapper {
    margin: 0 auto;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li>Hoge</li>
                        <li>Fuga</li>
                        <li>Piyo</li>
                    </ul>
                </div>
            </nav>
        </>
    )
}

↓こうなる

メニューを横並びにする

・ul要素をinline-blockにすることで横並びにする

.navigation {
    background-color: #584b4f;
    height: 43px;
    padding: 5px 0;
    font-size: 14px;
}

.wrapper {
    margin: 0 auto;
    width: 860px;
}

.navigation ul {
    display : inline-block;
    padding: 0;
    margin: 0;
}

.navigation li {
    display : inline-block;
    padding-right: 10px;
}

.navigation a {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #efeae1;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>
                </div>
            </nav>
        </>
    )
}

右側にSign inボタンつける

・右側用のdivにfloat: rightをつけることで右端まで要素が移動する

.navigation-right {
    float: right;
}

.navigation-right a {
    padding: 5px;
    text-decoration: none;
    color: efeae1;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>

                    <div className="navigation-right">
                        <a href="">Sign in</a>
                    </div>
                </div>
            </nav>
        </>
    )
}

解決したい課題

エンターキー押下時に､ボタン押下と同じ挙動にしたい｡

課題の詳細

内にが2つある場合､の韻字的なtype="button"が2つになってしまい(ここは仮定)
意図していないがエンターキーでsubmitがされない状態｡

結論

※参考
https://qiita.com/sd131/items/06e13b5008efc41102d1
※参考サイトからの引用
v-form、v-btnコンポーネントを利用していると、 v-btnがtype="button" となる。
よって、テキストフィールドがあり、submitボタンがない状態のため 、Implicit submission （暗黙の submit）という HTML の仕様により、エンターキーで submit され、リロードされてしまう。

従って､そのtext内でエンターキーによるsubmitを有効化したいときは､
その内にkeyイベントを以下のように追加してあげれば良い｡

<v-text-field>
@keydown.enter="submit"
</v-text-field>


keydownとkeyupとkeypressの違いは以下がわかりやすい｡
https://murashun.jp/blog/20191110-52.html

vuetify.jsのbuttonイベントについては以下にかなりまとまっている｡
公式:https://v15.vuetifyjs.com/ja/components/buttons/
Qiita:https://qiita.com/rubytomato@github/items/890d59804978aa959e9c

Qiita､すげーな｡｡｡

3カラムレイアウト作成

・可変レイアウト部分をflex: 1にし、残りのレイアウトを固定幅にすればok

.parent {
    display: flex;
    height: 100vh;
}

.fix {
    width: 300px;
    background-color: violet;
}

.content {
    flex: 1;
    background-color: aqua;
}

import React from 'react'
import './Column2Layout.css'

export const Column2Layout = () => {
    return (
        <div className="parent">
            <div className="fix"></div>
            <div className="content"></div>
            <div className="fix"></div>
        </div>
    )
}

縦に3カラムレイアウトするには、親要素で子の整列方向を指定する。(flex-direction: column;)

.parent {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.menu {
    height: 300px;
    background-color: violet;
}

.content {
    flex: 1;
    background-color: aqua;
}

サイトでよくある2カラムレイアウトを作成する。

・左レイアウトは300px固定で右レイアウトは可変にする。
・親要素にdisplay: flexをつける
・可変レイアウトにはflex: 1をつける

.parent {
    display: flex;
    height: 100vh;
}

.menu {
    width: 300px;
    background-color: violet;
}

.content {
    flex: 1;
    background-color: aqua;
}

import React from 'react'
import './Column2Layout.css'

export const Column2Layout = () => {
    return (
        <div className="parent">
            <div className="menu"></div>
            <div className="content"></div>
        </div>
    )
}

はじめに

新卒でウェブ制作会社に就職し、コードの量産に嫌気が差し営業に転職。
趣味で作りたいもののために勉強しているウェブエンジニアです、こんにちは。

今まではWordpressを使用しウェブサイトを作ってきましたが、ウェブサービスを作りたく思いバックエンドの勉強を開始しました。
その時、悩んだこと、作ったサービスを簡単に書こうと思います。

「PHP」を選択するか、あるいは「Laravel」選択するか

結果的にタイトルにあるようにPHPを選択しましたが、すごい悩みました。
というのもPHPはあまりいい噂を聞きません。
「やれ、古い」「やれ、汚い」挙句の果てに「オワコン」なんて言葉も見つけました。

それに比べてLaravelはかっこいい。
なんかモダンな香りがしますよね。
「PHP勉強してるより、Laravel勉強してる」の方がかっこいい。

形から入るタイプの私はすごい悩みました。
通勤電車中、仕事中、食事中、ずっと考えました。
考えて考えて考え抜いた結果、「とりあえず手を動かそう、早く作ろう」という結論に至りました。

そうすると環境構築するのも面倒くさいので、もうPHPでいいやと吹っ切れました。

結果的にPHPのことが良く知れたので正しい選択をしたと思っています。
たぶんLaravelの勉強の役にもたったんじゃないかと思い込むようにしています。

勉強開始～制作完了まで

言語選択に時間をかけ過ぎました。
勉強を始めてみるとPHPは確かに学習コストがそこまで高くなく、いい感じで進むので楽しく作成することができました。
学習期間は、ほとんど作りながらの学習だったので、2020年8月20日～2020年10月20日。
丸２か月かかりました。
結構かかりましたが、データベースとPHPをまるっと学べることができたので、有意義な時間でした。
作っているものが形になっていく過程は相変わらず、面白いですね。

ポートフォリオ投稿サイト

作ったのはポートフォリオ投稿サイトです。
機能は見ていただけるとわかりますが簡単にリスト化すると

• ログイン
• 投稿
• イイネ
• コメント
• 投稿削除
• ログアウト

こんな具合。
まあ、多くの投稿サイトと同じ機能を持っていると思います。

サイトは下記URLになりますので、よろしければ投稿してみてください。
またアドバイスもお待ちしております。ぜひとも、何卒。

ポートフォリオ投稿サイト

作ってみた感想と今後

とにかく物を作りたいという欲求を満たすことができました。
学習コストの低いPHPそういった入り口として非常にいい言語なのかもしれません。

ただ実力不足でサービスとしては物足りない部分も多く、例えばセキュリティー対策も最低限しかできていないですし、イイネ機能の非同期通信も結局、実装せずに満足してしまいました。投稿された画像の軽量化とかもしたかった。

そしてにより、作っただけのサービスになってしまいましたので、そこも反省材料として血肉にしていこうと思います。

次はLaravelを使用し、サービスとして確立できるものを作りたいと思います。

はいどうも！
某プログラミングスクールに通い始めた37歳のおっさんです。
プログラミングは完全に未経験。
そんなおっさんが転職するまでの軌跡（奇跡？）をぼちぼち綴っていこうと思います。

投稿は今日が初めてですがスクールは今日で9日目。
HTML＆CSSをやってRubyに入り、Railsをやって試験を受けて、というところです。

簡単に私の経歴を
↪️
地方出身、東京の文系私立大学卒、東京で就職し営業職(toC & toB)でマネジメント経験あり。
インディーズですが学生時代にやっていたバンドでCDを1枚だけ出しています。
キャンプとジム通い、音楽掘りが趣味。
ジャンルはRock、JazzからEDMまで幅広く聴きます。
今はちょっと難しくなってしまいましたが海外旅行もそこそこ行きました。




なぜプログラミングを始めたのか、どうして転職を決意したのかなどは後々ゆっくりとupしていこうと思います。
とりあえずまだ始めたばかりですが感想としては
「めちゃくちゃやることがいっぱいある」
「勉強すること、覚えることが今までやってきたことの比じゃないレベルで多い」
この二つですね。
日々思ったこと、できなかったこと、疑問点などなど
自分が見返した時に
「あ〜こんなことあったな」とか、
「こんなことで悩んでたんだな」とかとか、
あとはこれを読んだ他の方に少しでも役に立てればなと思います。

そんな具合ですが本日は頭がパンクしているのでこれにて

今回は今まで習ったことの内容の中の、HTMLとCSSについてアウトプットしていきます！！

HTMLについて

HTMLとはマークアップ言語の一つで簡単に言えば文字を表示するための言語です。入れ子構造になっている。
例）< h1 >文字を入力< /h1 >
上記のように左右をタグと呼ばれるもので囲み表示します。
タグには沢山種類があり、主要な物を下記に記します。

h1,h2,h3,h4...タグ

見出しタグ。数字が大きくなっていくほど、小さい文字となる。

pタグ

段落を指定するためのタグ。

headタグ、bodyタグ

headタグには簡単に言えばHTMLの設定を記載する。bodyタグには実際にweb上に表示したい文字を記載

headerタグ、mainタグ、footerタグ

この三つはbodyタグの中に記載するものになる。
※ headerタグとheadタグは間違えないようにしよう！！

divタグ

ブロックレベル要素としてグループ化できる要素。基本的に何もない限りこのタグを使用する。

ulタグ、liタグ

ulを親要素としてliタグを使用。基本的にlistとして使用するため、同じ意味合いを持つものをいれる。

CSSについて

簡単に言えば、CSSとはHTMLで記述した文章に色やサイズ等を適用するための言語である。
例)
index.html

<html>
  <head>
    <link rel = "stylesheet" href = "style.css">
  </head>
  <body>
    <div class = "class">背景が赤くなる</div>
    <div class = "class-j">
      <p>文字が赤くなる</p>
    </div>
  </body>
</html>

style.css

.class{
  background-color: red;
}
p{
  color: red;
}

上記のように、HTMLの方でlinkタグを指定してあげることで、CSSが適用されるようになる。CSSはHTMLでclassを指定して使用することも可能であると同時に、要素を指定して使用することも可能。
また、CSSは上記で記載したように、プロパティ(background-color等)と呼ばれるものを記載することで色や大きさなどを変更することが可能。
プロパティの主要なものは下記に記載。

colorプロパティ

文字の色を変更

background-colorプロパティ

背景色を変更

font-sizeプロパティ

文字のサイズを変更

heightプロパティ

高さを指定できるプロパティ

widthプロパティ

幅を指定できるプロパティ

HTMLの表示について

HTMLは箱のような形になっており、外から順にmargin,border,paddingとなっている。それらの幅の指定を行う方法が下記のプロパティである。

marginプロパティ

外のサイズを指定できるプロパティ

paddingプロパティ

内側のサイズを指定できるプロパティ

borderプロパティ

marginとpaddingの間の線の部分を指定できる。

FlexBoxとは

HTMLが箱のようなものと前述に記したと思うが、この箱を自由に動かす便利な概念みたいな物。
基本的に下記を使用する。

display: flex

親要素に指定すると、小要素のブロックが全て横並びになる。

justify-content: A;

親要素に指定すると子要素の互いの横幅を一括で指定することが可能。Aにはspace-aroundやspace-betweenなどを指定する。

align-items: A;

親要素に指定すると小要素の縦の位置を一括で調整できる。Aにはcenterなどを用いる。

float: A;

子要素に指定すると横並びになる。Aにはrightとleftが入る。
※ floatとdisplay: flex;は、一見似たようなものに見えるが、display: flex;の方が圧倒的に移動できる範囲が広いため、floatはあまり使用されない。

まとめ

まだまだ、色々なタグやプロパティが存在するが、この範囲はいずれ何度も行う内容だと思うので、開発の際にその都度公式リファレンスを確認すると良いのではないかと思います。

はじめに

現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。

開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS

目次

1.HTMLの準備
2.CSSの設定

HTMLの準備

タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足：Ruby on Railsでアプリを制作しています。

index.html.erb

<div class = "wrapper grid"> #全体をdivで囲み、クラス名gridを追加する
  <% @desks.each do |desk| %>
    <%= link_to desk_path(desk.id) do %>
        <%= image_tag desk.image, class: "desk-img" %>
        <p>
          <%= desk.title %>
          <%= "by#{desk.user.nickname}さん" %>
        </p>
    <% end %>
  <% end %>
</div>

2.CSSの設定

※最終コードは一番下にあります。

CSSではdisplayプロパティにgridを設定する。これにより、子要素はタイル状にレイアウトされる。タイル間の余白はgapプロパティで設定する。

index.css

.grid {
  display: grid;
  gap: 26px;
}

次に各タイルの横幅設定をする。grid-template-columsプロパティにより、横に並べたいタイルの枚数だけfrを設定する必要がある。ここで1frは親要素に対する横幅を自動で調整する。下記の場合、1frが3つあるので、1:1:1の3等分されたグリッドが配置される。もし1fr 2fr 1frのように設定した場合、タイル枚数は3枚であるものの、各タイル幅は左から1:2:1となる。

index.css

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 6%;
  margin-bottom: 50px;
}

最後にレスポンシブ化を記す。repeat関数を使うことにより、タイル数を指示し、コードを簡略化できる。

index.css

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr); /*　1fr 1fr 1frと同じ　*/
  margin-top: 6%;
  margin-bottom: 50px;
}

またminmaxを使うことにより、1タイルの最小と最大幅を設定できる。下記の場合、最小値を240px、最大値を1fr(親要素の3等分相当)となる。最大値は親要素の幅(画面サイズ)に依存する。一方で最小値は24opxに固定され、これ以上は小さくならない。

index.css

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, minmax(240px, 1fr)); /*　1fr 1fr 1frと同じ　*/
  margin-top: 6%;
  margin-bottom: 50px;
}

最終コードを下記に記す。上記おrepeat関数のタイル数を表す「3」をautofitに書き換えた。これにより、画面の幅に応じて最適なタイル数を自動で表示する。

index.css

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(autofit, minmax(240px, 1fr)); /*　1fr 1fr 1frと同じ　*/
  margin-top: 6%;
  margin-bottom: 50px;
}

参考：
1冊ですべて身につくHTML-CSSとWebデザイン入門講座

以上

今回は画像に関する特集

毎度同じみ小技紹介です。
今回のテーマは「画像」についてです。
画像のサイズを変更したりするの大変ですよね。
今日も便利な小技を紹介していきます。

画像のトリミング

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、元々の画像のサイズが全部一緒ではありませんよね。そんな時は object-fit: cover; でトリミングすることができます！画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

画像をたくさん載せるようなサイトに重宝します！デザインをこだわるCSSらしい機能です！

テキストの回り込み

Webでのデザインはどうしても四角形になりがちですが、CSS Shapesを使えばテキストを画像などの形にあわせて回りこませることができます！円形にテキストを回り込ませるには、円形要素に shape-outside: circle(); を与えます。つまり、画像の周りにテキストを回り込ませてみるには以下のコードになります。

img {
  shape-outside: circle();
}

これ１行だけでいいんですよね。

結論

CSSでは見た目をお洒落にするためのものがかなり揃っています。
自分自身まだまだ知らないことが多いので今後もアウトプットで
ブログに執筆していきます！

HTML

　HTML(Hyper Text Markup Language)とはWEBページを作成する際に使用されるマークアップ言語である。
　WEBページのほとんどにHTMLが使用されている。
　HTMLはタグを使いコンピューターに命令を出す事により見出しを付けたり段落を付けたりと、WEBページのレイアウト、構成を形作ることができる。

CSS

CSS(Cascading Style Sheets)は先ほどのHTMLと組み合わせて使用する言語である。
CSSは文字の色やサイズ、レイアウトを変えたり、WEBページを装飾する言語である。
HTMLでもWEBページの装飾をすることは出来るが、CSSの役割なので分けて使う必要がある。

JavaScript

WEBサイトに動きをつけるためのプログラミング言語である。
具体的には文章や画像を拡大表示したり、より動的なWEBサイトを作ることができる。
サーバーを介さずにブラウザ上で動かすことができる。またこのようなプログラムをクライアントサイド・スクリプトという

Ruby

Rubyとは日本人であるまつもとゆきひろ氏によって作成されたオブジェクト指向スクリプト言語である。
WEBサイトやECサイトなどの製作、SNS開発など様々なことができる。有名なサイトではぐるなびや食べログなど
Rubyは他の言語に比べシンプルなコードのため開発スピードが早く読みやすい

Rails

Ruby on RailsとはRubyを使用したフレームワークである。
フレームワークとは雛形のことで、一からプログラミングをしなくても枠組みが用意されているため開発時間を大幅に削減することができる。他にもSinatraやHANAMIなどがある

よく使う要素

HTMLでよく使う要素は以下のものです。

• h1~h6要素(見出し要素)
• p要素
• b要素
• br要素
• a要素
• meta要素
• link要素
• div要素　

これらの要素はよく使うのではないでしょうか。
しかし、これらの要素の役割をそれぞれ把握していないとheadにwebページに表示される情報を書いたりと見にくいコードや意味の通らないプログラムになってしまいます。

そういったことを避けるためにもよく使う要素については抑えておいて損はないはずです！

具体的にどういった要素なのか見ていきましょう。

h1~h6(見出し要素)・p要素

これらはページの見出しとなる要素です。
丁度こういったブログのようなもので各セクション似タイトルがあるかと思いますが、そのタイトルに当たる部分がこの要素です。

<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>

このようにタグで囲んだ部分が見出しになります。
hの数字が大きくなるにつれて見出しに表示される文字は小さくなります。

p要素は段落を作ります。

<p>これは段落です</p>

というように記述します。
実際の表示ではこんな感じになります。

これは段落です

要するに何かの文字列を配置したいときはほとんでp要素を使うということです。

b・br・a要素

これらの要素は主に文字の装飾を行う要素です。
それぞれ見ていくと、b要素は囲んだ文字を太文字にします。
次にbr要素は、囲んだ箇所から「改行する」ことを意味する要素です。
最後にa要素ですが、これは囲んだ文字をリンクにすることができます。

このように主に文字の装飾を行う要素をインラインレベル要素といいますが、また解説していきます。

div要素

この要素は特に意味を持たない要素ですが、そのため使い勝手がいいのが特徴です。

例えば特定の場所だけCSSを適用させたいとき、この要素にclass属性を付与しておけばCSSのセレクタに、そのclassを指定するだけでこの問題を解決することができます。

<div class="header-title">
 <h1>タイトル</h1>
</div>
<p>これはタイトルです</p>

このようなとき、「h1だけにCSSを適用させたい！」と思ったときにdivで与えたクラスをセレクタに指定するだけでh1のみにCSSを適用させることができます。

非常に便利な要素なので覚えておきましょう。

meta要素・link要素

これらはHTMLやページの情報を記載するための要素です。
したがって、これらの要素はhead内に記述します。

それぞれの役割を見ていきましょう。
meta要素はページに使われる文字の種類(文字コード)を指定することができます。
link要素は実際に使用しているHTMLファイルと外部の情報を関連付ける要素です。

これらの要素を使うときには、属性と属性値が必要になります。
実際のコードを見ていくと、

<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="style.css">
</head>

このような記述になります。
ここではmetaの属性が文字コードを指定するcharsetに、

linkの属性が参照するファイルが現在のファイルとどんな関係があるのかを指定するrel属性

実際にどこのファイルにリンクとして飛んでいくのかを指定するhref属性ということになります。
それでは属性とは一体何なのでしょうか。

属性と属性値

属性とは要素に情報を付け加えるもので例えば、先程のlink要素の場合、link要素で外部ファイルと関連付けするだけでなく、rel属性を使って、どんな関係があるのかを情報として追加しています。

このように属性は要素に必要な情報を追加しているのです。
そして、属性値はどのような属性なのかを示す値のことを指しています。
つまり、rel属性の場合、「CSSのファイルと関係がある属性ですよ〜」といったことを、属性値が示しているのです。

まとめ

以上がHTMLでよく使う要素と属性についての解説です。
参考になればSNSで共有・紹介していただけたら嬉しいです！
それではまた！

XFREEでHTMLをアップロードのしたのでその方法を共有します。
サーバーに配置することで、作成しているアプリを公開できます。私も今回このサーバーを使わせていただきましたが今のとのところHTML/CSS/JS（JQuery）が動いていることを確認しております。(2020/11/17現在)

”簡単”とはいえサーバーの設置やファイル転送なれていない方には結構キツそうなので、参考になれればと思います。

流れの説明

１、XFREEのアカウント作成
　→ここはそんな難しいことはないので普通に登録しましょう。
　※パスワードとIDの設定が少しややこしいいです。メモを忘れずに！

２、サーバの起動〜動作確認
　→登録したアカウントでログインし、サーバーを起動。初期ページが用意されているので動作確認をしつつ、管理パネルの使い方になれましょう。

３、ファイル転送
　→ファイル転送ソフトを用いて、自身のアプリをサーバーにアップロードします。
　※macはFileZila、windowsはFFFTPを使用します。所持してない場合は用意しておきましょう。

４、アプリの起動確認
　→アプリがサーバー上で起動できればアップロード成功です。
　まだ正直機能を全て把握していないのでわかりませんが今後独自ドメインなどの設定もしていければと思います。

１、XFREEのアカウント作成

ではさっそくアカウント登録からやっていきます。

こちらから登録します。そんな難しいことはないので下の画面とコメントを参考に進めてください。

ここまででアカウント作成は終了です。
・XFREEのログインパスワードは忘れずに保管しましょう。

２、サーバの起動〜動作確認

作成したアカウントでログインしサーバーを起動します。下の画面とコメントを参考に進めてください。

ここまでできたらサーバーの起動は完了です。また上記画面では、
・index.html
・default_page.png
・htaccess
の３つが初期状態として用意されています。右上の「xxx.html.xdomain.jp」がサーバーのアドレスになります。これをコピーしブラウザ上にペースト、表示すると「index.html」がエントリーポイントとして呼び出されます。

「xxx.html.xdomain.jp」をコピペし初期画面を起動させましょう。

上記のような画面が出れば起動完了です。

豆知識：エントリーポイントとは？

エントリーポイントとは「アプリのアドレスにアクセスした際に一番最初に呼び出されるファイルのこと」です。どの言語においてもフレームワークを使用したアプリケーションでは、基本的には「index.htmlがエントリーポイント」とお約束ごとがあります。（１００％必ずではありませんが・・・）
今後Wordpressやその他FWを使用する際必要な知識になりますので覚えておきましょう。

３、ファイル転送

初期画面が起動できたことを確認できたら、ローカルある自分のアプリをアップロードします。ここでポイントなのが「ファイル転送ソフト」を使うことです。
じつはXdomainの方でもアップロードできる機能があるのですが、使いづらくとても使えたものではないのでファイル転送ソフトを使用します。

ここでは準備に関する記事は載せませんがググれば情報はたくさんあるので頑張って準備しましょう。
・windowsはFFFTP
・macはFileZila
を使用します。

今回は当方のPCがmacなのでmacの場合の手順を載せます。ただログインするまでが結構大変なのでそんなに難しいことはないです。windowsでも似たような操作をしますのでなんとなくイメージを掴めるかと思います。

ではまずソフトが準備出来次第、ログインに必要な情報を集めます。

FTPアカウント設定画面に情報が記されています。初回はパスワード変更しろとあるので「編集」から変更します。（画面を閉じてしまった場合はログイン→管理パネルログイン→FTPアカウント設定の順で画面を開きましょう!）

ここまでできたらFileZilaを起動します。ファイル→サイトマネージャーの順でログイン画面を開きますが、以下にそれぞれどの項目に対応しているか関係を記します。

FileZilaの画面

ここまでできたらFTP接続は完了です。

あとはローカルからリモートサイトへフォルダを丸ごとアップロードします。

４、アプリの起動確認

アップロードが完了したら、アプリの起動確認をします。先ほど同様「xxx.html.xdomain.jp」をコピペします。ここで注意なのがフォルダごとアップロードしたので、少しアドレスが変わります。

例）

html-css
　∟css
　∟img
　∟index.html

上記フォルダ構成の「html-css」というフォルダを丸ごとD&Dした場合。

ブラウザで確認するアドレスはxxx.html.xdomain.jp/html-cssとなります。

なぜアクセスが成立するか？

「html-css」には「index.html」が存在します。「xxx.html.xdomain.jp/html-css」というアドレスに接続した場合は、この配下にある「index.html」がエントリーポイントとなります。
なので「xxx.html.xdomain.jp/html-css」にアクセスすると「index.html」が呼び出されアプリが起動したということになります。ちなみに「xxx.html.xdomain.jp/html-css/indx.html」と入力しても同じ結果になります。

まとめ

今回は無料でアプリをサーバー上にアップロードする方法をお伝えしました。今後はできるかわかりませんが、XFREEで独自ドメインの取得とかできたらいいなって思います。

CSSでのグラデーションの使い方を勉強しながらまとめてます。
実際に使ってみた印象で書いてるので間違いがあるかもしれません。

基本

背景など画像が使える所なら使用可能

構文

*-gradient(color1, color2)
*-gradient([option, ]color1, color2[, colors...])
*-gradient([option, ]color1[ point], color2[ point][, colors...])
*-gradient(color1, [point, ]color2)

*	グラデーションの種類、3種＋各リピート
option	角度や位置など、種類により内容が異なる
color1,2	2つの色指定は必須、color1が始点の色
colors...	追加の色、一番右側（最後）の色が終点の色
point	色経由点の配置、％値やpx値

グラデーションの種類

種類	関数	反復
線形	linear-gradient	repeating-linear-gradient
放射	radial-gradient	repeating-radial-gradient
扇形	conic-gradient	repeating-conic-gradient

色経由点の配置

最初と最後の色にはそれぞれ0％、100％が既定となっているようです。
何も指定しないと均等に配置されます。

色の指定

red, green, blue ...	色名
#f00, #0f0, #00f ...	rgb値
rgba(256, 0, 0, 0.5)	透過を使う事でグラデーションを重ねる事が可能

2色間の中間色の配置

linear-gradient(90deg, red, 15%, blue)

カンマで区切り、中間色の配置を指定。
上記例では、15%の位置に両隣の色の中間色が配置されます。

後述の範単色範囲の配置のように位置を２つ指定するとエラーになります。

単色の配置

linear-gradient(90deg, red, blue 15%, green)

区切らずその色に指定。
上記例では、色が混じらない単色部分を15%の位置に配置。

単色範囲の配置

１）linear-gradient(90deg, red, blue 15% 60%, green)
２）linear-gradient(90deg, red 15%, blue, green)

位置を２つ指定。
色が混じらない単色部分を範囲指定できます。
１の例では15%～60%が青の単色となります。

最初と最後の色は既定値があるので、１つ指定するだけで範囲が指定できます。
２の例では、0%～15%が赤の単色となります。

中間色を作らない

linear-gradient(90deg, red 15%, blue 15%, green)
linear-gradient(90deg, red 15%, blue 15% 85%, green 85%)

このように単色の境界を同値にすると中間色が生じない形になります。

線形グラデーション

線形グラデーションは、直線に沿った色の帯の変化を生成します。

直前の画像にあるようなものがこれにあたります。

方向・角度の指定（オプション）

linear-gradient([option, ]color1, color2[, colors...])

線形グラデーションでは、optionに方向・角度を指定できます。
省略すると、上が始点・下が終点（to bottom / 180deg）の既定値が適用されます。

方向

linear-gradient(to bottom right, color1, color2[, colors...])

to [direction]で、top,botto,left,rightを組み合わせた8方向の指定が可能です。
上記例では右下が終点となるグラデーションを生成します。
既定値はto bottom。

角度

linear-gradient(135deg, color1, color2[, colors...])

[0-360]degで、方向よりもより詳細な角度指定ができます。
-[0-360]degのようにマイナス値だと反時計回りの指定に変化。（315deg = -45deg）
上記例は方向の時と同じく右下が終点のグラデーションです。
既定値は180deg。

赤（内）が始点、紫（外）が終点。

180deg-rainbow-box.css

.box8 {
    background:
        linear-gradient(
            180deg,red 15%,orange 15% 29%,yellow 29% 43%,green 43% 57%,blue 57% 71%,indigo 71% 85%,purple 85%
        );
}

虹色ボックスはこんな感じで書いてます。
ぱっと見分かりにくいですが、315degのボックスだけそれぞれ隙間を2%空けて境界を鈍らせてます。

最後に

グラデーションの積み重ねや、他の種類のグラデーションは未使用なので、使ったら書くかもしれません。

参考サイト

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN

CSSでのグラデーションの使い方を勉強しながらまとめてます。
実際に使ってみた印象で書いてるので間違いがあるかもしれません。

基本

背景など画像が使える所なら使用可能

構文

*-gradient(color1, color2)
*-gradient([option, ]color1, color2[, colors...])
*-gradient([option, ]color1[ point], color2[ point][, colors...])
*-gradient(color1, [point, ]color2)

*	グラデーションの種類、3種＋各リピート
option	角度や位置など、種類により内容が異なる
color1,2	2つの色指定は必須、color1が始点の色
colors...	追加の色、一番右側（最後）の色が終点の色
point	色経由点の配置、％値やpx値

グラデーションの種類

種類	関数	反復
線形	linear-gradient	repeating-linear-gradient
放射	radial-gradient	repeating-radial-gradient
扇形	conic-gradient	repeating-conic-gradient

色経由点の配置

最初と最後の色にはそれぞれ0％、100％が既定となっているようです。
何も指定しないと均等に配置されます。

色の指定

red, green, blue ...	色名
#f00, #0f0, #00f ...	rgb値
rgba(256, 0, 0, 0.5)	透過を使う事でグラデーションを重ねる事が可能

2色間の中間色の配置

linear-gradient(90deg, red, 15%, blue)

カンマで区切り、中間色の配置を指定。
上記例では、15%の位置に両隣の色の中間色が配置されます。

後述の単色範囲の配置のように位置を２つ指定するとエラーになります。

単色の配置

linear-gradient(90deg, red, blue 15%, green)

区切らずその色に指定。
上記例では、色が混じらない単色部分を15%の位置に配置。

単色範囲の配置

１）linear-gradient(90deg, red, blue 15% 60%, green)
２）linear-gradient(90deg, red 15%, blue, green)

位置を２つ指定。
色が混じらない単色部分を範囲指定できます。
１の例では15%～60%が青の単色となります。

最初と最後の色は既定値があるので、１つ指定するだけで範囲が指定できます。
２の例では、0%～15%が赤の単色となります。

中間色を作らない

linear-gradient(90deg, red 15%, blue 15%, green)
linear-gradient(90deg, red 15%, blue 15% 85%, green 85%)

このように単色の境界を同値にすると中間色が生じない形になります。

線形グラデーション

線形グラデーションは、直線に沿った色の帯の変化を生成します。

基本の説明で使用した画像は全て線形グラデーションです。

方向・角度の指定（オプション）

linear-gradient([option, ]color1, color2[, colors...])

線形グラデーションでは、optionに方向・角度を指定できます。
省略すると、上が始点・下が終点（to bottom / 180deg）の既定値が適用されます。

方向

linear-gradient(to bottom right, color1, color2[, colors...])

to [direction]で、top,botto,left,rightを組み合わせた8方向の指定が可能です。
上記例では右下が終点となるグラデーションを生成します。
既定値はto bottom。

角度

linear-gradient(135deg, color1, color2[, colors...])

[0-360]degで、方向よりもより詳細な角度指定ができます。
-[0-360]degのようにマイナス値だと反時計回りの指定に変化。（315deg = -45deg）
上記例は方向の時と同じく右下が終点のグラデーションです。
既定値は180deg。

赤（内）が始点、紫（外）が終点。

180deg-rainbow-box.css

.box8 {
    background:
        linear-gradient(
            180deg,red 15%,
            orange 15% 29%,yellow 29% 43%,
            green 43% 57%,blue 57% 71%,
            indigo 71% 85%,purple 85%
        );
}

虹色ボックスはこんな感じで書いてます。
ぱっと見分かりにくいですが、315degのボックスだけそれぞれ隙間を2%空けて境界を鈍らせてます。

最後に

グラデーションの積み重ねや、他の種類のグラデーションは未使用なので、使ったら書くかもしれません。

参考サイト

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN

CSSの便利すぎる小技を紹介

①に引き続き、今回も意外と知られていないかつ、便利すぎる小技を紹介していきます。
そして今回は、「スクロール」の小技に厳選しています。
それではみていきましょう！

スムーズスクロール

ページ内リンクをクリックすると、リンク先へスルッと移動するもの！
これまではJSで実装してましたが、その必要なし！
そしてコードの記載もめちゃくちゃ簡単です。

html{
 scroll-behavior: smooth;
}

これだけ！！めちゃくちゃ便利で快適なWebページが作成できます。
ただ、残念な点があるとしたらIEとSafariが非対応とのことです。

スクロールスナップ

スクロールしたときにピタッと各エリアを表示させたいときに使うものです。
JSなしでスクロール位置を調整してくれます。
高さを100vhにすることでフルスクリーンレイアウトとして表示もできちゃいます。

<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
  <section class="area">3</section>
  <section class="area">4</section>
  <section class="area">5</section>
</div>

.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
}

簡単ですね。こんな感じで１２３４５のそれぞれのページにピタッと止まります。
なんて便利なんだ…。

スクロールした時に要素を固定にする

ページをスクロールした時に、次の要素に到達するまで、指定した要素が固定表示されるものです。
文章量が多いコンテンツに重宝しそうです！

<section>
  <h2>概要</h2>
  <p>コンテンツ内容………</p>
</section>

h2 {
  position: sticky;
  top: 0;
}

上記だと、h2クラス全てのものが固定されます。
これも便利！！！

結論

JSを必要とするものがどんどん必要でなくなってきています。
JSも大変重宝しますが、CSSのコード１行で済むならそっちの方がいいですね
可読性も上がりますし、メリットだらけです。
また発見したら書き込みます！

どうも7noteです。立方体の作り方

サイコロを作ったり、写真をはめ込んだ立方体を作ったりすることができます。
作ったことがなかったので、作り方を調べたので記録代わりに投稿。

使い方をマスターすればいろいろなものが作れそう。

①線のみVer.

index.html

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

style.css

.box {
  display:block;
  position:relative;
  margin:30px auto 0;
  width:100px;
  height:100px;
  transform-style:preserve-3d;
  transform:rotateX(-25deg) rotateY(-45deg); /* ここで四角の角度を調整できる */
}

.box .item {
  position:absolute;
  left:0;
  right:0;
  box-sizing:border-box;
  border:1px solid #333;
  width:100%;
  height:100%;
}

/* 上 */
.box .item:nth-child(1) {
  transform:translate3d(0, -50px, 0) rotateX(-90deg);
}

/* 左 */
.box .item:nth-child(2) {
  transform:translate3d(0, 0, 50px);
}

/* 右 */
.box .item:nth-child(3) {
  transform:translate3d(50px, 0, 0) rotateY(90deg);
}

②色付きVer.

style.css

/* ①に↓を追記 */
.box {
  background: #ccc;
}

※各面で違う色や背景画像を指定することも可。
その場合は各nth-child()の指定があるところにbackgroundを指定。

③文字入りVer.

index.html

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

style.css

/* ①に↓を追記 */
.box {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

④サイコロVer.

style.css

/* 画像を用意して①に↓を追記 */

/* 上 */
.box .item:nth-child(1) {
  background: url(sai1.png) no-repeat center center / 100% 100%;
}

/* 左 */
.box .item:nth-child(2) {
  background: url(sai2.png) no-repeat center center / 100% 100%;
}

/* 右 */
.box .item:nth-child(3) {
  background: url(sai3.png) no-repeat center center / 100% 100%;
}

※画像は一番下にあります。

⑤サイコロ アニメーションVer.

index.html

<div class="dice">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

style.css

.dice {
  display:block;
  position:relative;
  margin:30px auto 0;
  width:100px;
  height:100px;
  transform-style:preserve-3d;
  transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg);
  animation:rotate-animation 2s linear infinite;
}

.dice .item {
  position:absolute;
  left:0;
  right:0;
  border: 1px solid #333;
  box-sizing:border-box;
  width:100%;
  height:100%;
}

/* 1 */
.dice .item:nth-child(1) {
  transform:translate3d(0, -50px, 0) rotateX(-90deg);
  background: url(sai1.png) no-repeat center center / 100% 100%;
}

/* 2 */
.dice .item:nth-child(2) {
  transform:translate3d(0, 0, 50px);
  background: url(sai2.png) no-repeat center center / 100% 100%;
}

/* 3 */
.dice .item:nth-child(3) {
  transform:translate3d(50px, 0, 0) rotateY(90deg);
  background: url(sai3.png) no-repeat center center / 100% 100%;
}

/* 4 */
.dice .item:nth-child(4) {
  transform:translate3d(-50px, 0, 0) rotateY(-90deg);
  background: url(sai4.png) no-repeat center center / 100% 100%;
}

/* 5 */
  .dice .item:nth-child(5) {
  transform:translate3d(0, 0, -50px) rotateY(180deg);
  background: url(sai5.png) no-repeat center center / 100% 100%;
}

/* 6 */
.dice .item:nth-child(6) {
  transform:translate3d(0, 50px, 0) rotateX(-90deg);
  background: url(sai6.png) no-repeat center center / 100% 100%;
}

@keyframes rotate-animation {
  from {
    transform:rotate3d(0);
  }

  to {
    transform:rotate3d(1, 1, 1, -360deg);
  }
}

感想

.2sくらいで超高速でアニメーションさせたら、桃鉄のサイコロ振る時みたいにできるよ。

あ〜〜桃鉄やりたい。

参考・素材

https://shanabrian.com/web/css3/transform-cube-dice.php
https://chicodeza.com/freeitems/saikoro-illust.html

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ