あいりすのプログラミング日記

プログラミングを学習していく上でのアウトプットとして投稿していきます!

【HTML・CSS】まともできれいなコードを書きたいよ

こんにちは。あいりすです。


突然ですが、自分が書いたコードって人に見られたくないですよね。(?)

裸を見られるより恥ずかしいというツイートも見たことがあるくらいです。

わたしもHTMLは最近はいろいろ調べてかなり意識して書くようにしていますが、CSSはどうもきれいにならないのです。
それこそもう裸を見られているようなものです…

そこで、ようやく時間ができたので、一般的によく言われているHTML・CSSの記述ルールをもとに
書く上での個人的なルールを少し決めてみて、意識しながらコーディングをしていこうと思いました。




まず、いろいろサイトを見てみたのですが、HTML・CSSを書く上で重要なことは、


・統一性(要するにルールを決めろということ)
・無駄なネスト(入れ子)はしない、避ける
・HTMLでの情報(記述)の順番と、実際に表示される内容の順番を同じにする
・タグは正しい使い方をする(セマンティックなHTMLってやつですね)

などがあります。もっと調べればもっとたくさんあると思いますが、、




次に、なぜわたしはCSSがカオスになってしまうのかを考えました。

おそらく、

「これどうやるんだ?」と調べる

行き当たるまでに時間がかかる

ようやくできて安心しきる

次に行っちゃう


の繰り返しだからなのではないかと思います。

また、調べても全然わからないときは別のできそうなところに手を付けてしまうので、
当然こんなやり方では統一性のないCSSになってしまいますね…(今気づいた)

日々意識することを心がけて、慣れと適度な経験を積んだ上で改善していけるよう頑張ります。


また、現在わたしがコーディングをする上で既に意識している点をあげてみます。

・タグは、本来の使い方をする(h1、h2タグなどは特に)
・padding、marginの省略した書き方(topなどをいちいち指定しない書き方)を使う
・クラスの命名ルールを統一(わたしはsample_classのように付けています)
・コピペしてきた部分はぱっと見わかりにくい部分がありがちなので必ず始まりと終わり部分にコメントをつける

もっとあったような気がしますが…すぐ思いつくのはこのくらいです。



いろいろなサイトを見て、自分に足りていなくてかつ、すぐに改善しなければならない点を考えました。

個人的なルールとして日々意識しようと思うので、よかったら参考にしてみて下さい。



・headerのCSS、mainのCSSのなどにも、始まりと終わりにはわかるようにコメントをつける。
→ただでさえわかりにくいCSSになってしまうので、どの部分のCSSなのかくらいはわかるようにしないといけないですね…


CSSプロパティは常に同じ順序で記述する。
→とあるサイトからそのまま引用する形になりますが、とても良かったのでこれからこの順番で記述するように心がけます。


1. 位置情報系:position/top/right/z-index/display/floatなど
2. サイズ系:width/height/padding/marginなど
3. 文字系:font-size/line-height/letter-spacing/color/text-alignなど
4. 背景:background/borderなど
5. その他:animation/transitionなど


・classをたくさん作らない。CSSの指定はなるべく階層指定に移行させる。
→記号(>や+)で指定する方法もありますよね。それらを使えばいちいちclassを作る必要がなくなり、CSSがきれいになります。


CSSの記述順序もHTML同様、情報の並び順と同じようにする。


とりあえずこのあたりから改善をしていこうと思います。


わざわざ意識しなくても出来るようになってきたら、CSSファイルの記述量自体を減らすこと(0pxを0と記述するなど)を考えたりなど、
次のステップに進めるようにしていきたいと思います。





わたしは今更になってこのようなことに気が付きましたが、独学の段階で人にコードレビューをしてもらう機会をもっと増やしていれば、もっと早く気が付けたと思います。

そう考えると、人からいくらヒントを貰っていたとしても独学の方法って難しいんですね…。



というわけで、これからも頑張っていきたいと思います。
ここまで読んでくれてありがとうございます!

【CSS】positionプロパティを使ってかっこいいサイトを作ろう!

こんにちは。あいりすです!


