カテゴリー: Web

HTML、CSS、Javascriptを中心にフロントエンドの話題をお届けします。時々サーバーサイド、インフラのお話も。
他に様々なWeb関連ブログを運営していますが、こちらでは自分の実用に近い話題を主に取り上げていきます。

Webの醍醐味や楽しさ

Webというのはサーバーやドメインを取得してしまえば、誰でもアクセスが出来、自分の伝えたいことを様々な方法・メディアで表現することができる。突き詰めなければ簡単。つまり、敷居が低くコストもそれほど掛かるものではない。つきつめていけば、それなりのコストが必要となるし、こだわりがあればゴールはいつまでもたどり着かない。だからこそ、終わりがなくて、次に何をしようかなということを常に考える用になるので面白い。

更新することに一つの醍醐味がある。もっともっとよくしよう。と。

どの世界でもそうかもしれないけれど、工夫次第で色々な表現ができる。表示を美しくしたり、あえて美しくせず、隠してしまって迷路みたいにしたり。

Webの領域

もともと、研究用のコンピュータや一部の人だけが使用できるパソコンという名の小さなネットにしか繋がっていない大きなコンピュータでしか使えなかった。ネットが広がり、世界も同時に広がっていきいいこと悪いことを含めると多種多様な、もう一つの世界が出来上がった。さらにどんどん変化して様々な秩序が生まれて、現実世界の代替となり得る部分が少しずつ出来上がってきている。今後は、さらに電子化されていなかったところが電子化されて、ますます身近にWebを感じることになるであろうと思う。

業界に興味を持ったわけ

ハッキリ言ってしまえば、もともとWebというものには興味はなかった。漠然とゲームが作りたかった。でもある時に思ったけれども、やっぱり向いてない・苦手だってことに気づいたし、さっぱり諦めた。かわりにWebのプログラミングという案が提供されると、今までとは違って敷居が低くなり様々な表現が自分一人で行えるというWebの世界にどっぷりとはまっていった。デザインだけつきつめればそれでもいいだろうし、プログラムをつきつめればそれもあり。フロントエンドをつきつめればそれも。

あれもこれもと広く浅く楽しめ、時には深く突っ込んでみることが出来て、暇さえあれば、実験用の場さえあれば色々なことが出来て楽しい。ちょっとしたことならば、簡単に始めることができる。すぐに実現したいことをカタチにできたからこそ興味を持ったのかも。

  • HTML、CSSの取得
  • PHPの習得
  • データベースの操作
  • サーバーの構築

コーディングチック、プログラムチック、システマチック、インフラチックなこういった世界も最初は動かないしつまらない。徐々にできるようになってくると、理解も深まって楽しい。出来なかったことが実現できるようになるというのは最高に幸せ。最初はまず、間違っていても曲がりなりにもやってみることが大切。何度か挑戦していろいろやってみよう。

不思議

一度、仕様だったり方法論が提案され、普及するとそれを継承しながら物事って進化していく。ゼロベースじゃない。キーボードがその一つだけれども、もとはタイプライターから始まったキー列を今でも踏襲している。まだまだ何十年もキーボードに変わる画期的なものが登場するまでは、他の入力装置は普及しないであろう。でも真剣に変えようとか思って変えた人が居て、それに賛同する世界があったならば別の方向が生まれ、違った今になっていたのかも。でも、なんにせよキーボードという装置は非常に優れていますね。

不思議なこと、といえば大きな変化が無いってことかな。どの時代どの世界でもそうだったけれども、ゼロだったところに新しく登場するとそれがフォーマットになる。車、携帯電話、家電など。ライバルが出てきたかと思えば、それの機能で勝ちにやってくる。全く違うアプローチではない。そういうのをWebにも期待している。でも、出来たとしても普及させようとしてもだれかが乗ってくれないとだめなんだよね。協力関係、人間関係って大事。

HTMLはいつまで

HTMLはいつまで続くのだろうか。このファイルの形式、またはこれを踏襲したようなものは何十年も先まで続きそう。変えようにも帰ることが出来ない仕様なので、例えば画期的で、世界がそれについてくればそうなる。

