クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

【JS】変数 varとletとconst(再代入、再宣言の挙動の違い)

JS

ES2015から新しく加わった変数letとconst。なんとなく新しいから使おう、良いものらしいから使おう、というのもアレなので、挙動の違いを体験してみる。

【JS】Math.random()でつくるサイコロとおみくじ

JS

JSのMathオブジェクトには数値系の組み込み関数が用意されています。その中の乱数(ランダムな数字)を返す関数Math.random()を使ってサイコロとおみくじを作ってみました。

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

WorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。そうなってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか?と…

【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月)

Web業界(フロントエンド〜サーバサイド)の記事には次々と新しい技術キーワードが登場します。「○○はオワコン」「これからは○○!」などいろいろ書かれています。現時点のWeb業界ではどんな技術が求められているのでしょうか。前回までと同様、indeedの件数…

【indeed】職種別スキル集計:Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア(2019年3月)

前回、Webデザイナーの求人件数を地域別に調べました。今回は求人情報にあるスキルを職種別に集計して、傾向をグラフ化しました。「Webデザイナー」「Webディレクター」「UI/UXデザイナー」「フロントエンドエンジニア」「サーバサイドエンジニア」の5職種で…

【indeed】Webデザイナー求人件数を都道府県別に調べてグラフにした(2019年3月版)

求人サイトは転職したい人だけのものではありません。今、業界全体で求められていること、その中での自分の位置付けなどを客観的に市場調査できます。特に複数の求人サイトや企業の求人ページを横断検索できる「indeed」は便利です!今回はWebデザイナーの求…

Webデザイナーに必要なスキルと代表的な7つのキャリアパス

Webデザイナーになるために必要なスキルは何か。そしてその次のキャリアパスはどんな道があるのか。道は決して一本ではなく多岐に渡ります。UXベン図の3スキル「ビジネス」「デザイン」「テクノロジー」それぞれに特化した代表的な7つのキャリアパスを解説し…

【WordPress】All-in-One WP Migration(全移行)とDeMomentSomTres Export(一部移行)の違い

WordPressのデータ移行。以前はダッシュボードで完結しない複雑な作業でした。最近は良いプラグインのおかげでダッシュボードだけで移行がしやすくなりました!コンテンツの全移行は「All-in-One WP Migration」、一部移行は「DeMomentSomTres Export」がお…

【デザイン】基本がわかる6記事(メリハリ、縦横比率、画面分割、タイポ、色相環、配色)まとめ

デザインってどうやるの?むずかしそう。自分にできるのかな?私もそう思っていました。デザインにはいくつかの「基本原則」があります。その原則をギュッと凝縮した6記事をご紹介。「これを読めば独学デザイナーでもデザインに取り組める!」を目指して書き…

【配色の基本】面積比(メイン、アクセント、ベース)と色相分割【Adobe Color CC】

前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます!複数の色はいったいどうやって選んでいったらいいのか?目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考え…

【配色】色相環のH値をいろいろ測ってみた(HSB、マンセル、オストワルト、PCCS、Web配色ツール)

デザインの配色はRGBやCMYKよりもHSBを使った方が検討しやすいです。しかし、HSBの中の「H値(色相)」について調べるたところ、一筋縄ではいかないことがわかりました。色相環にはHSB色空間、表色系(マンセル、オストワルト、PCCS)、Web配色ツールなどの…

【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)

タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます!ポイントは「行長」「行間」「ジャンプ率」です。

【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた

前回は画面の「アスペクト比(縦横比率)」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか?シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あ…

【黄金比、白銀比】代表的なアスペクト比(縦横比率)を一覧にしてみた

デザイン上でよく使われるアスペクト比(縦横比率)。なんとなく言葉としては理解しているんだが実際の形状を並べて一眼で比較できるよう、一覧にしてみた。

【擬似クラス:target】CSSのみでハンバーガーメニューを作る

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

フォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…

フォームPHPはじめの一歩($_GETと$_POSTの違い)

