【HTML/CSS】実務で使ったレイアウトまとめ(2016年8月更新)

デモを見る 目次 画像と背景ありテキストの横並び、テキストは天地中央 ブロック化リンクのテキストを天地中央に配置 画像を含むボックスの角を斜…

【HTML/CSS】JavaScript 無しで画像をロールオーバーアニメーションさせるときのコツ

デモを見る ファイル一式をダウンロードする off / on 画像を絶対配置で重ねる :hover は画像をネストする親要素に指定 :hov…

【Flexbox】2つの弱点とその対応策。Flexboxは万能ではない。

Flexboxが使われ始めた2011年頃には、いかに万能であるかよく喧伝されていました。 しかし以下2つの条件下において、Flexboxの利…

【jQuery】YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]

デモを見る ファイル一式をダウンロードする YouTubeをモーダルウィンドウで表示させたいときは、jQueryプラグイン Magnific…

【Google Map】よくある6つの要望に Google Maps JavaScript API で対処する [IE9対応]

デモを見る ファイル一式をダウンロードする 「Google APIキーの発行って面倒じゃないの…?」 Googleアカウントを持っていれば、…

【Flexbox】ヘッダーでよくあるレイアウトは height / font-size / padding を使い分けると上手くできる [IE10対応]

デモを見る ファイル一式をダウンロードする Flexboxは大変便利ですが、万能ではありません。しかしCSSを細かく調整することで、その力を…

【jQuery】多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]

デモを見る ファイル一式をダウンロードする 仕事で必要だったため作りました。 作った後に気づいたことですが、西畑一馬氏のコードとほぼ同一のも…

【HTML/CSS】テキストリンクのホバー線は、border を指定すると便利なことに気がついた

2016/05/24 アニメーションするアンダーラインを追加しました。   ボーダー See the Pen ホバー線 / sol…

【HTML/CSS】要素並列が難しい場合は table を使って時間短縮 [IE10対応]

デモを見る ファイル一式をダウンロードする table タグは便利です。 Flexbox / float / inline-block / …

【Flexbox】基本操作と実務で使えるレイアウトスタイルまとめ [IE10対応]

デモを見る ファイル一式をダウンロードする 本記事に改行(flex-wrap)の記述はありません。 先日、IE10以下切り捨て案件のコーディ…

【HTML/CSS】テキストの左右に線を引く [IE8対応]

デモを見る ファイル一式をダウンロードする 先日仕事で設置する必要があり、コリスさんの記事を参考にしましたが、IE11でバグが発生してすぐに…

東京都内から都内へ引越しを実行した際の記録

1つ前の記事で、賃貸物件の探し方をまとめました。 ネットワーク展開している賃貸仲介会社で、物件を探すときのコツまとめ 今回は引越しについての…

ネットワーク展開している賃貸仲介会社で、物件を探すときのコツまとめ

2015年9月~10月にかけて、東京都大田区から都内へ引っ越すための賃貸物件を探し、11月に引越しを実行しました。その際の情報をまとめます。…

スタンディングデスクにしてから、1ヶ月以上が経過した状況まとめ

本記事の内容は、あくまで個人的体験に基づいたものであり、科学的 / 医学的根拠はありません。 立ち作業用のテーブルを納品してもらった10/2…

【WordPress】functions.php よく使うコードまとめ(2015年11月)

実務案件やアフィリエイトサイト構築で、よく使っているコードをまとめます。 目次 アイキャッチ有効化 ウィジェット有効化 カスタムメニュー有効…

【WordPress】最低限必要なサイト構成 / ファイル / コードまとめ(2015年11月)

ブランクテーマ「Bones」を利用しつつ、足りない部分を補います。 http://keitahirai.net/archives/563 目…

【jQuery】フルFlashのようなサイト制作は、8要点を押さえれば乗り切れる

デモを見る ファイル一式をダウンロードする エンタメ系サイトのコーディングなどでは、CSS3とjQueryを駆使したフルFlashっぽい仕上…

2009年頃に作成した12カテゴリ別のWebサイトレイアウト案

画像の劣化が激しいです。 個人でWebサイト制作の受託を始めた頃、サイトデザインも請け負っていました。その時自分用に作成した、サイトカテゴリ…

【WordPress】ブランクテーマ「Bones」を基本ファイル構成に変更する

本記事は個人的な備忘録です。検索用ファイルが必要な場合は残す。 ファイル一式をダウンロード 公式サイトからダウンロードして、解凍後にFTPア…

スタンディングデスクでの作業を開始

スタンディングデスクにするための特注テーブルを、本日自宅に納品して頂いた。テーブルの制作を依頼したのは、埼玉県の家具工房「アクロージュファニ…