現在お仕事の方で初のコーディングの作業をしております。

Webサイトというよりはアプリのようなデザインなので、少しイレギュラー?なデザインって感じでした。
そのおかげで、今まで使ったことない(正しくは使うのを避けていた)positionプロパティをガンガン使うことになりました。

わたしもまだまだ初心者レベルから脱することができていない身ではありますが、
昨年転職のためにポートフォリオをだらだら作っていたときにしっかり勉強して使ってみるべきだったと、今更になって大変後悔しております。

しっかり理解して適切な使い方をすればかっこいいサイトが作れること間違いなしだと思うので、現在ポートフォリオを作成中の方にもぜひ知っていただきたいなと思います。




このサイト、たまたま見つけたのですがすごくかっこいいし、こんなの作れたらすごいなぁと思ったので載せておきます!
もちろんpositionプロパティを使用していたので、検証ツールでぜひ探してみてください。

www.circovoador.com.br




それでは本題です。


まず、positionプロパティには指定できる値がstatic・relative・absolute・fixedの4つがあります。




1. static→デフォルトの値。配置の方法を指定しないとき(CSSをになにも指定していないとき)はこれ。ちなみにこの状態だと重なりを指定する「z-index」も使用することができない

2. relative→相対位置への配置。staticの位置(本来表示されるべき位置)を基準に相対的に配置される。top・bottom・left・rightと併用して位置を指定します。

3. absolute→staticの位置を基準にするrelativeと違い、absoluteは親要素を基準とする。top・bottom・left・rightと併用して位置を指定します。

4. fixed→スクロールしてもヘッダーが固定されているっていう、あれ。ちょっと面倒なところがあるので後ほど詳しく説明します!top・bottom・left・rightと併用して位置を指定します。


ざっとこんなはたらきをします。


1つずつ説明していきます。



1. static

普通にしていたら指定することはないと思いますが、可能性があるとしたらPCやスマホで違うデザインにするときに
指定していたものを解除したいときに使うんじゃないかと思います(適当)



2. relative

absolute・fixedを指定するためには、その指定する要素の親要素にこのrelativeを指定しなければいけません。

relativeとして位置指定するというのは個人的にはあまり使い所がなさそうだなぁと今の所思っています。個人的には。
理由は、親要素を基準にするabsoluteの方がどこに指定されるかわかりやすいからです。
が、こんなことを言っているからいつまでも初心者のままなんです。
しっかり考えながら使い所を見極める必要がありそうです。



3. absolute

これは今回サイト制作をするにあたり一番使用しました。
親要素を基準にして位置を決める、というところがrelativeと違うところです。
z-indexと併用すれば本当に様々な使い方があるので、いろいろ試してみるのがいいと思います。


4. fixed

こちらはWebサイト制作のなかでも特にヘッダーを作るときにはほぼ必ず使用するのではないのでしょうか。
また、画面の端の方にある「資料請求はこちら」「ページのトップに戻る」などのボタンもこれを使えば作れます。

しかし少々厄介なところがあります。
図と一緒に説明します!

f:id:xiris:20190521222226p:plain
例1


このようなサイトを作りたいとします。
緑色の部分がヘッダーで、スクロールしたときに固定させたい部分(fixedを指定する部分)とします。
ピンクの部分がメインエリアとします。


この状態で緑のヘッダーの部分にposition:fixedを指定します。

すると…


f:id:xiris:20190521222534p:plain
例2


こうなってしまいます。

ヘッダーは固定されているのですが、下のメインエリア(ピンクのところ)がヘッダーの下に入り込んでしまいました。

イメージ的には、fixedを指定すると、指定された要素は「浮く」感じになります。

浮いた分、下のメインエリアがヘッダーの高さ分上に詰めてしまったので、こんな風に重なってしまう、ということが起こります。


対処法は、ヘッダーの高さと同じ分、メインエリアのtopにmarginやpaddingを指定するだけです。






以上、positionプロパティの説明を、実際扱ってみての感想も交えながらでお伝えしました。

工夫と応用しだいでかっこいいサイトが作れる素晴らしいプロパティだと思います。


