「前編」の続きです。前編ではフォルダ作成（mkdir）、ファイル作成（touch）・複製（cp）・移動（mv）・削除（rm）を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエディタを使います。 【目次】 作成したファイルの中身はまだない… viコマンドでHTMLファイルを開く iキーで文字を挿入 viエディターを閉じる viエディターで文字を打ち替えみる viエディタでCSSファイルを編集 viエディタでJSファイルを編集 最後に ※参考：前編はこちら 黒い画面だけでWebページを作成する - 前編：ファイル、フォルダの作成 - クモのようにコツコツと 作成したファイルの中身はまだない… さて、現状では作成したファイルの中身はまだ空です。こちらはテキストエディタでindex.htmlを開いた画面。 これをテキス

「初めての黒い画面」以降、ちょいちょい黒い画面（ターミナル）に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWebページが作れちゃうんじゃないの？と。実際にやってみた。 【目次】 黒い画面（ターミナル）を起動 cdコマンドでデスクトップに移動 mkdirコマンドでディレクトリ作成 touchコマンドでファイルを作成 cpコマンドでファイルの複製 mvコマンドでファイルの移動 rmコマンドでファイルを削除 次回はファイル内を編集！そう、viコマンドならね ※参考：初めてのPython（インストール〜Hello world）と初めての黒い画面 - クモのようにコツコツと 黒い画面（ターミナル）を起動 まずは黒い画面（ターミナル）を起動します。「アプリケーションフォルダ

前回、データ分析をしたくなってPythonに挑戦しました。同時にこれまで苦手だった「黒い画面」（ターミナル）にも触れることができました。そしたらなんと、これまでよくわからなかった黒い画面系の記事がなんとなくわかるようになってきました。「サーバサイド四天王」*1の一つ「Ruby」に挑戦してみます！！ 【目次】 Macには最初からRubyがインストールされている！ 最新版へのバージョンアップに必要なサードパーティツール REPL（自動応答モード）で四則演算 Rubyファイルを作成 rubyフォルダに移動（cd）、パス確認（pwd）、ファイル一覧表示（ls） .rbファイルのRubyプログラム実行 最後に Macには最初からRubyがインストールされている！ インストール方法について調べたところ、なんということでしょう。Macには最初からRubyがインストールされているらしいです！ ターミナルを

このところ、データサイエンティストによるデータ分析記事が様々な切り口で興味深々です。どうやら皆さんPythonでプログラミングをしているようです。私もやってみたくなってきました。そこで、PythonのインストールからHello worldまでやってみました。なお、プログラム実行のため「黒い画面（ターミナル）」のコマンドに触れました。苦手だった黒い画面の理解もすすんで一石二鳥だ！！ 【目次】： データ分析にはPythonが向いているらしい スクリプト言語四天王 Pythonのインストール 黒い画面（ターミナル）を起動！ UNIXコマンドを叩く REPL（対話実行モード）で四則演算 Pythonファイルを作成 cdコマンドでPythonフォルダに移動 pwdコマンドでフォルダのパスを確認 lsコマンドでファイル一覧表示 .pyファイルのPythonプログラム実行 黒い画面はコマンドの実行、出力

Webサイトは作って終わりじゃない！作ったあとの分析も大事。アクセス解析＝Googleアナリティクス（GA）といっても過言ではない必須ツールですが、最初は膨大な数字の山に戸惑いますよね。 今回はWebサイトの目的、GAの導入、そして大事な3つの数字「ユーザー」「セッション」「PV」を解説。Webデザイナーでも知っておきたいWebマーケの基本！ Webサイト、なんのために作ってますか？ GAの導入手順 トラッキングID、トラッキングコード ホーム画面 ユーザーサマリー ユーザー、セッション、PVの違い ユーザー、セッション、PVで割り出せる指標 その他の項目 最後に Webサイト、なんのために作ってますか？ Webサイトで何かしらの「コンテンツ」を発信するからには自分以外の「誰か（ユーザー）」に見てもらいたいわけですよね。 見てもらったあと、どんなアクションをしてもらいたいか。それがWebサ

Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの？ まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ！ 【目次】 Chromeデベロッパーツール の開き方 Chromeを開く ソースを表示 検証（デベロッパーツール）のElementsパネル HTMLの修正 要素の選択 行の一部の打ち替え 要素全体の打ち替え CSSの修正 Stylesパネル スタイルの解除 値の打ち替え 新規スタイルの入力 Computedパネル（計算済みスタイル） JSの修正 Event Listnersパネル（clickイベント） Sourcesパネル 値の打ち替え エラー表示 console.log()でデバック 最後に ※参考：HTML、CSS、JSの基本はこちら