HTMLのformタグはフロントエンドとサーバサイドの間を繋ぐ「架け橋」です。私はこれまでformタグまでは書いていましたが、データ送信には外部のPHPフォームプログラムを利用していました。今回は、フォームPHPの$_GETと$_POSTを自分で書いて、動きの違いにつ…

ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)

全国一千万人(?)の黒い画面に不慣れの皆さん、こんばんは。ここ最近、Webデザイナーがより気軽にサーバサイド言語に触れる方法を模索しておりましたが、ようやくキタコレ的な方法にたどり着けました。クラウドサービス「Heroku」です。一般的にHerokuの利…

ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して)

PHP

フロントエンド言語(HTML、CSS、JS)の記事を書くときにいつもCodePenを埋め込んでいますが、サーバサイド言語はローカルで書いてスクリーンショットを撮っています。あー、サーバサイド言語もCodePenみたいにブラウザで実行できてブログにも埋め込めるオン…

Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス)

最近いろいろなWebサービスが公開されているのに刺激を受けて、自分もPHPのフレームワークlaravelで何かを作ってみようと思いましたが、なんと自分が契約しているレンタルサーバの仕様だとlaravelを公開することができないことがわかりました!ここ数日、サ…

ブログのURLを独自ドメインに変更しました

あけましておめでとうございます。2019年元旦の本日、当ブログのURLを独自ドメインに変更いたしました。 今後ともよろしくお願いいたします。 ※新URL:https://www.i-ryo.com 作業中の大まかな手順と参考になった記事をご紹介いたします。

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)

JS

ブラウザで音を出そう「Tone.js」シリーズの続きです。前回はTone.jsに用意されたシンセ音の半分を紹介しました。今回は後編です。それではいってみましょう!

GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる

GitHubシリーズの続きです。前回、ブラウザ上だけでリポジトリを作ってWebページを作成しました。今回はローカル環境(SourceTree)にリポジトリをクローン(複製)し、そこで行ったコミット(更新)をGitHubにプッシュ(反映)します。さらにGitHubの静的サ…

CSSドット絵マリオをCSSアニメでジャンプさせてみる

Qiitaアドベントカレンダー「CSS」 23日目の記事です。イブイブ! さて、CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし!でドット絵を描いた(書いた?)マリオ。ホバーアクションで立ちポーズとジャ…

Pythonの基本を理解するためにJSと比較する

Qiitaアドベントカレンダー「Pythonその2」19日目の記事です。以前「PHPの基本を理解するためにJSと比較する」という記事を書きました*1。本記事はその「Python版」です!ちなみに私のPython歴は「Hello World」までです。Webデザイナーが新たなプログラミン…

Google ChartsをQuickにStartする

JS

Qiitaアドベントカレンダー「JavaScript2」12日目の記事です。最近、データのビジュアライズに興味津々之介なイイダリョウです。これまでJSのチャートライブラリは「Chart.js(Canvasベース)」と「C3.js(SVGベース)」をGetしてStartedしました。今回は「G…

Smart Custom Fieldsの繰り返し(グループ)機能の出力タグ一覧

Qiitaアドベントカレンダー「WordPress」5日目の記事です。 WordPressのカスタムフィールド のプラグインSmart Custom Fields(SCF)は「繰り返し(グループ)」機能が標準で搭載されいます。いつも大変お世話になっています!このグループ機能がついた状態…

video要素はfigure要素で囲った方がセマンティック的にもスタイル的にもいいよ、というお話

HTML5で新たに追加されたfigure要素とvideo要素。なんとなく画像はfigure要素、動画はvideo要素というイメージを持っていたが、figure要素はもっと広い用途に当てはまり、video要素も内包する要素でした。そして、HTMLのセマンティック(文書構造)的にもCSS…

ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更)

ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム(Git)によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと!GitHubはローカル環境と連…

黒い画面だけでWebページを作成-後編:viエディタでコーディング!

「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル作成(touch)・複製(cp)・移動(mv)・削除(rm)を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエデ…