白圭望のクリスタル探索BLOG

 どうもこんにちは、大人気バトロワゲームのFortniteがAppleに謀反を起して、Appストアーから削除をくらうという事件が起きています（２０２０年８月１３日）。で、謀反を起したくせに、フォートナイトの開発会社であるEpicはアプリの削除を受けたことについてアップルを訴えてしまいました。しかもアップルを挑発するような　”１９８４”ムービーまで流しています。 これにガチギレされたのかアップルさんはなんと、アップルにあるEpicの開発者アカウントを凍結する意向を決めています。どうやらこうなってしまうと、Epicが開発したゲーム開発ソフトであるアンリアルエンジンが使用できなるようで、そうなってしまうと、Unreal Engineで開発されたゲームはアップルのAppストアから根こそぎ消えることになるそうです。かなりのタイトルが消えるんじゃないでしょうか。いいのか？ 　Epicさんはかなりアップルへの憎しみがあるようで、本日、＃freefortnaitcup　というトーナメントを８月２３日に開催するというアナウンスがありました。ビックブラザー（りんご）を倒しまくって、賞品をゲットしよう！みたいな感じのトーナメントですが、その商品が、なんとアップル製品以外のゲームが遊べるデバイス。PCとかSwitchとかゲーム用ラップトップとか、アンドロイドphoneとか・・・。 面白そうなんでつい、Switchでフォートナイトをダウンロードしちゃったじゃないかｗ。 しかも、アップルユーザーには８月２７日に大型アップデートするから、お引越しをお勧めしちゃっています。 アップルさんは、規約違反さえ直してくれればいい。というわけなんですが、Epicはもう完全にお別れを告げている状態ですね。 しかし、、、 こんなにユーザーが振り回されていいんかね。。。？ 早く解決してほしいと思いながらも、両者の今後の動きに目はくぎ付けです！ ここから先は私の勝手な考察です。私はゲームが好きなので視点がちょっと偏っているかもしれませんのであしからず。こちらのYoutubeビデオは英語ですがよく説明されているので見てみると面白いと思います。 エピックはなぜアップルに喧嘩を仕掛けたのか？   　 Epic が文句を言っているのはアプリ内課金のお手数料で、ユーザーが何かを買うたびに...

こんにちは、実はYouTubeで配信を始めたいなあ、と思いいくつかビデオを作ってあげてみただけでストップしてしまっている、グーたらおばさんです。 飽き性をどうにかせんといかん もともとなんですけど、最近自分が凄く飽き性で、一つのことが続けられていない。という欠点に気が付きました。ふふん、こんなことに気が付くのに、30年以上かかってしまった。（困ったもんだ）色々なことに興味が沸いては消え、また再熱しては気が散り、色々欲しくなってはあきらめる。という状態であります。子供のころを一つのことに熱中持ってできていたような気がしますがね。なにか障害が起こるとすぐにあきらめてしまう癖がついているのかもしれません。 自分のポンコツ性能をうまく利用したい 飽き性で興味がコロコロ移っていくのではありますが、ある程度行くと一周回って興味が元に戻る習性があるようなのです。バラバラなことをやっているようで、ある程度方向性は固定されているのではないのか？　ということでもあります。なので、自分のジャンルっていうのを、上手に作り出せないかなあという事なのです。YouTubeのチャンネルつくりはこういう事をよくわかったうえでやったほうがいいのかなあ。 　あと、物理的に色々なことをやりたくなってしまうので、いったん例えば１の興味がそれて、別のこと２や３をやり始めて、しばらくて１に興味が戻ってきたときにまたその続きができるようなシステムを作ること、あまりに長ーーい一周だと元に戻ってきたときにすっかり忘れ去っているという事が無いようにしないといけないですよね。 というこは・・・いかに情報を整理整頓しておけるかってところなのかなあ。 うーむ。上手いことやらないといけないですなあ。 とりあえず、私の好きなこと、夢中になってしまう事を書き出してみようと思う。 私が興味を持っていることたちをリストアップしてみる。 ガジェット関係（映像編集やアニメーション、音楽制作にかかわるものが好き。買えないけどね。） PC　スペックとか色々調べたい。 携帯　iPhoneかGoogleか アクションカメラ　Go proか Insta 360か・・・ Dslrの使い方を極める ソフトウェア（イラスト、映像、３DCG、ゲーム、映像編集できるもの） Clip Studio EXの使...

