Webデザイン

css

[CSS]CSSセレクタ・擬似要素・擬似クラスを知るとCSSコーディングが楽しくなる

今回は基本に立ち返り、よく使う、基本的なセレクタ・擬似要素・擬似クラスのおさらいをしてみようかと思います。CSSセレクタって何?例えばCSSで「段落の文字色を赤にする」ときに「~の」、要するにこの場合「段落の」の部分がセレクタになります。つ...
Photoshop

[Photoshop, Nik Collection]Photoshopクラッシュの原因は多分これ

おはよう、こんにちは、おやすみ。セプテンバー調子はどうだい?ちゃんと学校行ってるかい?私はねぶっちゃけ学校とかクソくらえだと思ってたよ!明日学校に行きたくないと思った君へ、歌ってる場合じゃねー独立してからというもの忙しさにかまけてブログの存...
css

[js, jQuery]グローバルメニューを固定する2パターンをメモっとく

久しぶりのjsネタ(女子小学生とは違う)最近のWEBは縦の長さが長くなったと思いません?パララックスとか使うと特に。そんな時のユーザビリティに役に立つ「グローバルメニューをページ上部に固定する」jsを2パターンメモっておこうと思います。(最...
css

[CSS]CSSの小技をメモる Part.1

ネタがありすぎて何を書けばいいか分からなくなったので自身たまにしか使わないCSSの小技をメモるという逃げ。誰かの役に立てばいいのだけどとは思ってませんので参考、コピペは自己責任で。ってCSSなので大したことは起きないと思います。※CSS崩壊...
Instagram

[SnapWidget,Instagram]インスタグラムのタイムライン、ハッシュタグをWEBサイトに表示する

Instagram、人気ですよね。女子とかに人気ですよねっ。ユーザーの6割は女子ですって。そんなInstagramをWEBサイトに表示していれば・・・そんな淡い期待を抱きながら、チョチョイのチョイでやってみようと思います。SnapWidge...
jQuery

[YouTube、jQuery]WEBサイトの背景にYouTubeの動画を配置するjQueryプラグイン[jquery.mb.YTPlayer]

WEBサイトの背景に動画を配置と聞くとvideoタグ使ってどうたらこうたら、未対応のブラウザのために画像をどうたらこうたらとか、フォーマットが云々とけっこう面倒なものでしたがYouTubeにアップロードした動画を背景にできるjQueryプラ...
css

[CSS]そろそろFlexboxをまとめてみる Part.3

今回は「flex-grow」「flex-shrink」「flex-basis」3つと「flex」ショートハンドについてやってみようと思います。基本のhtmlまずは基本になるhtmlから<divclass="flex-layout"><div...
css

[CSS]そろそろFlexboxをまとめてみる Part.2

前回の続きです。Flexboxの色々なプロパティを見ていきましょう。flex-direction「flex-direction」は子要素の配置方向を指定するプロパティです。基本になるhtml<divclass="default-flex">...
css

[CSS]そろそろFlexboxをまとめてみる

IE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。とは言いましても一般的な話でIE10のシェアが...
css

[CSS]googleマップをレスポンシブに表示したい

気付けば4月。今月また歳を取ります。というわけで書こうと思ってて忘れていたネタを2年越しに思い出したので書きます。「今?!」というツッコミは大歓迎。レスポンシブデザインのサイトが当たり前になり早有余年、アクセスマップページなどに貼り付けてる...