また、こちらの記事もぜひ読んでみて下さい。↓
というかわたしのこんなアウトプットはもういいのでこちらの方を読んで下さい!w

saruwakakun.com



それでは今回はここまで!
読んでくださりありがとうございました。

Macで簡易ローカルサーバーをたてて製作中のサイトをiPhoneで確認しよう〜

こんにちは!あいりすです。



タイトルの通りなのですが、製作中のサイトをiPhoneで確認したくなることありますよね。

やろうとするたびに忘れるので忘備録として記事にすることにいたします!




*まずは簡易ローカルサーバーをたてます。

1.ターミナルで、表示させたいファイルまで移動する

2.python -m SimpleHTTPServer 8888 と入力(ポート番号は変更可)

3.http://localhost:8888 へアクセス



そうすると、1で移動した部分のファイルの内容が表示されているはずです!
(サーバーを停止するときはターミナル上で「ctrl+c」を押します。)


*そしたら次はiPhoneに表示します。

1.MaciPhoneをUSB接続する

2.iPhone側で、ブラウザでhttp://「コンピュータ名」.local:8888/ と入力する

3.表示される!


コンピュータ名は、Macのシステム環境設定→共有→コンピュータ名(上部)で確認することができます。


もっと簡単なやり方もあるかもしれませんが、まあこんなもんかなと!

今度こそちゃんと覚えます…これ調べて思い出すまでに2日かかったので()


それでは!

HTMLのsectionタグについて!

こんにちは!

今、本を見ながらサイトを作っていたところなのですが、今まで適当に使っていたsectionタグのちゃんとした意味を知ったのでアウトプットしとこうと思います〜!



sectionタグとはその名の通りセクションを区切るタグです。

わたしも今までその程度の認識で使っていたのですが、実はもっとちゃんとした?意味がありました。


なんとh2タグの代わりのような役目をしているようです!

どういうことかというと、


従来(css3以前)では、見出しであるh2タグを使うことによって暗黙的にセクションを区切っていたんだそうです。


でもsectionタグを使うと「ここから次のセクションです!」といった感じで明示的にセクションを区切ることができる、といった感じです。


また、sectionタグの中にそのセクションの見出しを持つことが推奨されています。
必須ではないので見出しを省略しても間違った構文ではないですが、やはりあるに越したことはないのでほぼ必須と考えて良いと思います。


sectionタグ+h2タグ、この2つを使用することでより見やすいコードになるというわけですね。(そうだよね?)



やはり本は役に立ちますね!
これからも引き続きいろんなことが出来るように頑張っていきたいです!


はい、今回はここまで〜!

ReactでCSS適用・レスポンシブ対応させてみた!

こんにちは!あいりすです。


生まれて初めてレスポンシブを実装できた(メディアクエリを設定した)ので、ぜひ見ていってください!

まさかHTML学習期ではなくReactで初めてやることになるとは。w

見辛くて申し訳ないですがお付き合いください!


◎注意
・create-react-appで環境構築をして、その中身をいじってるだけです。
・Reduxとかその他難しいものはまだ知らないです。
・CSSmoduleの類は使用していません。


ーーーーー


srcフォルダ内のApp.jsに以下のようなものがあったとします。


<div className="example">abc</div>



このdivタグにCSSを適用させたいのですがどうすればいいのでしょうか。


①styleタグで直接記述

上記のタグの中に、以下のように記述します。

<div className="example" style={{background: "red" , marginLeft: "10px"}}>abc</div>

styleタグの中に書く感じです。



CSSファイルから読み込む

別のファイルから読み込む場合は、Reactでは読み込み先(CSSを適用する先)のファイルの上部でimportをしなければいけません。


App.jsには最初から

import React, { Component } from 'react';

というコードが書かれています。
これの下に、

import './App.css'

(パスとCSSファイル名)
を書きます。


こうすることによって、App.jsとApp.cssが紐づく?連動する?感じになります。

続いて、App.cssCSSを書きます。
App.cssはただのCSSファイルなので、通常通りの書き方でCSSをかいていきます。


.example {
   background: red;
   marginLeft: 10px;
}


セレクタ名=App.jsの「className」となっていることが重要です。