どうもこんにちは、最近簡単なアニメを作って見たいなあ。と思い色々試してみたので、今現在独学で理解できたところをまとめてみようと思います。アニメーション歴はまだ2か月ほどです。超初心者。 最近YouTubeもはじめたので、よかったら見てみてください。Orz ソフトはClip Studio Ex まずはソフトですね。あまりお金をかけたくなくて色々試したのですが、結局はクリスタのExを購入することにしました。もともとイラストをクリスタで描いていたので、慣れている。というのが一番の要因です。はじめはClip Studio Proでしたが、いい感じでアニメーション作ろうと思ったら、1秒程度の動画しか作れないことに限界を感じたことも多いです。 　使った感じですが、自由度は高く、さすがプロ御用達といったところかと思います。ただお金がかかりました。ダウンロード版で23000円、iPadで使うと月980円かかってきます。（クリップスタジオのHPより https://www.clipstudio.net/paint/lineup ） ただ動画編集するにはヘッポコな私のPCですが、そんなスペックでもクリスタExはサクサクと使用できるのもありがたく思っています。使い方次第ではモーショングラフィックも作れるでしょう。 音声編集もできる 音楽ソフト程とはいかないですが、オーディオファイルの挿入、カット、フェイドイン／アウト、音量調整などはできるようです。オーディオファイルを複数作ることもできるので、別の音を同時に流すこともできました。（例えば、BGMの上に効果音など）この機能があることで、別のソフトを開いて動画と音を合わせてみて、ちょっと直しがあってクリスタに戻って～、みたいな面倒なことをしなくて済みますね。かなり便利な機能だと思います！ 無料ソフトならBlenderがおススメ Blender2.8以降ですと２Dアニメーションも作れます。システム的には自動補完がかなり便利なので使ってみる価値は大いにあると思います。 クリスタとBlenderのちがいで私が感じたことはこんなところ、 １．ペンの種類が少ないので、表現の範囲が狭くなる。（Add-onとかでもしかしたら増やせるのかもですが、わかんないです。すいません。） ２．レイヤーがちょっと使いに...

こんにちは。米国在住のぐうたら主婦が、リングフィットネスを手に入れダイエットを始めた話でも書いていこうと思います。 任天堂スイッチとリングフィットネスをBlack Fridayで購入！ ダイエットしたいし、運動はしなくちゃいけないけれど、ジム行くのもめんどいし、大体他人に運動しているところなんか見られたくない！人見知りなんだよ！という私にもってこいのリングフィットネス。宣伝を見たときから、これだ！これがやりたい！と思っていたので、手に入れたときはムフフでした。日本だと品薄状態のようですが、アメリカ、ロスだと結構まだある。家で運動する人は田舎は多い感じがするけど、ロスとかNYじゃあジムに行くのが当たり前だから・・・なのかな。 Best BuyのBlackFridayは見逃せない！ どこもかしこもブラックフライデーのセールはやっているのですが、BestBuyはなかなか良かったです！なぜなら、 任天堂スイッチを買うとマリオカートデラックスがタダでついてくる！ その他コントローラーなどもガッツリ値引きされていたし、 PS4も＄１００ドル引き 、 Switch版のファイナルファンタジーXとXIIは、なんと５０％OFF！ 　ヒョッホー！でした。普段こういったセールなどには参戦しないのですが・・・。今回ばかりは列に並んでBestBuyに突入してきましたよー！ 今後もBestBuyのセールには目を光らせておこうと思います。ワクワク。 というわけで、ついに念願の任天堂Switchを手に入れたわけであります！やったーー。しかも本体を日本語設定にしたら、アメリカで買ったソフト入れても、全部日本語になるんですね！知らなかった！現在はマリオカードデラックス、リングフィット、FF１０をプレイ中ですが、全部日本語で遊べております。ほー、英語がますます勉強できん（笑） リングフィットネスを始める前の私 年齢：３６ 身長：１５６㎝ 体重：５５kg 私は現在かなりダラケタ生活している状態でして、ワンコの散歩があるから、多少の2足歩行とご近所との挨拶はするけれども、それ以外の時間はほぼ床に転がってゴロゴロしている状態。四捨五入で４０にもなろうとしている上に、運動不足、食欲は右肩上がり、階段をちょっと登れば息が切れ、夫からはアザラシがいると言われる始末。 ...

