クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4

JS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3

CSS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

list-styleが表示されない!原因はdisplayにあった!6年前の知恵袋に救われた話

CSS

ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ?表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた!という話。

リンクでよくある「>」アイコンを画像じゃなくてCSSだけで作る

CSS

リンクや更新一覧などでタイトルの右側に「>」アイコンをつけることがよくあると思う。 imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。 テキストの「>」を配置してもいいけど見た目はイマイチ…。あとシステム…

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…

【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め

先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 ア…

【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め(EJSもあるでよ!)

HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。 これらの形式をブラウザで表示するためにはHTMLにコンパイル(変換)する必要があります。その環境構築が第一難関です。 が!CodePenを使え…

ブログを引っ越しました

突然ですががブログを引っ越しました。 今後はこちらで更新いたします。 よろしくお願いいたします。 http://idr-zz.hatenablog.com Tumblerはこのまま残して、もし他の用途があったら復活するかもしれません。