そのものが変化しないにしても、入力や生成の方式は大きく変化していくだろう言うのは予想できる。CMSを使えばいわばHTMLを使わなくてもある程度コンテンツを生成していくことは可能。オリジナル・オーダーメイドモノをもとめるとやっぱりハンドメイドしないといけない部分が出てくるため、そこはしかたのないことなんだろうけれどもね。

    PHPをJavaScriptとして表示し外部参照する方法

    外部JavaScriptをPHPで表示させる方法。PHPファイル内にJavaScriptの処理や表示を記述するだけなので、簡単。ただ、油断してると、非常にくだらないことでつまってしまうことも。バカバカしいミスも含めて紹介。 PHP(例:js.phpを作成) 参照されるJavaScriptをPHPを使い処理する。サーバーサイド側の処理はPHPだが、表示されるのはJavaScript。多くはHTMLとして表示されるPHPもJavaScriptとして表示されれば、サーバー...

    HTML+CSSでボックス内の文字を改行・折り返して表示させる時

    東アジア圏の日本などの国からすると改行なんて単語の途中で折れても大した問題ではないが、海外だと読みづらいのか、ちょうどいいところで改行できないことがある。 ボックス内で文字が折り返さずに表示されるとデフォルトのvisibility:visible;のせいで、文字がボックスの領域からはみ出して表示されてしまうケースがある。改行を禁止していたり、改行の判断が難しい際に起きるみたい。 強制的にすべて改行・折り返す...

    HTML+CSSでflexで可変overflowを実現する方法

    なんと言えばいいのか、うまく言葉にできなかったので、いろいろ文字揺れはあるだろうから、こういうのを実現したいときのアイデア。 やりたかったこと display:flexを使っているdisplay:flexを指定しているboxは可変display:flexを指定している子要素は、固定幅左から右にflex-wrapせずに表示overflowしたいスクロールバーを表示する ということ。HTML、CSSに詳しくない人が、例えば商品の一覧で、フリックできるよ...

    hostsを使って現在運用しているドメインのサイトとは別のサーバーを事前確認する

    hostsとはipアドレスとホスト名の定義ファイル。WindowsやMac、Linuxにある。このファイルにipアドレスとホスト名の定義を行うことにより、実際にインターネット上で見ることができるサイトや読み込み先・リクエスト先をあえて変更することができる。 example.comというサイトで運営しているサイトがあって、そこのサイトを移設しようとしたときには、新たにレンタルサーバーを借りて、そこにアクセスするわけではある...

    futureshop レコメンド機能について

    futureshopのレコメンドの機能は、紹介したい・おすすめしたい商品を管理するためのもので、この機能を使うことにより自動で商品の一覧を生成することができる。 商品の売上 商品の閲覧情報 商品のピックアップ などをもとに表示したいものを設置することによって、レコメンド機能を実装できる。 最初の設置はJavaScriptやHTML・CSSに詳しくない人からすると難しい。ここは制作会社や詳しい人に設置してもらう...

    ★ECサイト構築用SaaS型(レンタルカートシステム)FutureShop2について・概要

    futureshop cc(コマースクリエイター)がリリースされたが、FutureShop2は2006年から提供されているレンタルカートシステム。レスポンシブWebデザイン対応ではなくアダプティブ型だが、必要な機能が揃っていて、PHP・WordPress(オプション)で利用できる。 ボタンのデザインが2000年代にしては美しく、デフォルトのままでスタートする事が多いレンタルカートシステムを利用してのECサイトの構築において、FutureShop2は使...

    レスポンシブWebデザインの概念・メディアクエリのサンプル

    レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。 メディアクエリフルードイメージフルードグリッド この3つをすべて使わな...

    HTML+CSSでフローティングバナーを作成する方法

    フローティングバナーは単純。固定するだけと考えたら、邪魔しない場所に設置するだけ。 HTML <div class="fix"> 固定したい内容 </div> CSS .fix{ position:fixed; right:10px; bottom:10px; border:solid 1px #000; background:#fff; } 注意点 注意点としては、重なるコンテンツを邪魔していないかどうか、フッター付近に固定する場合は、フッターのコンテンツとかぶっても余裕があるように、body下...

    HTML+CSSでヘッダーを固定する方法・アンカー位置を調整する方法

    position:fixedを使う方法 基本的な考え方としては、ヘッダーを固定して、その固定分高さを確保しておくというもの。 注意しなければいけないのはアンカーの位置がずれてしまうので、それを調整しておく必要がある。 HTML <div id="header"></div> CSS #header{ position:fixed; width:100%; }

    HTML+CSSで商品一覧のレイアウトする方法

    HTML <div id="index"> <div class="item-list"> <h2>ランキング</h2> <p>商品一覧で商品名の長さ等で縦揃えがばらばらになってしまうときに、flexを使って揃える。</p> <ul> <li> <a href="#"> <span class="thumb"><img src="images/item-rank1.jpg" alt="1位"></span> <span class="name">商品名商品名商品名商品名商品</span> </a> <span...