クモのようにコツコツと

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

HTML

カスタムデータ属性をCSSやJSで読み込む(テキストをHTMLに集中させる)

HTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキス…

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

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

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

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

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

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

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

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

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エデ…

黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWeb…

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を使え…