タイトルの「9割」は言い過ぎかもしれないが、「メリハリ」はとても大事な考え方と思っています。ポイントは「主役」と「脇役」をハッキリさせることです。美術系の学校を出ていない文系雑草独学デザイナーの私が試行錯誤しながら身につけた学習方法をご紹介します。 【目次】 デザインや配色を身につける手順 デザインの基本4原則 面積比率で理解する配色の基本原則 デザインのインプット方法 スクショ&カメラはクラウドへ SNSから刺激を受ける Webデザインギャラリーをチェック デザインの研究（アウトプット） デザイン模写 Codepen 配色研究 まとめ 次回は配色研究！ デザインや配色を身につける手順 まず、私のような文系雑草独学デザイナーは「天」からセンスが降って来ません。そこを認識、受容することがスタートラインです。 私は下記のような手順を踏んでデザインと配色を身につけました。 デザイン、配色の基本原

あるとイイね！なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換（コンパイル）するための開発環境が必要です。そこで「CodePen」の出番ですよキミィ！CodePenなら開発環境なしでこれらの代替言語をお手軽体験できるんです！片っ端から体験した記事を下記にまとめます。それではいってみまSHOW！ 【目次】 【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め 【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め 【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め まとめ 【Emmet, Haml,

「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います！ 十三音鍵盤のコード Tone.jsのチュートリアルから音色情報を調べる AMSynth() DuoSynth() FMSynth() Instrument()は鳴らない！ MembraneSynth() MetalSynth() 最後に ※参考：前回の記事 【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した - クモのようにコツコツと ※注意：本投稿のCodePenの鍵盤を叩くと音が鳴ります。 十三音鍵盤のコード まずは前回のおさらい。作ったのはこちら。 「ポーン」といった感じの音ですね。 JSのコードはこちら //DOM var Key = document.querySelectorAll('#piano li'); //シンセ生成 v

以前、CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。今回は立ちポーズを作って、ジャプポーズとhoverアクションで切り替えるところまで。あいも変わらずバニラCSSでポチポチ打ってますw ※目次： 今後のためにベースの無色16マスをベースを作成 マリオ立ちポーズを打つ hoverアクションで切り替え 今後の予定 ※参考：前回の記事 CSS変数でドット絵マリオをルイージにしたった！ - クモのようにコツコツと 今後のためにベースの無色16マスをベースを作成 ツイッターで出会った作品、こちらです。box-shadowで作られていて、さらにジェネレーターまで提供されています。凄すぎます！ ※参考：box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Bl

背景などでいつもお世話になっているCSSグラデーション（linear-gradient）。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ（縞模様）」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。「CSS de 幾何学模様」シリーズ開幕です。 ※目次： 背景などでお世話になっているCSSグラデーション 2箇所を同色にするとクッキリとした縞模様（ストライプ）に degで45度傾ける パーセントの位置を偏らせてストライプを斜線にする 課題：半端な角度だと綺麗な斜線にならない。。 最後に ※参考：CSSって何？ 【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！（基本5+応用1記事） - クモのようにコツコツと 背景などでお世話になっているCSSグラデーション これが生まれる前はグラデーションはビットマップ画像で

前回の続きです。ターミナル（黒い画面）を叩かずにDB（データベース）をSQL文でコチョコチョしたい。 一番身近でSQL文に触れられるのは「Local by Flywheel」の「Adminer」でした。 今回のテーマはWordPressに投稿した「我輩は猫である」を「犬」にする、です！ ※目次： Adminerの4つのメニュー SQL command：SQL文入力 Import：ダンプファイルインポート Export：ダンプファイルエクスポート Create table：新規テーブル追加 WordPressのテーブル構成 「wp_posts」は投稿データのテーブル 「我輩は猫である」を投稿する SQL文で「我輩」を「犬」にする！ SQL文（DDL、DML、DCL） DMLの基本命令（SELECT文、INSERT文、UPDATE文、DELETE文） 「SELECT文」で「猫」を検索 「UPD

このブログについて イイダリョウの技術ブログ「クモのようにコツコツと（略称：クモコツ）」にようこそ！ 【目次】 このブログについて イイダリョウって何者？ このブログについて オススメ & 記事インデックス ブログのコンセプト なんでクモなのさ？ その他 プライバシーポリシー お問い合わせ リンク イイダリョウって何者？ イイダリョウ（@idr_zz） フリーランスのフロントエンドエンジニア。営業→DTPデザイナー→Webデザイナーを経て今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時！ ※著者近影 このブログについて 「クモのようにコツコツと」（略称「クモコツ」） https://www.i-ryo.com フロントエンドエンジニアのイイダリョウの技術ブログ。日々のインプットしたことをコツコツとアウトプットします。フロントエンド技術を中心にバック

