Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
おはこんばんにちは、ハルです。 JavaScriptはなんでもできるんだなぁ、と毎日のように感じています。 PHPでカレンダーを作ったことはあったのですが、JavaScriptで作成したことがなかったので、作ってみました。 今回紹介するひな形さえあれば、みなさんの好きなようにカスタマイズできると思います。 今日の日付の文字が赤く表示される、かなりシンプルな月次カレンダーです。 ここまで作ってしまえば、あとはそんなに悩まずに、カスタマイズ(前月・次月のボタンや、数字自体を押せるなど)ができるはずです。なので、シンプル状態のカレンダーのコードを、ここにメモ…紹介したいと思います。 HTML <h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2> <table class="
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。(色違いなども若干含みます。) 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。(スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。) というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。 サンプル1 CSS3:Accordion menu by rollover メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として、サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で、メニ
We’re getting things ready Loading your experience… This won’t take long.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く