クモのようにコツコツと

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

HTML

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

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

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

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

Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう

Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの? まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ!

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで…

【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)

以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこ…

【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの?

前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの?という気になってきたので、実際にやってみる。実録です。

CSSだけでドット絵マリオを描けるのか

ブラウザ3Dの大海原を漕ぎ始めた私ですが、世代的にはドット絵ゲーム世代です。*1そんな私が前から試してみたかったのは、お絵描きソフトを使わずに、CSSだけでドット絵が描ける?。 多分描けると思う。描けるんじゃないかな。まちょと覚悟はしておけ。な、…

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

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

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

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

【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め

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