あそぶ技術

フィヨルドブートキャンプでRuby on railsの学習をしている僕の学習ブログです。

フィヨルドブートキャンプ学習記事まとめ

このまとめについて

現在フィヨルドブートキャンプ でRuby on Railsを学んでいます。

フィヨルドブートキャンプ ではブログやツイッターでのアウトプットが推奨されていまして、僕はブログでのアウトプットを頻繁にしています。

そんな訳で書いていたブログ記事がそこそこ増えてきたので解りやすいように整理してみました。

僕の学習が進んだらどんどん記事が増えていく予定です。

読んでやってみて解り辛い所やハマっている所があったら気軽にご連絡下さい。

フィヨルド生以外で解らないって人はとりあえずフィヨルドブートキャンプに入れば良いかも(宣伝)

フィヨルド生以外でもコメントもらえれば全レスしますよ。

ブログ

CSS

tarminal

Homebrew

vim

Linuxのdevian

SSH

debibanRTA

debianからSSH終わりまでの高速道路です。

ただ、これだけやっても身に付く物が少なそうなのでdebianSSHの記事を終わらせてからやる事をお勧めします。

postgreSQL

HTTP

Nginx

sshとsshdの違いとは何か

そのDなんのD?気になるD

sshの設定をするときにsshd.configの設定を変更するんですがsshdって何だろう?と思ったので調べてみました。

何だろうこのDは

もしやDの血族?

DはDaemonのD

sshとsshdの違い

ssh(クライアント) : 他のサーバにsshで接続する設定 sshd(デーモン) : 他のサーバからsshで接続されるときの設定

sshdは他のサーバのsshクライアントから実行されたコマンドを実行する。 そのため、sshd の動作していないマシンには、ssh クライアントでログインできない。

sshを受け取るプログラムがsshdみたいですね。

ssh絶対受け取るマンだコレ

の事みたいですね。

デーモンって悪魔ですよね?

悪魔ってどう言う事?

神か悪魔か

デーモン (ソフトウェア) - Wikipedia

典型的なデーモンは名前の最後尾に "d" が付く

daemon(守護神)とはギリシャ神話に登場し、神々が煩わされたくないと考えた雑事を処理した存在である。同様にコンピュータのデーモンもユーザーが煩わされたくないタスクをバックグラウンドで実行する

多くの人々が "daemon" という語と "demon" という語を同等視しており、UNIXと冥界の間にある種の悪魔的関係があるように感じている。これは言語道断な誤りである。"daemon" は実際には "demon" のより古い形であり、daemon自体には善または悪への特定の偏向の意味はなく、むしろ個人の性格や個性を説明付ける役割を担っていた。古代ギリシアにおける「個人的daemon」の概念は現代の守護天使に近く、eudaemonia は親切な精霊によって助けられたり保護されたりしている状態を意味する。

へー、なるほど守護神とか守護天使の事なのね。

玄関先にいて守ってくれる番犬とかシーサーみたいな存在なのかな。

別のページにはこんな記述も

デーモン (daemon)とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

デーモン (daemon)とは メモリ上で「さぁ、いつでもかかってこい」と待機している常駐プログラムのUNIX系OSにおける呼び名 です。

常駐プログラムは「いつでもお仕事できるようにスタンバってたり、(人の見えないところで)常にお仕事をしているプログラム」です。 休みなんてありゃしない、常に戦闘態勢を維持することが求められているプログラムです。 メモリ上でお仕事が来るのをぼーっと待っていて、お仕事が来るとささっと実行し、終わるとまた待機状態に戻ります。

デーモンとは - IT用語辞典

デーモンはOSに登録され、コンピュータやOSの起動(ブート)時に一緒に起動され、実行状態となる。強制終了など特殊な場合を除いて基本的に利用者が直に操作することはない。HTTP通信を処理する「httpd」のように、デーモンの実体となる実行可能ファイルの名称には末尾に「d」を付ける習慣がある(必ずしも従う必要はないため例外も多い)。ちなみに、Windowsではほぼ同様のプログラムを「サービス」という。

なーんだ、悪魔じゃないんのかー