これで①のやり方と同じようにCSSが適用されました。



ーーーーー



続いてメディアクエリを設定する方法です。

すみませんが、HTMLのheadタグ部分のviewportについてと、ブレイクポイントについての説明は割愛させていただきます。


Reactではrender()のところなどにHTML(JSX?)のタグをいくつも書くときは1つのdivタグの中にまとめないといけない決まりがあります。
(divタグじゃなくてもいいのかな、ちょっと自信ないです。。)


悪い例↓

 <h1>sample</h1>
 <h2>title</h2>
 <p>texttexttext</p>

このまま読み込もうとするとエラーになります。

良い例↓

<div>
 <h1>sample</h1>
 <h2>title</h2>
 <p>texttexttext</p>
</div>

このように、divタグを使って1つにまとめます。


全ての親要素となっているので総合的な配置はこのdivタグに対して設定することになります。
たとえばコンテンツ全体を中央寄せにするとか、親要素部分だけ背景は全部黒色とか。。

ということで、いまから登場するdivタグは上記のような役割をするタイプのdivタグという認識でお願いします。

classNameはmainContentsとします。

<div className ="mainContents">
<h1>sample</h1>
<h2>title</h2>
<p>texttexttext</p>
</div>

今回widthが100%だとデザイン的にあまりよろしくないものを作ってしまった体で、PCで閲覧する前提として、widthを30%に設定しているものとします。
左右のmarginは35%です。


こんなものをスマホサイズで見たら…残念なことになりますね。


Reactどうこう以前の問題で、わたしはそもそもレスポンシブデザインのものを作ったことがなかったので、結構時間がかかってしまったのですが、、


まず、これ↓をCSSファイルに書きます。

@media screen and (max-width: 960px) {

}

このmax-widthは、この場合だと「幅960px以下の場合に」みたいな意味合いです。



そういえば、記号の
{}
これって正式名称は何というのでしょう?
とある技術書にはブラケット、今少し調べたら「巻き毛ブラケット」とかいうのも出てきました。。
一応この記事内ではブラケットと呼ぶことにします…


ブラケットの中には幅960px以下だった場合のCSSのを書きます。

バイスの幅が960px以下だった場合、div mainContentsのmarginとwidthの縛りをなくしたいので、以下のように指定します。

@media screen and (max-width: 960px) {
 .mainContents {
     width: 100%;
     margin: 0;
}


そうすると、幅960pxを基準にして、それより幅が大きいか小さいかでデザインが変わるようになります。





通常(PCで見た場合)のCSSをApp.js内のstyleタグの中で指定していたり、独立したCSSファイルに記述した場合でも

メディアクエリの指定を通常時の指定内容より先に書いてしまうと適用されませんので注意。

わたしはこんな単純なことに気が付かず時間を浪費しておりました。。




それでは今回はここまで。

読んでいただきありがとうございました!

Reactはじめました【概要編】

こんにちは!あいりすです。

ずいぶん放置してましたがようやくちゃんとしたプログラミングを始めたので、更新したいと思います!



12月末に会社を辞めて1月の初めからすぐにインターンが始まり、もう3週間が経ちました。

早いものです…


インターンという貴重な機会を与えてくださった社長を始め、支えてくれたりわからないところを聞いても優しくちゃんと教えてくださった皆様に、この場を借りて感謝申し上げます。


以下、わたしが2週間で得たもの・学んだものなどを交えながらReactの概要を解説します。

先に感想を言ってしまうと、0からのスタートだったのですごく大変でした。
JSはProgateすこしやってた程度です。

HTML・CSSで忙しかったので手を付けられませんでした()






◎そもそもReact.jsとは??


JavaScriptフレームワークです。

似たようなものに、vue.jsがあります。Angularはよく知らない。。

コンポーネントの集まりで構成されています。

コンポーネント=部品・パーツという認識で大丈夫だと思います。)

JSで記述される関数や、CSSを1つのコンポーネントとして管理することで、
簡潔で編集がしやすくなるみたいです。

(とはいっても、練習程度の簡単なものならわかりやすいので1つのJSファイルにCSSも全部記述する方式でいいみたいです。わたしはその方法でやってます!)

