やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

CSS

IcoMoonでSVGからフォントを作る

好きなSVG画像をインポートして作れる。

アイコンの設計を考える

アイコンの設計を考える レスポンシブなアイコンを作りたい。色やサイズを適切に変更でき、画像データは単一でメンテが容易。そんな理想のアイコンを、どうすれば実現できるかを考える。

はてなブログで吹き出しを出す方法(CSS埋込)

お気持ち表明するとき、吹き出しにしてみる。

WEB開発の超基礎まとめ

最低でもこれくらい知っておくべき。

CSS用リントstylelintを試す

CSS

バージョン14系。

PostCSSをインストールする

CSS

CSS開発環境のデファクト・スタンダードと思われる。

フロントエンド開発環境を構築する(Node.js、テンプレートエンジン、プリプロセッサ、トランスパイラ、モジュールバンドラ、フォーマッタ、リント、タスクランナー)

ラズパイ4(4GB, 32bit)にて、WEBアプリやサイトを開発するために。

最小コード例(HTML, CSS, JS)

[規格][]に応じたコードを書いて動かしてみる。

メディアクエリでCSS変数の初期値を振り分ける

CSS

「1行あたりの字数」をCSS変数で定義し、スマホ20、タブレット30、PC40にする。

JSでCSSの変数を保存する(LocalStorage)

閉じたとき、更新したときなどアンロードされたら保存する。

JSでCSSの変数をセットする(CustomProperty)

CSSのカスタムプロパティをJSで操作する。

CSSでグローバル変数を定義する(CustomProperty)

CSS

CSSで変数を使いたいときはカスタムプロパティを使おう。

rtをコピーしないようにする

HTMLでルビを振ったあとブラウザでテキストコピーしたら漢字かんじみたくなるのを防ぐ方法。

フロントエンド開発環境について調べてみた

2018-04-22時点。ちゃんとした経緯や定義など知らない。