nao

Webクリエイターです。 2008年に独立起業し、現在は法人です。 デザインからシステ…

nao

Webクリエイターです。 2008年に独立起業し、現在は法人です。 デザインからシステム開発まで一人で可能です。 趣味はCMS作り。

detailsでカンタン！ハンバーガーメニュー

ハンバーガーメニュー。 それは、多くのWebサイトで当たり前のように使われているUIでありながら、未だ専用のHTMLが用意されていない難しい存在。 初期はJavaScriptを使用して出し入れをしていましたが、その後checkboxを使って出し入れをするというトリッキーな技が発明され、ある程度広まりました。 しかし、checkboxの本来の用途とは異なる使い方ですし、CSSが外れるとcheckboxが丸見えになる上に、本来のハンバーガーメニュー部分ではなく、checkbox

nao

    • AIによってコーディングがなくなる

      Webページというものが生まれて以来、HTMLコーディングという作業はあり続け、それによって健常者のみではなく、多くの人がWebによる情報発信を受け取ることが可能になっていました。 近年もコーディングを行うマークアップエンジニアの職はありつづけ、また多くの人が新しくこの職に就いています。 しかし、AIの登場によって、この仕事は消滅する可能性が大きいのです。 直近の未来1、2年のうちに変わるであろうコーディングの未来は、「ノーコードツール」によってコーディングが不要になるとい

      nao

      • Web業界のUIはちょっとおかしい

        UI自体ではなくて、UIという言葉の定義の話。 そもそもUIとは？UIはユーザーインターフェース。 インターフェースは接点ですが、コンピューター界隈においてはユーザーが入力するための仕組みを指しています。 マウスやキーボード、タッチパネルなどがそうで、マンマシンインターフェースともいわれます。 ゲームにおけるUIWeb業界の10年先輩にあたるゲーム業界では、コントローラーなどのハードウェアからの入力によって応答するパーツをUIと呼びます。 しかしそれはウインドウが出る、文

        nao

        • Twitterを通して分かったWeb界隈の今

          「Web業界」と「Twitterの中のWeb界隈」は違う・・・。 そんなことが少しわかりました。 WordPress蔓延界隈Twitterを見ていると、CMSとしてWordPressを使っている人・勉強している人が多い・・・というより、WPしか見かけないということに気が付きます。 恐ろしいことに。 どうしてそこまでしてWPばかり使うのか？ どうしてWPさえ勉強すれば仕事がバンバン来ると思っているのか？ その理由が分かりました。 それは、WP以外のCMSの存在を知らない

          nao

        detailsでカンタン！ハンバーガーメニュー

        nao

          borderを使わない三角付き角丸ボックス

          三角付き（ふきだし風）のボックスを作るとき、三角部分をどうやって作りますか？ borderの3方向を透明にして三角に見せる方法は昔から使われていますが、記述が複雑ですし、何より困ったことがあります。 borderは幅や高さに％が使えない！borderを使った方法では、三角のサイズを決めるborderの幅に％を使うことができないため、幅や高さが可変する場合は使用できません。 無理やり使うためにボックス部分に「overflow: hidden;」を書いて、borderの幅は余裕

          nao

          borderを使わない三角付き角丸ボックス

          nao

          Web制作が仕事になった日【後編】

          こんにちは、naoです。 前回は、ぼくがWebサイトを作りはじめたきっかけについてでした。 今回は仕事としてスタートするまでのお話・・。 液晶工場と印刷会社例のポータルサイトを閉じてから、しばらくは液晶モジュール工場のライン管理という仕事をしていました。精密機器の工場ということで、チリひとつないクリーンルーム、歩留まり改善、トヨタ式（カンバン、カイゼン）など、それまで知らなかった様々なことを学びました。5Sというものも徹底していて、これは人生そのものに大きなプラスになった

          nao

          Web制作が仕事になった日【後編】

          nao

          疑似要素を使わないスライドボタン

          ボタンにマウスが重なると、背景の色がスライドして変化するボタンですが、ネット上に掲載されているものは疑似要素を使うものばかりでしたので、疑似要素を使わないタイプをご紹介します。 なぜ疑似要素はダメなのか？疑似要素は<a>要素には使用できますが、<button>要素には使用できません。これではWebサイト内のインタラクションが統一できなくて困る場合があります。 コードですbutton ,a.slide-button {padding:20px;min-width:300px

          nao

          疑似要素を使わないスライドボタン

          nao

          Web制作が仕事になった日【前編】

          こんにちは、naoです。 最近Twitterで、Web制作初学者の方と接することが多くて、悩んだり焦ったりする姿を見るに、自分が駆け出しの頃ってどうだったっけ？とふと思い返すようになりました。 今回は、〇十年前のことを思い出しながら、どうやって今の仕事につながったのかを書いてみたいと思います。 Welcome to My Homepage!時は1998。 ISDN回線、テレホーダイの時代。 ぼくは趣味でゲーム制作をしていました。 巷にはプロバイダが提供するサーバーや、ジオシ

          nao

          Web制作が仕事になった日【前編】

          nao

          CSSだけで作る角丸ラインマーカー　（改行対応）

          CSSだけで複数行（改行）対応のラインマーカーを引くことができます。 角丸になっているのがポイントです！ <p>「これをお持ちなさい。生憎あいにくマツチを切らしましたから。」<br>お持ちなさいと云ふのは煙草に添へる一番小型のマツチである。<br>「貰ふのは気の毒だ。ぢや朝日あさひを一つくれ給へ。」<br>「何、かまひません。お持ちなさい。」<br>「いや、まあ朝日をくれ給へ。」</p> HTMLは何の変哲もないただの文章です。 p { padding:0 10px;

          nao

          CSSだけで作る角丸ラインマーカー　（改行対応）

          nao