WEB制作

WEB制作

【CSS】:first-childや:last-childを使うと最初の要素や最後の要素だけ違う値を設定できて便利

HTMLの要素の中でも、あるClassの中にある最初の要素だけとか、最後の要素だけを別のmarginやpaddingにしたいということは、デザインを作り込んでいくとよくある。

特に、WordPressなどCMSのサイトだと、こういうテクニックを使う場面が多い。

LPとかの静的ページだとそんなにないかもしれないが、商品サムネイルを分類別に大量に載せてたりすると、個別に設定するより仕事が楽だったりする。

使い方は意外と簡単

CSSの割に「最初だけ」とか「最後だけ」みたいな条件分岐があったりと少しプログラミングっぽいけど、何のことはない、超簡単に設定できる。

上記みたいにcatという親要素のクラスがあるとする。

Aの子猫(最初の要素)だけ違う値にしたいなら、
.cat::first-child
と記述するだけだ。あとはいつものように値を書いていく。

同様にBの子猫(最後の要素)だけ変えたい場合は、
.cat::last-child
とする。

コロン(:)はCSS2の時代は1つで、今のCSS3では2つにするのがルール。古いブラウザに対応させるなら1つだけど、どっちでもいいと言えばどっちでもいい(適当)

疑似クラスを使うデメリット

そんなにないと思うけど、あくまでCSSで人間向けにデザインをいじっているだけなので、プログラム(検索エンジンとかAPIとか)からは元のHTMLが参照される。

疑似クラスは中~上級者向け(たぶん)なので、職場とかチームでいじるサイトだと、初心者には理解不能な場合があるので注意することくらい。

疑似クラスを使わない場合より、構造が少しややこしくなってメンテナンス性が下がるのは間違いない。

余談 疑似クラスという言い方が微妙

こういうのを疑似クラスというけど、言い方(呼び方)が微妙だなと感じる。似ているものに疑似要素っていうのもある。

英語だとpseudo-classというけど、pseudoの意味は「偽物の、まがいの、ペテンの」と何だか酷いキーワードばかりだし。臨機応変クラスとか、自動差し替えクラスみたいなイメージかな。

WEB制作

xcodeの実機検証の罠「is not available」はバージョンが合ってないことが原因

xcodeでのiOSアプリ開発においては様々な壁に初心者が翻弄されることになる。

その中でもよくありがちなのが、実機検証しようと思ったら「is not available」というシンプルなエラーメッセージで途方に暮れてしまうケース。もうちょっと具体的にエラーの内容を表示してほしいものだが、この手の開発ツールでのエラーメッセージは役に立たないことが多い。

基本的にiOSとxcodeはバージョンが対になっている

つまり、何気なく手持ちのiPhoneやiPadをアップデートしたら最期、xcodeも漏れなくアップデートしないと実機検証できなくなるのだ。

メジャーアップデートではもちろん、小数点以下の細かなアップデートでも対応しなくなったりする。

そのたびに10GB以上のxcodeをダウンロードして入れなおさないとならないのだ。ちなみにXcodeは初心者向けの解説書などではアプリから自動でダウンロードする方法が紹介されているけど、検証用などに複数のバージョンを1つのMacに入れておきたい場合は、公式のアーカイブから個別のバージョンを入れると便利。

単純にファイル名にバージョンを入れたりすると上書きせずにインストールできる。並みのMacbookだとあっという間にディスクがパンパンになるのが悩みどころだが。

WEB制作

フォトショ歴20年の筆者がAffinity Photoを代替アプリとして半年使った感想

Photoshop歴20年以上の筆者が買い切りの代替アプリとして人気のAffinity Photoを半年ほど使った感想。使ったのはMac版でおそらくWindows版にも通ずると思う。

主に『代替アプリとして使い物になるのか?』という観点から、Affinity Photo導入を迷っている子羊たちにアドバイスする。

厳しめに結論を言うと、Photoshopと操作が結構違うけど、個人用途なら8割の人が満足するはず。会社に所属していたりフリーランスでもPSDのファイルを他人とやりとりするなら、悪いこと言わないから本家Photoshopを契約した方がいい。

フォトレタッチはPhotoshopと多分同等以上

Photoshopはプロの世界では純粋なフォトレタッチツールとしてよりも、デザインツールやイラスト(お絵描き)ツールとして使われている割合が実は結構高かったりする。とりあえず、フォトレタッチ機能についてはPhotoshopと多分同等以上。

乗り換えの注意点として、インターフェースやワークフローの概念が独特な部分があり、Photoshopに慣れているからと言って一瞬で使いこなせるわけではない。Photoshopに相当する機能を探したりが最初が面倒。PhotoshopでいうスマートオブジェクトがAffinity Photoでは標準機能なので、後発なだけにPhotoshopより洗練されている部分もある。

ここで言っているのは、あくまでに個人用途のブログとかで使う画像のレタッチのことで、カラースペースとか色味に厳密なガチな商業印刷とかのレタッチに通用するかというと、それは未知数。きちんとした業務で使うならケチらずPhotoshopを契約すべき。

デザインツールとしては少し微妙

Photoshopで言うレイヤースタイルに相当する機能もあるので、Photoshopと似たようなWebで使うような画像のデザイン作業ができる気がする。

ただ、標準では日本語でありがちな縦書きに対応していなかったり、文字周りの機能が貧弱。ガチで仕事としてデザイン作業するならPhotoshopの方が効率がよいだろう。イラスト作成は他にクリスタとか専門のツールがあるので知らない。そもそもPhotoshopでイラスト作成もしないので。

PSDファイルとか他ソフトとの連携

Affinity PhotoはPSDファイルの読み込みに対応しているものの、シンプルなものしか正常に読み込めないと思った方がよい。それもそのはずで、Photoshopですら少しバージョンが違ったり環境が違うと問題が起きる類の話なので。IllustratorとかよりはずっとPSDは扱いやすいけど。

PremiereとかAfterEffectsとかIllustratorとかDreamweaverとかと、連携してシームレスに作業がしたいという人は素直にPhotoshopを使うべきだろう。というか、そういうAdobeソフトで固めている人はAdobe CCを契約しているから、Photoshopもあるか(笑)

まとめ 個人のなんちゃってWeb制作には十分かも

組織に所属していてお金をポーンと出してくれるならAdobe CC一択。まともな会社でまともな仕事をしようと思ったら、業界標準の最高のツール(ということにして)を導入して貰おう。個人的にはAdobeの株主だから、じゃんじゃんCCを契約してAdobe税を払って欲しいし。

対して、個人でなんちゃってWeb制作をしているレベルだったら、Affinity Photoで事足りる。最初は機能覚えるのがめんどいけど、まぁ慣れるレベル。個人的にはAdobeの株主だから、じゃんじゃんCCを契約してAdobe税を払って欲しいけどね。