常駐プログラムとかめっちゃ便利なありがたい存在じゃないですかー

と思ってたんですがこうも書いてあります。

フェルナンド・J・コルバトによれば、MITのProject MACで働いていた1963年、彼のチームがデーモン (daemon) という用語を初めて使ったという。分子をより分けてくれるという物理学や熱力学の空想上の存在であるマクスウェルの悪魔 (Maxwell's demon) が発想の元となっている

やっぱ悪魔じゃねーか!!

何が守護天使だよ、180度違うよ!

マクスウェルの悪魔って何奴だよー!

f:id:zeroringo:20180823165546p:plain

マクスウェルのデーモン

[マクスウェルの悪魔とは (マクスウェルノアクマとは) [単語記事] - ニコニコ大百科] (http://dic.nicovideo.jp/a/%E3%83%9E%E3%82%AF%E3%82%B9%E3%82%A6%E3%82%A7%E3%83%AB%E3%81%AE%E6%82%AA%E9%AD%94)

空気の分子の速さを見分けて窓を開け閉めできるちっちゃい人(コイツこそが「マクスウェルの悪魔」である!)

マクスウェルさんが妄想の中で生み出した早い分子と遅い分子を二つの部屋に分けられる存在、こいつがマクスウェルの悪魔のようですね。

うーん、別に悪いことしてないし悪魔なのこれ?

頼んだことをずっとやってくれる便利な存在っぽいのでやっぱ守護者っぽいです。

なんだよー

でも、常駐プログラムも悪い使い方をすればスパイウェアとかになるし悪魔って言われても判らなくもないかな?

daemonのイラスト

linux daemonで画像検索するとこんな画像が出てきます。

f:id:zeroringo:20180823161359p:plain

悪魔っぽい

でも、西洋建築に良くあるガードイルも見た目は悪魔っぽいけど魔除けに用いられているので、僕はそんなイメージで脳内補完しました。

BSDデーモン - Wikipedia

手に持つトライデントはプロセスのフォーキングを象徴している。 だそうです。(解ってない)

このwikiの外部リンクにいっぱいデーモン君のイラストがあります。

グッズ化もされているようですよ。

The FreeBSD Mall

まとめ

  • sshdssh絶対受け取るマンの事
  • sshdのDはdeamonのD
  • daemonは常駐プログラムの事
  • deamonの語源は悪魔っぽいが動きは守護者っぽい働きをする

以上です。

SSH公開鍵が送れない

公開鍵が送れない!

SSHでのログインが急に出来なくなったのでdebianを再インストールし再びSSHの設定をしています。

そして、sshの公開鍵を送るところが上手く出来ずハマりました。

つらみ

これはその時のログです。

最後に成功例も載ってます。

f:id:zeroringo:20180822170044p:plain

4回の失敗例

本当はもっと失敗しています。

f:id:zeroringo:20180822170140p:plain

イェー

失敗例 1

入力コマンド

ssh-copy-id -i ~/.ssh/client_rsa.pub

全文

hiyotatu8MBP:.ssh hiyoshitatsuya$ ssh-copy-id -i ~/.ssh/client_rsa.pub
/usr/local/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/Users/hiyoshitatsuya/.ssh/id_rsa.pub"
/usr/local/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed

/usr/local/bin/ssh-copy-id: ERROR: ssh: Could not resolve hostname /users/hiyoshitatsuya/.ssh/client_rsa.pub: nodename nor servname provided, or not known

f:id:zeroringo:20180821134021p:plain

原因

  • スペルミス 転送するキーはclient_rsa.pubではなくid_rsa.pubなのでシンプルに間違ってる。
  • 接続先サーバーのアドレスと公開鍵を送るユーザーの指定が無い
  • そりゃ送れんわ

失敗例 2

入力コマンド

ssh-copy-id -i~/.ssh/id_rsa.pub
hiyotatu8MBP:.ssh hiyoshitatsuya$ ssh-copy-id -i~/.ssh/id_rsa.pub

/usr/local/bin/ssh-copy-id: ERROR: failed to open ID file '~/.ssh/id_rsa.pub': No such file or directory

f:id:zeroringo:20180821133929p:plain

原因

  • id_rsa.pubにはなっているので鍵のスペルは合っている
  • -iはItentitiyFileの事らしい、良く解らないがsshの転送コマンドに良く書かれている
  • -iの後に半角スペースが無い
  • 接続先サーバーのアドレスと公開鍵を送るユーザーの指定が無い

ItentitiyFileについて

ItentitiyFileについては調べてみるも良く解らなかった。

一番最初に読み込ませるユーザー用にカスタマイズされた設定なのかな?

一応調べた資料を残しておきます。

man ssh-copy-idでマニュアルを見てみる

f:id:zeroringo:20180822160025p:plain

こんな感じ。

Identitiyについて

identify / identification / identifier / identity

そのユーザーが本人かどうか識別するのをidentify。動詞。

識別する行為そのものはidentification。identifyの名詞形。識別、ID、身分証。

そのユーザーを特定するために用い情報をidentifier。識別子。氏名、変数名など。

そのユーザーを特徴付けるあらゆる情報をidentity。アイデンティティ、同一性。

つまりどう言うことだってばよ!

失敗例 3

入力コマンド

ssh-copy-id ~/.ssh/id_rsa.pub

全文

hiyotatu8MBP:.ssh hiyoshitatsuya$ ssh-copy-id ~/.ssh/id_rsa.pub
/usr/local/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed

/usr/local/bin/ssh-copy-id: ERROR: ssh: Could not resolve hostname /users/hiyoshitatsuya/.ssh/id_rsa.pub: nodename nor servname provided, or not known

f:id:zeroringo:20180821133536p:plain

原因

  • 1つ目の失敗例と違いスペルは合っている。
  • が、接続先サーバーのアドレスと公開鍵を送るユーザーの指定が無い
  • まあ送れないですよね。

失敗例 4s

入力コマンド

ssh-copy-id ~/.ssh/id_rsa.pub hiyotatu8@153.126.184.96:~/.ssh/authorized_keys

全文

hiyotatu8MBP:.ssh hiyoshitatsuya$ ssh-copy-id ~/.ssh/id_rsa.pub hiyotatu8@153.126.184.96:~/.ssh/authorized_keys
/usr/local/bin/ssh-copy-id: ERROR: Too many arguments.  Expecting a target hostname, got: '/Users/hiyoshitatsuya/.ssh/id_rsa.pub' 'hiyotatu8@153.126.184.96:~/.ssh/authorized_keys'

Usage: /usr/local/bin/ssh-copy-id [-h|-?|-f|-n] [-i [identity_file]] [-p port] [[-o <ssh -o options>] ...] [user@]hostname
    -f: force mode -- copy keys without trying to check if they are already installed
    -n: dry run    -- no keys are actually copied
    -h|-?: print this help

f:id:zeroringo:20180821133450p:plain

原因

  • 公開鍵の名前も合っているし、送り先の情報も書いてある。
  • 最後に付け足してある:~/.ssh/authorized_keysのせいで送れなかったのだと思う
  • どこかのサイトから拾ってきたのだと思う(記録は残していなかった)
  • 送った鍵の名前をauthorized_keysに変更したかったのだと思う
  • しかし、ssh-copy-idコマンドで鍵を転送した場合は指定しなくても転送された公開鍵の名前がauthorized_keysに変更されるので蛇足ですね。

成功例

入力コマンド

ssh-copy-id -i ~/.ssh/id_rsa.pub hiyotatu8@153.126.184.96

全文

hiyotatu8MBP:.ssh hiyoshitatsuya$ ssh-copy-id -i ~/.ssh/id_rsa.pub hiyotatu8@153.126.184.96
/usr/local/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/Users/hiyoshitatsuya/.ssh/id_rsa.pub"
The authenticity of host '153.126.184.96 (153.126.184.96)' can't be established.
ECDSA key fingerprint is SHA256:sMz3HIDgnq5XxN+gKfFWYHalH8zsmoKC4ZJdXpNtmyU.
Are you sure you want to continue connecting (yes/no)? yes
/usr/local/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/local/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
hiyotatu8@153.126.184.96's password: 

Number of key(s) added:        1

Now try logging into the machine, with:   "ssh 'hiyotatu8@153.126.184.96'"
and check to make sure that only the key(s) you wanted were added.

f:id:zeroringo:20180821132823p:plain

こんな感じ

-iについて’は良く解らないけれど過不足無く必要な情報があるので上手く転送出来たんでしょう。

一応さくらVNCコンソールでSSH公開鍵がちゃんと転送されてるか確かめてみる。

f:id:zeroringo:20180821133215p:plain

ありました。

やったー

まとめ

なんか疲弊したけど良い復習になりました。

改めて見てみるとしょーもないミス集ですね。恥ずかしいわー

最近ハマっても新しいブログのネタだなこれと思える精神になってきています。嫌なものは嫌だけれどもな!!

後、こまめにログを取るの良いです。

自分のミスを後で振り返り原因を明確にする作業は爽快感があります。

sshに関するログが溜まってきたのでそれで3記事ぐらい作れそうです。

この後、sshd.configでもハマっています。何で設定効かないねん。

チックショー!!

f:id:zeroringo:20180822170333p:plain

僕がCSSの課題を進めた順番について

CSSメモについて

フィヨルドブートキャンプ CSSの課題の際にiPadにProceateというソフトを使ってメモをしていたのですがそれが残っていました。

参考にならない箇所もあるかも知れませんが、最初の方の大まかなところから作るところについては何処から手をつけて良いか解らないという人の参考になるんじゃないかな?と思い公開します。

僕はこの順番で作りましたよ。

f:id:zeroringo:20180820124742p:plain

字が読み辛いかも知れませんがスマホでは普通に拡大出来るしPCの場合も画像をクリックで拡大できたはずです。

字が汚い件についてはスマン

大デザインの整理

f:id:zeroringo:20180820115833p:plain

大きな塊を把握しようとしていますね

まずここから作りました。

中デザインの整理

f:id:zeroringo:20180820115915p:plain

中ぐらい塊に関わるタグを書いているようです。

これで全体の大まかなレイアウトが出来ます。

footerメモ

f:id:zeroringo:20180820115956j:plain

footerのリンク横にあるスペースについてメモしています。

同じっぽいなと

画像のサイズ

f:id:zeroringo:20180820115934p:plain

画像のサイズを書き込んでいます。

コンテンツにある料理の画像が明らかにでかいですね。

デザインの比率

f:id:zeroringo:20180820120225p:plain

比率で作られてるっぽいという気づきを書いています。

しかし、このメモが活きたかどうかは覚えていないです。

サイズを決める時に迷わないで時短できたはず。

ビルボードイメージ

f:id:zeroringo:20180820120311p:plain

三つ並んだ画像について書いていますね。

でも、正直何書いてるのか解らん

普通に配置するとマウスを画像の上に乗せた時(on mouse)画像の周囲に1pxの白い幅が発生し気持ちが悪かったので、その対処に苦戦してた時のメモだと思います。

あとで町田さんに聞いたら、そこまでやんなくて良いよって言われた記憶。

コンテンツ

f:id:zeroringo:20180820120322p:plain

記事部分の情報を整理してるみたいですね。

form

f:id:zeroringo:20180820120338j:plain

formについての書き込みです。

共通するデザインの場所、共通するHTMLタグを探しているみたいです。

HTMLタグが共通していればそのタグにCSSを利かせれば一気にデザイン変えられて楽そうだなとか思ってた気がします。

f:id:zeroringo:20180820120547j:plain

これもformについてですね。

読み辛い字でformのフォントはCSSで変えてはいけない、javascriptで変えるというような事が書かれています。

多分、町田さんからのアドバイスだと思います。

アイコン

f:id:zeroringo:20180820120805p:plain

アイコンについて書かれています

アイコンの場所とborder-radiusの仕様についての覚書ですね。

アイコンの場所についてはともかく、border-radiusの仕様については何書いてるか解んねーなこれ

アイコンを作る際にborder-radiusの仕様を知ることはとても重要だった気がします。

上下左右のborderの色を変更しつつサイズを変えながら仕様を確認して行った時のメモだったと思います。

パンくずリスト<にも丸をつけていますがCSSで図形を作るのでは無く不等号記号(<)で作りました。

 まとめ

  1. 最初に大きい塊から作って次の塊を作り
  2. 次にヘッダー、コンテンツ、フッターの内部。
  3. 最後にフォーム、アイコン

という順番で進めています。

この順番が作りやすいのではなかろうか?

f:id:zeroringo:20180820124823p:plain

あとは情報を整理したりまとめたりしていますね。

他にもメモはあったのですが、パッと見何書かれてるか解らなかったので未公開で

以上です。

多少でも参考になれば嬉しいです。

ではー

SSHが急に使えなくなった(未解決)

未解決ままです。 結局さくらVPSdebianを再インストールしました。

一応ログを取っていたのでupしておきます。 興味のある人以外本当に読まなくて良いやつです。

参考資料

さくらのVPSへsshで接続できない PermissionDeny(publickey) - 株式会社オルタナティブエンタープライズ|ALTERNATIVE ENTERPRISE

SSH で Permission Denied となる傾向と対策

SSHから接続ができない

tarminalでSSHから接続ができないエラーが

Permission Deny(publickey)

と、出てしまう。

f:id:zeroringo:20180817140500p:plain

こんな感じ。

VNCコンソールを使えるようにする

ならばとさくらVPSVNCコンソールを使ってみるも

Connected(encrypted)と表示されるも黒い画面にならず

f:id:zeroringo:20180817141353p:plain

試しに画面左上のEscボタンを押してみる

すると、こんな画面になる。

f:id:zeroringo:20180817141437p:plain

画面を広げると下にコマンドが入力出来るスペースが見つかる。

f:id:zeroringo:20180817141451p:plain

これでようやくVNCコンソールで入力ができる。

sshdの設定を変更する

VNCコンソールからSSHの設定を変更していきます’。

$ sudo vi /etc/ssh/sshd_config

設定ファイルがviで開くので設定を変更していきます。

公開鍵認証をオフにする

# PubkeyAuthentication yes

PubkeyAuthentication no

パスワード入力をオン

PasswordAuthentication no

PasswordAuthentication yes

こう変更しました。

再起動して設定変更を効かせます。

sshdを再起動

$ sudo /etc/init.d/sshd restart

f:id:zeroringo:20180817140310p:plain

さくらVPSのシリアルコンソール(β版)だとここでコマンドが見つからないというエラーが出てしまいます。 f:id:zeroringo:20180817142404p:plain

しかし、先ほど設定したVNCコンソール版だとエラーも吐かず普通に使えてるっぽいです。

f:id:zeroringo:20180817143153p:plain

こんな感じ。

tarminalからSSHでログインしてみるとパスワードを求められます。

パスワードを入力すると、入れました。

f:id:zeroringo:20180817143239p:plain

認証鍵ペアの削除

サーバーのauthorized_keysを消す。

f:id:zeroringo:20180817144408p:plain

PC側のclient_rsaclient_rsa.pubを消す。

f:id:zeroringo:20180817144742p:plain

新しいキーペアを作る

f:id:zeroringo:20180817145356p:plain

f:id:zeroringo:20180817145546p:plain

出来ました。

scp ~/.ssh/作った鍵の名前これをサーバーに送る サーバーのuser名@サーバーのアドレス:~/.ssh/作った鍵の名前(←名前を変えたかったらここを変更する)

port 22: Connection refused というエラーが出てしまう。

f:id:zeroringo:20180817160045p:plain

portを22に変更しても、駄目

公開鍵認証をオンに戻し

PubkeyAuthentication no

# PubkeyAuthentication yes

パスワード入力をオフに戻してみるも

PasswordAuthentication yes

PasswordAuthentication no

駄目

id_rsa.pubの中の文字列をコピーして

f:id:zeroringo:20180817165412p:plain

vi authorized_keyで新しいファイルを作りつつコピーした文字列をペースト

:wqで保存して終了

f:id:zeroringo:20180817165753p:plain

chmod 600 authorized_keyで自分しか見れない&編集出来ない状態に変更しました。

sshでtarminalからログインを試みるとパスワードを求められ入力するとログインできてしまうポート番号も変更し直してないのに

おかしいのでtarminalからsshd_configを弄ろうとする

sudo viで設定ファイルを開くためパスワードを求められる

入力しようとするとエラーが出てきてしまう。

debug1:

debug3:

debug1:

debug3:

VNCコンソールでログインする際に

-vvvv -Pでログインの際の詳細をみると

やっぱりエラーをめっちゃ吐いてる’

VNCコンソールでconfigを開いてみると

なんか違う。

f:id:zeroringo:20180817173318p:plain

f:id:zeroringo:20180817173322p:plain

f:id:zeroringo:20180817173328p:plain

特に下の方

こんなん弄ったっけ

ここでdebian再インストールしました。

CSSデザインで一番最初に気をつけるべき3つのポイント

CSSで苦しんでいる人が多いようなので作ってみました。

うろ覚えの簡易版なので間違ってるところもあるかも。

ともかくボックスモデルとfrexboxとresetCSSさえ解れば大枠は作れるのでここを抑えましょう。

ボックスモデルの理解

f:id:zeroringo:20180817113720p:plain

今更聞けない!エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | ヌーラボ

この図を頭に叩き込みましょう。

https://d19ta9rijs3cxg.cloudfront.net/wp-content/uploads/sites/2/2015/12/4.png

  • ボックスモデルを頭に入れる
  • borderの位置にちゃんと入ってるか確認してください。paddingとmarginの間ですよ
  • widthとheightはcontentに利きます。paddingじゃ無いですよ
  • 今後gredデザインというのが主流になっていくっぽいですがそこでもボックスモデルは使われます
  • つまり、陳腐化されにくい知識だよ
  • ブロック要素とインライン要素の違いも合わせて覚えるが吉

frexは便利

f:id:zeroringo:20180817113751p:plain

フレックスボックスについて抑えましょう。

ボックスモデルが理解できていないと上手く扱えないのでボックスモデルの位置関係を先に把握しましょう。

floatデザイン→flexboxデザイン→gridデザインという風に進化していっています。

次はgridデザインがくるのですぐ陳腐化するそうですが、今の所はfrexが便利ですよ。

rsetCSSについて知ろう

f:id:zeroringo:20180817113804p:plain

  1. ブラウザには初期設定のCSSがあります。
  2. そしてそれはGooglechromeFireFoxSafariIEなどブラウザごと違います。
  3. そのブラウザでも同じデザインで表示させたい為、CSSの一番最初に全てのCSSを上書きするCSSの設定を置きます。
  4. その後効かせたいCSSを書き込んでいきます。
  5. CSSには後に書いたCSSの設定が優先されるという仕様がある為こう行った方法で様々な種類のブラウザで同じデザインが表示されるように工夫しています。
  6. これをrisetCSSと言い、様々な種類があります。
  7. リセットされるといっても全ての設定を消すのではなく、使いやすいように良く使われる設定などが書いてあります。
  8. それが時代や状況によって違う為、複数のrisetCSSがあるのです。
  9. 自分の使うresetCSSについてある程度知っておくとCSSの指定をする時に混乱を少なくでき楽になります。

原因と結果の探り方

  1. 何をすべきかを考える
  2. 今自分が何をしたのかを知る
  3. その結果どうなったのかを知る

この繰り返しです。

単純なんですが今何やってんのか良く解らなくなりますし、何でこうなったのか解らなくなります。

少なくとも僕はなったぞ!

その対処法を紹介します。

今何をしたのかを明確にする

  • どこ何を効かせたのかを解りやすくする
  • 解りやすくする為にbackground、textに色を付けよう
  • 色はそれぞれ解りやすく違う色に変えましょう。色調は最後に合わせればいいんです。
  • 背景に色を付けることでピクセル単位のズレが解ります。

google console を使ってみる

  • Macの場合 control+クリック
  • Winの場合 右クリック

でメニューが開きます。

  1. メニューから検証を選択
  2. これでgoogle consoleが開きます。
  3. コンソールのHTMLにマウスを合わせた場所がサイトのどの部分かが解ります。
  4. コンソールメニューの左上の矢印マークを押すと逆にサイトにマウスを合わせたHTMLの場所が表示されます。

自分が作ったサイトのデザインがどうなっているか?これで検証してみましょう

ボックスモデルが色分けで表示され、それが何pxなのかというサイズも解ります。

なのでどのCSSの指定が効いているのか、また効いていないのかが解ります。

大きな所から手をつける

大きなところから完成させ、徐々に小さい所を作り込んでいくという作りかたが楽です。

  1. まずは、hedder、nav、sidebar、content、fotterの位置を決めてみましょう。
  2. それが出来たら上のそれぞれのパーツの中身の位置を決める。

という順番でやっていくと良いと思います。

もっと知りたい方は↓こちらをどうぞ。

zeroringo.hateblo.jp

難しかった所

確かここが難しかったような

  • calc()は便利だが理解に手間取った
  • 巨大な画像をどうするか
  • formのデザインが乱れる問題
  • 図形を作る

終わりに

解らない所があったら教えてください。

答えをそのまま教えることは出来ませんがヒントは出せるかも!

f:id:zeroringo:20180817114140p:plain

PAINT EXのディスクがMacに読み込まれない問題の解決

CDが認識されない!

画像編集を楽にしたいと思い、タンスの肥やしと化していたCLIP STUDIO PAINT EXを引っ張り出して使ったろうと思いまして、CD/DVDドライブの無いMacBookProにインストールする為に外付けドライブでディスクをインストールしようと思ったんですが

ディスクが認識されない!

f:id:zeroringo:20180814170749p:plain

検索してみたところ

CLIP STUDIO PAINT 動作環境

mac OS Sierra(10.12)、High Sierra(10.13)でご利用の場合は、こちらAppleガイドラインに沿ってiCloud Driveの設定を行ってください。

こんな事が書かれていました。

私のMacのOSのバージョンはHigh Sierra(10.13)です。

なんかやる必要があるのかな?と思い下のページを試してみました。

「ストレージを最適化」使用時にプロ向け App を使う方法

が、言われた通りiCloud driveのMacストレージを最適化のチェックを外し再起動したがやはり読み込まない

なので電話で問合せしてみました。

そしたら速攻で解決しました。

ディスクは要らない

解決方法はシンプルです。

公式ページからダウンロード出来るダウンロード版があるそうでそれをダウンロードするだけ。

あれ、ディスク要らなくね?

手順

CLIP STUDIO PAINT ソフトウェア/関連データのダウンロード

  • macOSをクリック

f:id:zeroringo:20180814162243p:plain

CLIP STUDIO PAINT for macOSのダウンロード

  • CLIP STUDIO PAINT for macOS Ver.1.7.8 (約300MB)(2018/7/5)をクリックしてダウンロード開始

もちろん表記はその時点での最新版になっていくでしょうしやデザインは変わっていくと思います。今はこんな感じ。

  • ダウンロードしたファイルをクリックしインストールを進めていきます。

f:id:zeroringo:20180814162332p:plain

f:id:zeroringo:20180814162417p:plain

ダウンロードが終わると画面が開きます。

f:id:zeroringo:20180814163121p:plainf:id:zeroringo:20180814163126p:plainf:id:zeroringo:20180814163131p:plain

  • 素材などをダウンロードします。(少し時間がかかる

  • ライセンス照合の画面が出てくるのでライセンスキーを入力。

  • ライセンスを登録するをクリック

f:id:zeroringo:20180814163223p:plain

  • 今すぐライセンスの称号を行います。を選択
  • 次へをクリック

f:id:zeroringo:20180814163641p:plain

  • 自動で行います。を選択
  • 次へをクリック

f:id:zeroringo:20180814163644p:plain

登録出来ました!

f:id:zeroringo:20180814163646p:plain

これで勝つる

f:id:zeroringo:20180814164204p:plain

以上です。