以前、「書ける前に読む！HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこからでもたどり着けるような記事にしたかった。 この記事はその内容を一つにまとめた物です。当ブログのあらゆる記事からいつでもたどり着ける「Webの基本」のメルクマールです。 ※目次： HTML、CSS、JSの基本（動画版） Webの基礎知識 HTMLの基本 CSSの基本 JSの基本-前編（オブジェクト、関数、変数） JSの基本-後編（イベント、制御構造） JS応用編：生JS、ライブラリ、フレームワーク まとめ HTML、CSS、JSの基本（動画版） ※2019/09/30追記 本記事の概要に当たる内容をプログラミング実況してみました。ぜ

前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの？という気になってきたので、実際にやってみる。実録です。 目次： スマホでの技術ブログ 以前はスマホは修正専用だった スマホはフリックでええやん マークダウン求めて三千里 アプリ版はてなブログはマークダウンがない？ ブラウザ版はてなブログもマークダウンはない！ PC版はてなブログではマークダウン使えた！ アプリ版はてなブログでマークダウン普通に使えた！！ 裏メニュー発見！ アプリ版のマークダウンを体験！ スマホでcodepen 私の愛してやまないcodepenはアプリがない！何故だ！？ ブラウザ版codepenはクセが強い！ プログラミングはtextasticの力を借りる HTMLをtextasticで作成 CSSをtextasticで作成 JSをtextastic

お絵描きしたくて購入したiPad。触っているうちに、お、もしかしてこれで「What’s a Computer?」れるんじゃない？という気がしてきて文字入力についていろいろ検証した。本当いうとソフトウェアキーボードだけで完結して「What’s a Keyboard?」る野望があったんですが最終的には物理キーボードも導入することになりました。おすすめテキストエディタ「Textastic」も合わせてご紹介！ 目次： iPadを購入したのはお絵描きのためだった What's a computer? What's a keyboard? テキストエディタはTextasticがおススメ！ ソフトウェアキーボードは縦画面前提 QWERTY入力はブラインドタッチが困難 タブレットでもフリック入力！ アップル純正フリックは下で使えない もう一つのフリック入力「片手キーボードPRO」 日本以外で主流らしいグラ

タイトルのようなことをふと思ったのでCSSのvw、vhをいろいろ試してみました。 PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。それを実現するメディアクエリはとても便利ですが、何種類もCSSスタイルを書き分けるのは少々複雑ではあります。ここを突破する一番シンプルな方法を追求したい。そう、vw、vhでね。それでは参りませう！ ※目次： レスポンシブ対応とは メディアクエリとは vh、vwとは 100% のサンプル「そうだ 小田急 乗ろう」 100vw、100vh に変えてみた obcect-fitでトリミング 100vw、80vhが最高にレスポンシブ！？ 100vhで揃えてみる 100vwで揃えてみる 100vimで揃えてみる 100vmaxで揃えてみる 使用した写真 最後に ※参考：CSSの基本はこちら 【CSSの基本】書ける前に読む！HTML、CSS、J

「Hellow Vue.js」の続きです。前回はVue.jsを読み込んで、「こんにちは びゅう！」という文字を表示しました。しかしながら、これだけならjQueryや生JSでもできるわけなので、もう少し進めてみる。 基本編として、チュートリアルでまず目についた「イベント」「分岐」「ループ」をやってみた。それでは、どうぞ！ ※目次： Vue.jsのディレクティブ イベント（v-on） 属性値が式 メソッドイベントハンドラ インラインメソッドハンドラ 分岐（v-show、v-if） v-show v-if ループ（v-for） 配列数分ループ ループ回数を読み込む 最後に ※参考：前回の記事 三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ - クモのようにコツコツと Vue.jsのディレクティブ Vue.jsには「ディレクティブ」という独自

「JSON未遂事件簿」の続きです。 JSON（ジェイソン）はJSの連想配列（オブジェクト）とよく似たとても馴染深いデータ形式。 前回はっぴいえんどアルバム情報を多次元配列にしてDOMに読み込みました。 今回はこれを外部JSONファイル化してFetch APIで読み込んでみます。 ※目次： JSONとは はっぴいえんどの多次元配列をJSON化する 非同期通信：Ajaxとは JSONを読み込む方法（XMLHttpRequest()、$.getJSON()、$.ajax()、Fetch API） Fetch APIの書式 Fetch APIではっぴいえんどのjsonファイルを読み込む ボタンを押すと値（1stアルバムタイトル）だけ表示 アルバム情報全部を表示する 最後に ※参考：連想配列とは JSONとは JSONとは「JavaScript Object Notation」の略。以前 、オブジェ

以前、JSで図（チャート）を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。 その後、D3.jsベースでチャート機能に特化して作られた「C3.js」の存在を知りました。SVGがどんなものなのかも気になっていたので、さっそくGettingしてStartedしたいと思います！ ※目次： SVGとCanvasの違い C3.jsの公式サイト CSSとJSファイルの読み込む コードを貼ってみる JSを読み解く CSSを変えてみる。 SVG要素が書き出されていた 最後に ※参考：JSライブラリとは？ 【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと ※参考：Canvasベ