言語はES6で、HTMLみたいな部分を書くところがあるのですが、そこはJSXというものでかかれていたりします。


◎vueとの違いは?


初心者にvueがよく勧められます。
わたしも勧められたことがありました!

その違いは、コンポーネントをどの程度の規模で管理するかだそうです。

vueの方がコンポーネントを少し大きく管理するみたいです。(表現が難しい)

Reactの方が細分化して管理するってことですね。


◎勉強法

Reactは本もあまり出ていなくて、日本語の文献(?)もちょっと少ないです。
あと、Qiitaも片っ端から読み倒しましたが、わたしにとっては難しく書かれているものが多く、、


なので、いくつか言語やフレームワークをやったことがある人向けなんだなと悟りました。

ですがこんなわたしでもほんの少し理解できてきたので!


まず何をやったかというと、公式のチュートリアルです。

公式のページから見てもいいですが、翻訳してあるものがいくつかあったのでそれを見ながらやりました。

でもなかなか難しいものがありますよね。。。

なので、最初のうちは誰かに聞いちゃってもいいと思います!というか聞かなきゃこんなものわからぬ!


でもやっぱり、いきなりReactはやらないほうがいいです。

ある程度JSが書けた方がいいです。
でも「ある程度」っていうのが完全独学だとわからないんですよね。。
いま思い返すと、多分alertくらいしかちゃんと書けるものってなかったかも…ww
処理でも何でもないw

まあFizzBuzzとかできれば問題ないんじゃないですかね…わたしはできたことがないですが…


ということでまとめると、

JSの知識があること前提で、それからReact固有の書き方に慣れていくのがいいと思います。


わたしはむしろ逆で、Reactっぽい書き方しかわからないのでこれから本とか見ながら頑張らないとまずいです。。

難しいですが楽しいことに変わりはないので、なんとかやってます!

あ、JSXに関してはHTMLと何が違うんだろうというくらいわずかな違いしかないように思いますが…これから特殊な表現が出てくるのかな…?

いまは簡単なことしかしていないですがこれからReduxとかもいろいろ勉強していかないといけないので。。。大変ですね。。。



実際に作ったものの紹介もしたいのでまた余裕のある時に更新できたらします・・・





あいりす

HTMLで画像が貼れなかった話

こんにちは!あいりすです。



ずっと前からある1つの成果物をHTML、CSSで作成しているのですが、
ある時、

URLは絶対に合っているはずなのに、なぜか画像が反映されないということが起こりました。

このときの条件は以下。

・iPhoneで撮った写真なのでairdropでMacBookに画像を送っていた

・ポートレートで撮ったものと、LIVEモード?(なんか動くやつ)で撮ったものが混ざっていた

画像を貼っていってその都度確認していたのですが、一枚だけどうしてもエラーのようになってしまって反映されない状態でした。


名前も合っているし、ファイルの指定パスも合っているはずなのになんで表示されないんだろうと悩んでいました。




そこで見つけたのがHEICという拡張子。

この拡張子はiPhoneで撮影した写真にたまに付いてしまうらしいです。(詳しくはお調べくださいw)


なのでわたしは、「名前を変更」から拡張子をpngに変更しました。

拡張子をpngに変更しますか?と出てくるので、「はい」を選択して拡張子を変更できたつもりでいました。


ところが…



また画像が貼れない!

名前も合ってるのに!なんで!


そこで、もうさすがにわからないので仲の良いエンジニアの方にお聞きしました。

コードも見せました。


そしたら、表面上はHEIC拡張子からpngに変更されてるけど本当はHEICのままじゃん!とご指摘を受けました。


このような場合は、きちんと拡張子変換ツールを使用して拡張子を変更しなければいけないようです。



拡張子変換ツールには、たとえばこのようなものがあります。
www.iloveimg.com


わたしはこのサイトのツールを使用しました。

使い方も簡単なのでぜひ使ってみてください。





もし画像が貼れない!となった時にこの記事を思い出していただけたら嬉しいです!







次回の記事もぜひ読んでください♪


あいりす