自分だけの映像作品を作って見たいなあ。と思ったときに気になるのが音源ですよね。音も自分で作れたらいいなあと思って色々調べてみました。 選んだのはRoland Zenbeats 私現在メインで使っているPCはSurface Pro5(Corei5 8GB 64bit)です。これが結構軽くて使いやすいので気に入っております。これで使えるソフトがいいなあと思いまして。色々考えた結果、Roland Zenbeatsを選んでみました。単純にiOSやアンドロイドでも使えるのっていいなあと思ったのです。 おすすめと言われるDAW Cakewalk Studio One Reaper Cubase Logic Pro FL Studio ネットで調べてみるとこれらのソフトもおすすめとして出てきますね。どこ見てもCakewalkが一番のおススメだったのですが、ハイスペックのPCじゃないと動きが悪いという事だったので、パスしました。 ちなみに我が家にはMacもあるので、もともとGragebandで遊んでいました。Garagebandは結構使いやすくていいのですが、楽器の種類が限られているのがちょっと難点ですね。今回はラップトップでWindows１０で軽々使えるものがないかなあとおもって色々探してみました。 Roland Zenbeatsを選んだ理由 無料で使える iOS、Mac、Windowsでも使える！ 安い 初心者でもわかりやすい 使ってみた感想 メロディー作るならGragebandの方が使いやすい リズムを作るならZenbeatsの方が使いやすい 使い勝手はGaragebandと比べるとまあまあ、出来ることは同じ感じかなと。UIは見やすいと言ったら見やすいのですが、使いやすさはGaragebandの方がいいかなとも思いました。あと、私のSurfaceのスペックがシンプルに足りていない、という問題があるように感じました。使用時にSurface本体が熱くなり、いつフリーズしてもおかしくないかも、という状態でした。 デフォルトで音がどうしても割れてしまってどうにも直し方がわからない。（なにか設定に間違いがあるのかもしれませんが。というわけで、メロディーは作りにくいです。あと、楽器の種類は断然Garageb...

プレステ５はいつ発売？ 【公式発表　2019年10月8日】 PlayStation.blog にて公式に発売時期が発表されました。時期は2020年の年末商戦期に予定！と発表されました。名称はPlayStation５で決定のようです。 予想は外れました。リーク情報で２０２０年秋と言っているものがあり、そりゃ早すぎっしょと思っていたのですが２０２０年冬という事でちょっとびっくりです。 プレイステーション５の情報は海外サイトからゲットできる WIRED SonyやPlayStationのサイトでも情報は発信されているのですが、より詳しく取材された記事が WIRED にて掲載されています。公式からも紹介されているサイトなので信頼できる情報とみてよいでしょう。 【２０１９年１０月８日記事】より 記事の内容はかなり専門的でちょっと理解が難しいのですが、頑張って読み取って見ますね。 今回の発表はCEOのジム・ライアン（Jim Ryan)さんと、デベロッパーのマーク・サーニー（Mark Cerny）さんからの発表だそうです。 まずジムさんからは名称の決定。次世代機の名前は『PlayStation５』で発売は２０２０年のホリデーシーズンに発売予定。 　次にマークさんからは、技術的な話がありました。理解できた範囲で簡単にリストアップしてみます。 GPUによる、Ray-tracing（３Dサウンド、ライティング技術）の向上。（ソフトウェアのレベル補正ではない。） SSD搭載でロードタイムがあっという間に終わる 大量複製データなど、無駄なデータの処理方法について。 たとえばマーベルのスパイダーマンでは４００回も複製されるデータがあるがSSDを使って（？）無駄な複製を削除して、より大きい空き容量が確保されるようにしなくてはいけない。PS５では今まで（PS4）と違う方法でこの問題を解決しているということらしい。 インストレーション方法の変更 ：必要なデータのみを選択することが可能になる。（例：マルチプレイヤーのキャンペーンのみをインストール、シングルプレイヤーは削除可能。） UIの変更 ：ゲームタイトルの起動無しで、リアルタイムでマルチプレイヤーのアクティビティー情報や、シングルプレイの場合は次のクエストなどの情報がが確認できる。...

