個人的な話をすると、初めてのホームページに触れたのは1995年か1996年。
今は2023年なんで30年近くになります。
自作ネットショップを作ってネット販売を開始したのも90年代後半です。
当時は、base(ベイス)なんて便利なサービスはなく、皆、HTMLの教科書的な本を片手にHTMLをメモ帳に打ってページ作りをしていました。
過去を振り返ると「苦労したもんだ。」と思う一方、自分でDIY的に作るのがめちゃくちゃ楽しかったんですよね。
レイアウトなんかも自分でやって、ショッピングカートなども自分で設置して、男性諸君ならプラモデルを組み立てるようなホビーなジャンルでした。
生き残りも？
HTMLをマスターしてウェブサイト、ネットショップを作った。
そんな人も、どんどん楽しようと有料サービスに移行していきました。
当店も例外ではなく、自作ネットショップを数店舗もっていましたが、ショップサーブやカラーミー・ショッププロなどに、どんどん引っ越ししました。
今で言うbase(ベイス)ですね。
ショップサーブもカラーミーも健在ですが、使いやすさはbase(ベイス)がダントツです。
HTMLなどはもちろん、Java ScriptとかCSS、FTPなど、そんな言葉すら知らなくても即日ネットショップが開店できますからね。
ただ、2000年前後にHTMLをほぼマスターして、引き続きスキルをアップデートしてきた人は、もしかすると、今でも自作ネットショップをやっているかもしれません。
誰一人として、そんな人は知りませんが、もはやプログラマー寄りです。
もし、そんな人がいればご一報頂ければちょっと嬉しいです。
HTMLが使えるのは２社だけ
個人さんには絶対にオススメしませんが、HTMLやCGIなど、過去にスキルを身に着けた人が存分にたのしめるネットショップサービスは、ショップサーブ（Eストアー）一社のみとなってしまいました。
当店もメインはShopifyですが、 ショップサーブの支店も残っています。
ショップサーブを残している唯一の理由は、HTMLやCGIが使えるから！
ネットショップを運営する中で、何が楽しいかっていうと、仕入れや販売も楽しいですよ。
でもね、HTMLを編集したりメルマガCGIを設置したり、CSSであれこれ自分好みにカスタマイズできるのが、オタク的ではありますが楽しいんです。本当に。
だから、base(ベイス)などは、今まで身につけてきた、HTMLやCGIといったWEBのスキルを使うチャンスがゼロですから、管理画面を触っていても実につまらんのです。
だから、baseはサンプル的に使ってるだけで、実際の販売では使っていないですし、永遠に使うこともないです。
あと、HTMLが使えるのはヤフーショッピング。
徐々に使えるエリアは狭まりつつありますが、なんとかHTMLを使う機会があります。
だから、たまに触って楽しんでいます。
wordpressも自作ネットショップ的に楽しめる
ブログの定番（このブログもそう）のwordpress。
これもかろうじてHTMLのスキルが発揮できる楽しいツールになっています。
と言っても、使わないで終わらせようと思えば一切使わずブログやネットショップを構築することができます。
でも、例えばCSSを知っていれば、WPに備わっている標準機能ではできない「あ・ほ」という文字を次のように表示することもできます。
普通版：あ・ほ
WPのふと文字機能利用：あ・ほ
CSSをいじれば下記のような表示もできるわけです。
あ・ほ
別にこんな表示ができたところで注文が増えるわけでもなく、お客さんが喜ぶわけでもなく、TwitterやInstaでバズるわけでもなく、ただの自己満です。
でも、自己満こそ人生でしょう。
それを考えるとHTMLやCSSなどを使えるショップサーブやWPなどは、ネット業界古い人間にとっては、ささやかな楽しみの場でもあるのです。
自作ネットショップに無駄なCSS特集
ネットショップで重要なことは、お客さんに情報や想いが正しく伝わること。
そのための写真やイラスト、キャッチコピーや商品説明です。
HTMLやCSSも、その目的を達成するために「適切」につかうのが正解だと言えます。
しかしながら、CSSなどはいろんな表示方法ができる。
どうしても使いたくなるんですよね。
そこで、ネットショップでは使ってはいけないCSSの装飾特集を無駄に載せておくので、あまり参考にしないでくれると嬉しいです。
文字のグラデーション
WOW
見事なグラデーションですが何の意味も効果もございません。
ごちゃごちゃコードを書くよりも、画像（png）で作ったほうが圧倒的に早いですね。
display: inline-block;
background: linear-gradient(135deg, #fed878 0%, #fa505e 100%);
background: -webkit-linear-gradient(-45deg, #fed878 0%, #fa505e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
（引用：https://kouhekikyozou.com/）写真を丸に加工
もともとの写真はこれ。
これをCSSを使って丸く加工。
border-radius: 50%;写真が丸くなったからと言って何も変わりません。
無意味な技術でございます。
ボタンを立体化
立体ボタン！
立体的に見せるCSS。
これも画像で作ればシンプル一発。
無駄なコード。
position: relative;display: inline-block;padding: 0.25em 0.5em;text-decoration: none;color: #FFF;background: #fd9535;/*色*/border-radius: 4px;box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);font-weight: bold;border: solid 2px #d27d00;
（引用：https://saruwakakun.com/）光る文字
意味のない光る文字
だからなんなのか。
どうでもいい装飾。
これも画像処理のほうが簡単。
意味のないCSS。
color: #FC0;border: 5px solid #FC0;background-color: #000;border-radius: 10px;text-shadow: 0 0 20px #FC0, 0 0 5px #F00, 0 0 20px #FC0;box-shadow: 0 0 5px #000;
（引用：http://shurey.com/html/css_logo2.html）
