アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方
Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニューがあることがひと目で分かると便利ですよね。 さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、 今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。 矢印の向きが切り替わるドロップダウンメニューの作り方 まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。 今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。 記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox
「Webサーバーを構築しよう(1)」～初心者でもよくわかる！VPSによるWebサーバー構築講座(3) | さくらのナレッジ
各ツールの使い方や接続手順については割愛しますが、うまくログインできれば /home/vpsuser の場所に接続できると思います。 接続できたら、これからindex.htmlを作ってファイルをアップロードするわけですが、サーバーのどこにファイルをアップロードすれば良いでしょう？ 先ほどは、 http://xxx.xxx.xxx.xxx にブラウザでアクセスした時に「Apache 2 Test Page」が表示されましたが、自作のindex.htmlが代わりに表示されるようにしてみます。 http://xxx.xxx.xxx.xxx にアクセスされたときに対応するディレクトリは、サーバーのドキュメントのトップの位置に相当するので、ドキュメントルートと言います。 これは、デフォルトでは /var/www/html です。 SFTPツールでログインした最初の位置は/home/vpsuserです
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
WordPress のカスタムフィールドを使って記事に自動でシリアル番号を振る | バシャログ。
メリークリスマス。今年のベスト映画は『キカイダーREBOOT』…と半年くらい思っていましたがここにきて『ベイマックス』にやられてしまっている kagata です。 WordPress で記事を一覧表示する際に、その記事が全体の何番目かを示す番号を振ってほしいという要望を受けることがたまにあります。細かい要件によっていろいろ考えられる実装方法のうち、ここではカスタムフィールドに番号を保持するアイディアをご紹介します。 カスタムフィールドというと管理画面に入力欄があるものを想像しがちですが、今回は入力欄を作らず記事投稿時に自動でデータを登録するようにしています。シリアル番号以外にも、アイディアしだいでいろんな使い方ができそうです。 シリアル番号の要件 今回実装するシリアル番号はおおよそこんな感じのものです： ある投稿タイプの記事に、新規投稿された順に1から番号を振っていく 途中で記事を削除した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