こんにちは、Progateを始めて2か月。HTML／CSSは猛スピードでこなしましたが、JavaScriptを学習し始めてからガクッと学習スピードが落ちてしまいました。まあ、単純にわからなくてモチベーションが急降下しているだけなんですが。 現在の学習状況 Progate　JavaScrip学習コースII undefindまで終了 書籍『ふりがなプログラミング　JavaScrip』読破 Progate　JavaScrip学習コースI・IIを復習中 わからん過ぎてモチベーションが下がってしまったよ HTML／CSSを学んでいた時は実際にWebサイトを作りながら学んでいるので、まあわかりやすいんですよ。いったい自分が何をやっているのかが、ハッキリしているんです。 が、JavaScriptに入ったとたん、急に『これ、何のためにやってんだろう・・・？』という不安が募ってくるのです。独学者の心が折れるのってこういうところなんだな、と自ら実感した瞬間でもあります。私だけかもしれませんが、for文とか、関数とか、何に使うのかが見えなくなってしまうのです。 高校生のころ数学のサインコサインタンジェントが出てきたときに、『これ、何のためにつかうのよ？』と思ったときと同じ気分。 やっぱりかなりプログラミング学習はかなり強い動機がないと、こういうちょっとした躓きで心がボッキリ折れてしまうものなのかもしれません。 jQueryかReactを先に学習してみて わー、わからない！と思ったのでJavaScriptは一旦横に置いておいて、jQueryをやってみることにしました。 あるいはReactをやってみるといいかもしれなかったです。これらは、JavaScriptを基礎としたフレームワークということなのですが、実際にjQueryを使ってサイトを作れるので、何をやろうとしているのかが明確になるのが良かったです。 私は『わからん。』といいながら無理やり力づくでJavaScriptの講義を終わらせました。（道場編は手を付けなかった）そのまま、jQueryの学習を始めました。といっても、jQueryの学習を始めるときにJavaScriptのES6を勉強したのに、jQueryはES５を使います。と言われて、膝をつきましたが。 でも、 ES５の学習無しでも...

