【MAMP】ローカル環境開発うまくいきました
いなやんです。
昨日、「PHPをやりたいのに、XAMPPがうまくいかない！」と嘆いていましたが、MAMPで見事ローカル環境開発ができました。
うーん、やっぱり、こういう設定は、詳しく説明しているサイトなどを見ながらやった方がいいですね。
極度の面倒くさがりなのですっ飛ばしてしまいます。
それで、何を間違えたのか原因が明確にならず、最初からやり直しという。
そんなパターンが多いですね。
反省です。
ちょっとだけPHPの基礎的な部分をやってみたのですが、なんだかJavaScriptと似ている部分もありそうですね。
とっつきにくいイメージでしたが、始めてみることによって、少しハードルが下がったような気がします。
あ、そうそう、MAMPは日時の初期設定がベルリンになっているようなので、日本時間に変えることをお忘れなく...。
こういうことも、説明してくれているサイトを見なければ気づかないことですね。
それでは！
WEBデザインに必要なサーバーサイドの言語はPHPだ
いなやんです。
昨日はWEBデザインの勉強を、あまりできませんでした。
（やる気スイッチが押されなかった）
でもそれでも少しは触る時間を取ったので、昨日つかめたことを記録します。
昨日つかんだこと
正直なところ、jQueryを始めた時は記述の形が頭に入ってこなかったので、JavaScriptよりも難しいじゃん...(JavaScriotを簡単に使えるようにしたのがjQueryという記述方法です)と思っていました。
でも、やっぱり慣れは大事で、何度も触れていく内に、jQueryの便利さがわかるようになりました。
PHPは、昔仕事で「勉強して」って言われたんですが、苦手意識がありすぎて手をつけられなかった言語です。でも、youtubeって便利ですね。PHPをわかりやすく解説してくださっている方がいたので、またトライしてみようと思いました。
レスポンシブデザインは、スマホが普及している今、習得しなくてはいけない知識だと思うので、少しずつ理解していこうと思います。
それでは、今日も頑張りましょ！
Flexboxは神【Webデザイン】
Webデザインの勉強を再開して10日目になりました。
５日間くらいはHTML、CSS、JavaScriptのの基礎を一つ一つなぞるような形で勉強していて、最近は作成されたWebページの模写をしています。
そこですごいFlexboxを使うなーと思ったので、備忘録として。
Flexboxは神
実は3年くらい前に、職業訓練校でWebデザインの授業を受けていました。その時、要素の配置換えって、たしかfloatプロパティを使っていたと思うんですね。
floatプロパティを使っていて、
自分が動かしたくないものまで動く！！！！！
と苦戦していたのを覚えています。
今回勉強していく中で、Flexboxが神的存在だということに気づいたんです。
Flexboxを使うと動かしたいものが思い通りに動く
flexboxは親要素の中に子要素を入れてあげて、親要素に display:flex; を指定してあげれば、自分が思った方向に子要素だけが動いてくれます。
（Flexboxの詳しい使い方は、いろんな方がネット上にあげているのでググってみてください。）
Webページのレイアウトをする時に、要素を一つの塊としてイメージし易くなるんです。
自由自在に、動かしたい塊を移動させることができるんですね。
Flexboxとalign-items:center;は最強タッグ
align-items:center;、これはdisplay:flex;で動いた子要素の中身を、縦方向の中央揃えできてしまう代物です...。
実はこのalign-itemsプロパティ、昨日知りました 笑
何px動かして...なんてことを考えなくてもよくなりますよ！
Flexboxはパズルみたいで面白い！
動かしたい要素が、思った方向にぱちっとはまるので、気持ちがいいです。
勉強って、楽しいだけのものではないのは当たり前ですが、楽しさも見つけなければ続きませんよね〜。
ってことで今日はここまで！
【Webデザイン】LP模写してみました
いなやんです。
最近気づきました...HTMLとCSSは、基礎が一通り終わると、自分が何をすればいいかわからなくなってきます。
自分がどんな知識が不足しているのか、客観的に見れなくなってくるのです。
そこで、昨日から、LP(ランニングページ)の模写を始めてみました。
LPの模写で気づいたこと
- 模写していく中でspanタグや、displayプロパティの意味をしっかり理解していなかった。
- 基礎を学習していた時は、「どんなプロパティを使うか」などが予めわかっていたが、作り上げられたページを模写する時は、どの方法で書いていくかを自分で考えなければいけない
自分がいかに機械的に作業をしていたか、を痛感しましたね ...
ということで今日もやっていこうと思います。
そうそう、昨日からjQueryの勉強も始めましたよ〜
教材はprogateを使っています。
昨日は集中できていなかったな、と思うので（笑）、今日はその範囲の落とし込みをしようと思います。
それでは！
Webデザイン勉強中
いなやんです。
先日、Webデザインを勉強しようと思う、と投稿しました。
今トライしているので、その学習過程をこのブログで書いていこうかと思います。
Webデザインを勉強していく中で作るもの
上の記事内で「１ヶ月で家計簿のWEBアプリを作る」って言ってるんですけど、勉強を進めていくうちに、１ヶ月では難しいということに気づきました 笑
なので、一つ一つ基礎を積み上げてからいずれ作っていきたいと思います。
そこで、予定を変更して、この１週間で作ったものがこちらです。
↑この「始める」ボタンを押して
↑このページに移動します。
- 片道交通費
- 出勤日数
- １ヶ月の定期代
を入力すると、切符を買ったほうがいいか、定期を買ったほうが良いかがわかるというもの。
↑こんな感じで、どっちで買ったほうがお得かわかります
配色とか、いろいろまだダサいところもあると思いますが...ε-(´∀｀; )
使用している言語は
- HTML
- CSS
- JavaScript
の３つです。
【Webデザイン】昨日勉強したこと
今仕事が休業中でずっと家にいるので、一応毎日勉強できています。
昨日やったこと
- marginとpaddingの落とし込み
-
今まで、「なんとなく」でサイズを調整していました。
ふたつのプロパティの違いを明確にすることで、作業効率が上がります。
- flex boxの落とし込み
- 昔勉強していた時はfloatメインで使っていて、固定させたい要素まで動いてしまって苦戦していたので、この方法は使いやすいと思いました。
- positionプロパティの落とし込み
-
今までpaddinng（それも意味がよくわかっていなかった）を使って、なんとなくで要素の位置を変えたりしていました...笑
写真の上にも文字を入れることができるようになりました！
勉強の仕方は、ひたすらググる！です。
あと、ユーチューブもわかりやすくていいです。
いつか、初心者にもわかりやすいサイトをまとめたいと思っています。（忘れそう!）
Webデザイン勉強発信します
これから、勉強したことや、これから習得したいことなどを備忘録としてこのブログに記していきたいと思っています。（できれば毎日！）
でも、雑記ブログにしたいので、違うことも書いてみたりしますが...笑
よろしくお願いします！
では〜。
macの遅い文字入力が直った！
このブログは4年前くらいに買った、MacBookAirで書いています。
で、最近、文字入力おっそーって思うようになってたんですね。
なんか、一文字打ってもディスプレイに打ち込まれるのが1秒以上かかる。ひらがなはまだしも、漢字入力となるともう絶望的でして。
ブログ書くのしんど...ってなってたんですよ。
- ゴミ箱は空にする
- 履歴も消す
- いらないアプリを消す
とか他にもいろいろ試行錯誤していたんですが、ぜんぜん改善されなくて。
もしかしてもうこのmac寿命？
って思い始めていたんですね（ガジェット系に疎いから寿命がわからない）。
そしたら、やっっっっっと見つかりました！
この子がメモリを消費していました！
この「日本語入力プログラム」を選択して左上の白黒のばつ印を押したら...
は、、、、、、速い、、、、、
文字入力、速くなりました（泣）
うれしい！これでブログ楽しめる！
ひゃっほーって感じです。
Finder
↓
アプリケーション
↓
ユーティリティ
↓
↓
「日本語入力プログラム」を探す
これで上の画面にいけます。
macの文字入力遅い...っていう人はぜひやってみてください！
それでは！
