Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
![CodePen - Front End Developer Playground & Code Editor in the Browser](https://cdn-ak-scissors.b.st-hatena.com/image/square/b03f672cb06c9cde2f6ac91e7992e03ca34c33fc/height=288;version=1;width=512/https%3A%2F%2Fstatic.codepen.io%2Fassets%2Fsocial%2Ffacebook-default-05cf522ae1d4c215ae0f09d866d97413a2204b6c9339c6e7a1b96ab1d4a7340f.png)
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
今回の記事の主題はデータURIスキームとはなんぞいねってことなんですが、簡単に言いますと、このスキームを使うとサーバにリクエストすることなく、ページ内のコードに画像を埋め込むことができるという話です。スキームといえば、このほかにもhttp:、ftp:、mailto:なんてものがありますね。 Webパフォーマンスにとって高コストなものといえば、HTTPリクエストですから、それを使わず画像を表示できるということはこのスキームを使う最大のメリットと言えるでしょう。 てなわけで、実際にどんなものか見てみましょう。例えば、隣にあるこのフィードアイコン はHTMLソースの中ではこんな感じでに記述されています。 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6
今回は、以前のインライン化を応用したタブメニューに挑戦しましょう。完成系は、以下のようになります。 作ってみよう 一から作ってみましょう。 <ul id="tabnavi"> <li><a href="#">ホーム</a></li> <li id="here"><span>日記</span></li> <li><a href="#">掲示板</a></li> <li><a href="#">自己紹介</a></li> </ul> <div id="main"> ここに本体コンテンツ。 </div> 今回、わざわざ本体コンテンツを用意してあるのは、ちょっと特殊なことをするためです。その種明かしは、あとでします。 スタイルシートを書いていくことにします。 以前のページでしたように、まずインラインにして、それを少しばかり整形します。 #tabnavi { list-style-type: non
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く