ついにでた！Switchのフィットネスゲームの最新版 Switchのフィットネス系といえばボクササイズのできるFit Boxingが有名でした。他のソフトでもゲームしながら運動になるものっていえば、大体がリズム系という印象がありますが、今回はまた新しい形のフィットネスゲームが任天堂から登場です！いやあ、他のフィットネスゲームはいつでるんかいな？となんとなーく思っていたので、うわ！きたー！という感じです！ リングフィットアドベンチャー 公式トレーラーを見てみましょう。 リングにコントローラーをつけて、しかも、足にもコントローラーを装着するという今までにない感じですね！ Wiiの時はコントローラー振るだけでもプレイできるので実際にエクササイズにならないという話を聞いたことがあります。（楽できるなら、楽しちゃうのが人間なんでしょうかね。）このゲームはズルはできないかもしれませんね。 映像を見る限りでは、やらされるポーズやエクササイズは、いわゆるフィットネスの動きで、そりゃ運動になるし、体にいいんだろうけど、つまんないし、もう飽き飽きしているわい。というようなもの。でもその エクササイズ➕でゲームを攻略していくというのが新しいし面白い！ Bボタン連打！とか、必殺コンボ！みたいな感じで気がついたら身体中使っているという感じかな。 これだったら、『はあ、運動はしなくちゃいけないから、仕方ない。』という気分にならずに、ただゲームしてるって気分になれそうです！ どんなゲーム？ ビデオを見る限りではジャンルはアクションゲームになるのかと。コースを走って行って、出会った敵と対戦していくという感じですね。走ったり、飛んだり、なんかカッコいい乗り物に乗ったり、舟をこいだりしながら、いろんな世界を大冒険していく感じです。 映像も明るく、カラフルな感じですね！ サイレントモードがあるよ！ このビデオを見て気になったのは、ジョグ（足踏み）をさせられていること。うちはアパートなので、あのテンポだと多分ドスドスドス！！！って下の階に響いて、文句言われそうだなあ。と思っていたのですが、なんとジョグを屈伸に変えることもできるみたいですね。親切設計です。ダイエット効果を考えると、かなり効果は薄くなりそうですが。 まあ、しょうがないよね。 いやーさすが任天堂...

こんにちは、現在Progateでプログラミングを学習中です。30代主婦の超初心者ですが、同じようにプログラミング学習を始めた方のために忘備録を書いてみようと思います。（ホントは自分のために） Progateのみで終わらせないように実際にエディターでプログラミングをしてみましょう！ 理解する！jQueryで作るスライダー 目標 ：PREV /NEXT　ボタンで４つのイラストを一枚ずつ表示させる 言語 ：HTML、CSS、jQuery レベル ：初心者(progateーjQuery上級編を攻略済み） 最初の一歩：HTMLを書く さて、まずはHTMLを作らねばですよね。まずは構成を考えてみようと思います。デザインはもっとカッコいいものができるようになりたいですが、まずは仕組みから理解できるようにしたいです。 １：HTMLの骨組みを作る まずは骨組みをつくります。PREVとNEXTのボタンでスライドさせます。スライドさせたいイラストはリストにします。 ２： PREV と NEXT にクラス名をつける jQueryの記述では、この２つの共有クラス名と、個々のクラス名が必要になります。 それぞれ<div>で囲みます。 赤のchangeが共有のクラス名になります 。 <div class="wrapper">    <div class=" change btn-prev "> PREV </div>    <div class=" change btn-next "> NEXT </div> </div> 3: リスト４つのクラス名をつける 4つのイラストの<img>ですが、4つとも共通のクラス名をリスト内につくります。 <ul>     <li class=" slide "><img src="...">     <li class=" slide "><img src="...">     <li class=...

さて、前回の練習サイトを作る際イラストを並べるのに非常に苦労しました。そこで色々調べているうちに出てきたワードは、グリッドレイアウトとFlexというキーワードでした。そこで今回はこの２つを使ってみることに。 今回の成果物はこちらになります。よかったら遊びに行ってみてください。 https://ponsmama.github.io/pon-and-mama/ まずはグリッドレイアウトというものを学ぼう。 グリッドレイアウトを学ぶのにとても分かりやすかったサイトはこちらです。 今度こそわかかった！CSSグリッドレイアウトの作り方と基本知識。 グリッドレイアウトを簡単に説明してみる。 グリッドレイアウトとは、サイト内に枠線を引き、その枠線を使って色々な要素を配置できるようにする方法です。この方法を使うと要素を重ねたりすることもできます。 それでは4つのアイテムをグリッドレイアウトを使って、サイト上に配置してみましょう。 まずはHTMLを書こう 4つのアイテムを、グリッドコンテイナーの中に入れ子にします。 <div class=grid-container>        <div=grid-item1>1</div>        <div=grid-item２>２</div>        <div=grid-item３>３</div>        <div=grid-item４>４</div> </div> ポイント：アイテムの中はとりあえずで良いので何か書いておくと良い。空で作るとうまくいかないことがありましたので。 CSS　グリッドコンテイナーに枠線を設定します。 .grid-container{       display:grid;       grid-template-column s : 1fr 1fr 1fr 1fr;     ...

ProgateでHTML／CSS、JavaScript、jQueryを学習したのでアウトプットしてみる はたして、どこまでできるのでしょうか・・・。今回も習ったことと、ググったりしながらWEBサイトのLP（ランディングページ）を作って見たいと思います。 エディター 今回はマイクロソフト社が無料で提供してくれている VS Code というエディターをダウンロードしてみました。なんかYouTubeのコーディングビデオを見ていて気が付いたのですが、動作がサクサク軽そうだなあ。と単に思ったからであります。Atomとできることはそう変わらなさそうですし、（今のところ）割合として利用している人が多いようですね。 初心者すぎておススメ拡張なんかはよくわからないまま、ネットでおススメされていたものをいくつかインストールしました。 vscode-icons Visual Studio IntelliCode Path Autocomplete for Visual Studio Code IntelliSense for CSS class names in HTML Indent-Rainbow まずはHTMLのテンプレートとPathをつなげる Qiitaでありがたい情報を見つけました。 VS CodeでEmmet使ったらHTML書くの早くなった～！ 　です。 HTMLは最初の宣言やらの決まった‘’おまじない”がありますが、それを　『！』を打つだけで一瞬で書き出してくれたりしました。　Atomでも『hr』を打つと自動でやってくていましたね。 今回はFontAwsomを使おうかどうしようか決めてないので、まだリンクは張っていませんが、とりあえずjQueryを使うのでそちらのリンクをCDNで張りました。といっても、Progateのをコピペしたです。 でここでふと気が付きました。プロゲートのCDNリンクが最新じゃないということに！ 2019年ではjQuery３系が標準らしく、2系はめったに使わないとか…　えー。 色々調べたのですが、おそらく教えてもらった部分は3系でも同じように使える気がするので、とりあえず、CDNを最新版に切り替えて挑戦してみようと思います。 ええと最新版はググったら出てくるので...

Progateをやり始めて一か月、果たして成果は？ こんにちは、プログラミングを独学で学び始め、何とかレベルの低いマークアップがちょっとわかるようになってきたところになります。歳だからかもしれませんが、かなり牛歩スピードでポチポチやっております。 やっていて感じたのですが、プログラミングの世界は想像以上に深いし広い。HTML／CSSを学んだだけで、ルンルンだった私を思いっきり打ちのめしてくれました。 調べれば調べるほど謎が深まる そう、知識もろくについていない状態で、調べれば調べるほどにその深淵にはまり込んでいってしまうのであります。一年前の情報をはたして信頼してもいいのか、特にJavaScriptは2015年に新しいバージョンが出たのだけれど、旧バージョンでの記述もネット上には散見されるのです。 なんとか歯を食いしばって終わらせたProgateのJavaScriptES6コース（最新版）。よし、次はjQueryだなとおもったら、注意書きにES5（旧版）で記述されています。とな。 （まあ、そのままやっても大丈夫でしたが。ES6の方は脳内から消えた。） Twitterで初心者プログラマーたちの情報を得ようとするも・・・ これが思った以上に情報が入ってきにくい、私の使い方もあるかもしれませんが、いくつかこれは有益そうだ！という情報は見つかったものの、プログラマーたちはあまりTwitterに出入りしないものなのかもしれない。 代わりにスクールの案内がバンバンくる。 情報交換しましょうから、スクールはどうするのか？が必ず始まり、今のところ考えていないとお断りすると、パタリと連絡が来なくなる。 特にプログラミング学習の話は何もないに等しい。プロがタダでは何も教えてくれないならわからなくもないが、私と同じような初心者でもそういった話よりは、スクールはどうするばかりで、ちょっと不安になる。 また、初心者向けの集まりに、マルチやねずみ講の魔の手が伸びているというのもネットで見られるので、さらに恐ろしい。 スクールに通った後に、とんでもないブラック企業に叩き込まれてしまう、なんていう情報も転がっている。もうこうなってくるとすべてが怪しい。 わかったのは teratail と Qiita は有効そうだという事くらいですね。ただ初心...

ProgateでHTML／CSSを全クリしたのでとりあえず自分でサイトを作る。ーその１ー まで出来たら、あとはコードをどんどん書いていくだけです。色々デザインをいじってカッコいいものを作りたかったですが、とりあえずはProgateで作ったサイトのコピーみたいなものを作り上げるのでやっとのことでした。 Githubで無料で公開できるよ Progateで公開の仕方が説明されています。 こちら 　ファイルを上げるまでちょっと作業がありますが、無料だし、まあ何とかできます。私はアトムエディターで一つのプロジェクトのフォルダーのなかに、さらにフォルダーを作って、CSS、HTML、IMAGEと分けましたが、それぞれのファイルは一つのフォルダー内で作ったほうがよいです。 ちなみに今回の成果物は、こちらになります。 https://ponsmama.github.io/orange_pom/ 出来なくて悩んだことメモ まず、Stylesheetのコーディングですが、習ったとおりに全然動いてくれない。 Wrapでくるんでコンテイナーにぶち込んでいるのに、別々のはずのブロックがなぜか連動し、Floatであっちへ飛んで行ってしまったり。あーー！ってなった後にProgateの上級編道場にいてじっくりコードを見てみる、というのを繰り返しました。もちろんグーグル神にもかなり聞きました。 しょっぱなから！　CSSが思ったとおりにならない！！！ しょぱなから、text-align:center; も　margin:0 auto;　も全然なにもおこりませんけど？！ と悩みました。そのときはこのコードをぶち込んでみることで解決したです。 *{ box-sizing: border-box }  html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; }  body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; } div{ display:block; }  li { list-style: none; }  a { te...

こんにちは、今回はProgateでHTML／CSSの上級編の道場までをクリアしたので、ちょっと自分で一からサイトのトップページを作って見ようかと思います。四苦八苦しながらですが、制作日誌で勉強がてら記録してみたいと思います。 まずはエディタ（Atom）をセットアップする。 自作サイトをコードから作っていくために、まずは環境構築からですね。いわゆるコードを書くためのエディタは様々あって、Windowsのノートパッドでも書けちゃうらしいのですが、とりあえずProgateで推奨されている”Atom”というソフトをインストールしてみました。 英語のソフトですが日本語に変換できるそうです、がまあ英語でもいいかということで私はそのままにすることに。便利なプラグインも色々あるようですが色がその場で選べるColor-pickerのみインストールしてみました。あとはやってるうちに色々足していけばいいかなあと思いまして（なんかよくわからないだけ） 【超初心者のWebサイト制作】自力でコードを書いていこう！ ２、プロジェクトファイルを作る とりあえず、こんな感じでファイルを作って見ました。 ここでちょっと疑問になったのが画像とindex.htmlの紐づけの方法。Progateじゃ教わってないぞ？ 色々調べてみたのですが、とりあえず画像ファイルがHTMLファイルの中にあるとファイル名の記述のみで画像が反映されるとか、とりあえず今はこのままでいってみようと思います。 「パス」についての理解が必要なようです。 一時間で作るホームページ というサイトが解りやすいと思いましたので参考にどうぞ。 あとは、Atomのプラグインの"autocomplete-path"というパッケージをインストールすといいとか。あとであまりにも困ったらインストールしてみます。 *結局あとからautocomplete-pathはインストールしました。仕組みは理解するべきと思いますが、変なスペルミスとかを防ぐのに大活躍です。使い方は［　’　］（シングルくおテーション）を打ちます、そこからファイル名を入れるとパスを探してくれますよ。 ＊atom-html-previewというパッケージもおすすめです！インストールしたら、右クリック、あるいはCtrl+shift...