サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.webdlab.com
前回ご紹介しました【制作Tips】https・wwwありに統一する方法のwwwなしバージョンをご紹介します。 今回参考にしたのも前回と同じくこちらのブログ、 .htaccessでhttps化かつwwwなしに統一するクールな方法 を参考にさせていただきました。 コードはこちら。 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L] RewriteCond %{HTTPS} !on RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> このコードを.htaccessにコピペしてそのままサーバーへアップロー
Last updated on 2020/10/14 image:Apple こんにちは（・∀・） 新型iPhone 12の発表に伴いiPhone画面解像度のページを更新しました。 iPhone画面解像度一覧 この一覧に掲載されている情報は2020年10月の時点でアップルストア オンラインで購入できる製品の情報です。Apple製品取扱店で購入できる製品の情報は過去ページ【2020年4月】iPhone画面解像度まとめからご覧いただけます。
こんにちは（・∀・） 昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。 基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。 しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。 なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。 前回投稿した記事では作ったブレークポイントの数は10個。 10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。 しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。 ということで今回、ブレークポイントは415pxと960pxに決定しました。 0px 〜 414px @media (
9月更新・前月(8月)の人気記事トップ10 09/02/2024 ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法 (圏外↑) 【Labs】CSSだけでドロップダウンメニュー ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む ( 09 ↑) 【Mac】Safariでソースコードを見る方法 ( 04 ↓) 【jQuery】入門7. jQueryで新しい
こんにちは（・∀・） インスタグラムにPCから写真を投稿する方法を皆さんはご存じですか⁉️ インスタグラムを使っている方ならご存じだと思いますが、インスタグラムで写真を投稿するにはスマホ等のモバイル端末からでないと写真を投稿することができません。 スマホで取った写真なら簡単に写真投稿ができるのですが、普通にカメラで取った写真の場合、ちょっと面倒なことになるというのはもうお分かりだと思います。 カメラで取った写真をPCに取り込んで、さらにPCからスマホへ... でもお気に入りのカメラで取ってパソコンに取り込んだ写真もインスタに投稿したい... 特別に何かしらのソフトをインストールするとかもなく、 しかも簡単に... その方法、Web制作に携わっている方ならご存知の方も多いと思います。 が、 知らない方もいるかもしれませんので一応ここでシェアしたいと思います。 新たにソフトのインストールなどの
transitionプロパティで動きのある横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。 transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなります。
こんにちは（・∀・） CSSでフォントの種類を指定する場合、「font-family」で指定しますが、 フォントは何を指定してますか⁉️ font-family 定番の設定としては次のような感じですね。 .sample { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; } Windowsなら「メイリオ」や「ＭＳ Ｐゴシック」、Macなら「ヒラギノ角ゴシック」を指定していたと思います。 皆さんもご存知のGoogleのフォント設定は次の通りです。 .sample { font-family: arial,sans-serif; } とてもシンプルです。 「arial」と総称ファミリ名の「sans-serif」だけでWebサイトをゴ
こんにちは（・∀・） 今日はCSS3のobject-fitで画像を簡単にタイル表示にする方法をご紹介します。 画像をインスタみたいなタイル表示にする 普通に画像を表示した場合はこんな感じ。 Result スマホでのご確認はこちらをどうぞ .box { width: 300px; height: auto; } .box img { width: 100%; height: auto; } 大きさの違う画像を横300px、縦autoに縮小して表示。 元の画像の大きさが違うのでデコボコです。 次に画像の縦横を300pxにして表示した場合はこんな感じ。 Result スマホでのご確認はこちらをどうぞ .box { width: 300px; height: auto; } .box img { width: 300px; height: 300px; } 縦横300pxに縮小表示。 大きさの違う
こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない
こんにちは（・∀・） 今日はWebサイトのOGP設定方法について解説します。 OGPとは⁉️ OGPとは「Open Graph Protcol」の略で、facebookやTwitterなどに記事がシェアされた際、そのページが持っている情報をそれらSNSに伝えるためのプロトコルです。 http://ogp.me/ OGPの設定 今回はfacebookとTwitter用のOGPの設定方法をご紹介します。 html要素に次のコードを記述します。 <html prefix="og: http://ogp.me/ns#"> head要素内に次のコードを記述します。 <!--共通--> <meta property="og:type" content="ページのタイプ"> <meta property="og:url" content="ページのURL"> <meta property="og:tit
こんにちは（・∀・） 年の瀬も押し迫りました今日この頃、みなさんいかがお過ごしでしょうか。本日の投稿が年内最後の投稿となります。 今日は表題の通り、キャッシュを無効化せずにCSSの変更を反映させる方法についてご紹介します。 ファイル名にクエリの付加 ブラウザがキャッシュを読みこまないようにして修正したCSSファイルの変更を反映させるには、CSSファイルの名前の後ろ、例えばstyle.cssだったら拡張子の.cssの後ろにクエリを加える方法が一般的なのかと思います。 style.css?1225201710112260 実際のファイル名に?以下の数値を付加する訳ではなく、HTML上だけになります。 ちょっとわかりづらいかもしれませんが、実際のstyle.cssのファイル名はそのままでHTMLのlink要素のファイル名の部分だけを変更するのです。 HTMLはstyle.cssとstyle.cs
document.getElementsByClassName('demo2') 注意点として、jQueryではclass属性のドット( . )を記述しますがJavaScriptでドット( . )は記述しません。 また、JavaScriptのgetElementsByClassNameのElementsの部分が複数形になっているところに注意してください。 サンプル HTML <p> <span class="demo1"></span> </p>
こんにちは（・∀・） 今日はJavaScriptで振り分ける方法２パターンをご紹介します。 JavaScriptとレスポンシブデザインの組み合わせ レスポンシブデザインのサイトでスマホ向けとPC向けでJavaScriptを使い分けたい場合は多くあると思います。 スマホ向けのページにはJavaScriptを使いたいけどPC向けのページではJavaScriptは必要ない、逆の場合もあれば、またはそれぞれ別のスクリプトを使用したいこともあります。 Contents Windowサイズで振り分ける 要素の有無で判別 Windowサイズで振り分ける Windowサイズで振り分ける方法です。 サンプル <script> $(function(){ if($(window).width() < 769){ //forスマホ }else{ //forPC } }); </script> 画面サイズで振り分
明治28年創業のすき焼き、しゃぶしゃぶ、日本料理の専門店の人形町今半。 今回はイクスピアリに入っている、舞浜イクスピアリ店に行ってきました。 人形町の本店は行ったことがないのでわかりませんが、ここイクスピアリにある今半はお昼時はいつも満員で予約しないで行くと待つことになります。 高いお店だから空いてるだろうというのは素人考えのようです。 なので今回は予約して行ってきました。 厳選今半御膳 あらかじめ料理も予約しておきました。 今回はちょっとだけ奮発して厳選今半御膳です。 お酒といきたいところですが、運転があるのでビールはノンアルコールです。 どうでしょうか⁉️ 美味しそうでしょ❗️ 最初お店に入った瞬間はすき焼きの甘い香りが店内に充満していて、もしかして割り下すごく甘いのかな⁉️ とちょっと不安でしたが、食べてみたらそんなことはなく、ちょうど良い大人の甘さ、という感じでした❗️ お肉も口に
北海道生まれの焼きたてチーズタルトのお店BAKE CHEESE TART。 今では北海道だけではなく日本はもちろん海外までも人気が広がっているようです。 千歳空港で1日1,000個売れたソフトクリーム BAKE CHEESE TARTと屋号にチーズタルトが入っているのでチーズタルトだけがメインのお店と思いがちですが、こちらで販売されているソフトクリームも千歳空港で1日1,000個売れたソフトクリームとして有名。 いつもお店の前は行列しているのですが今日はあいにくの空模様のためかいつもよりかは少なめ、ちょうど食後ということもあり、デザートはアイスクリームにしようということになり列に並んでしまいました。 ソフトクリームは中々の量で一人だと少し多いかもという位たっぷりで見本よりも1段高いです❗️ なので1つを二人で分けることにしました。 スプーンも2つもらえます。 味はレアチーズケーキを食べてい
・Webデザインラボ中の人ご紹介・ NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でグリーターとして働いていた経験もあり。趣味はお酒を飲みながらの音楽鑑賞とアウトドア系全般。更新情報はTwitterかFacebookで配信してます。よろしければフォローしてご確認下さい。
先日うちの奥様、アロマディフューザーが欲しいから買いたいんだけどこれどうかなぁ、とアマゾンの欲しいものリストの中からこれZNT 超音波式アロマディフューザー 萌えニャンコ 間接照明 卓上加湿器 空焚き防止 6畳ZNT-E201を見せてきました。 部屋の中はなるべくお洒落なシンプルスタイルを目指している⁉️のでちょっとどうかなとは思ったのですが、可愛い系は好きな方なのでとりあえず買ってみました。 届いたのがこちら。 アマゾンの写真で見るより実物は何とも愛くるしいではないですか。 こんなのが入ってました。 最近はこういうの多いですねw 点けるとこんな感じ。 後ろはこんな感じで尻尾がチャームポイントのようです。 使ってみた感想ですが、 すごく良いです。 かなり癒されます。 触った感じもシリコンでプニプニしててとても良い感じです。 始めは❓でしたが、これ買ってよかったです。 お好みのアロマオイルを
世間では至高のラスク、ラスクの王様などと言われておりますね。 また、プレーンのラスクとは別物みたいな感じになってますがホワイトチョコレートがかかったタイプのラスクもあって、それも美味しいです。 で、ラスクと言えばガトーフェスタハラダ グーテ デ ロワが自分の中では1位だったのです...昨日までは。 が、 そう新たなトップ1ラスクと出会ってしまいました。 奥さんが会社の人からいただいてきたラスク。 mini one⁉️っていうお店のようです。 中はこんな感じで量り売りで買うシステムのようです。 普段朝晩の糖質は取らないようにしているのですが、 二人でペロリと食べてしまいました。 mini oneというお店、調べてみたら、ドンクというパン屋さんの系列店のようで、全国展開もしているようです。 お近くに店舗があればぜひ試してに食べてみてください、美味しいですよ❗️ Mini One 話しは変わりま
こんにちは（・∀・） 今日はJavaScriptで取得した値をPHPに渡すサンプルをご紹介します。 前回ご紹介しましたが、【Labs】JavaScriptでラジオボタンとチェックボックスの入力判定のラジオボタンとチェックボックスで取得した値を、今度はPHPに渡すサンプルになります。 Contents JavaScriptで取得したラジオボタンの値をPHPに渡す JavaScriptで取得したチェックボックスの値をPHPに渡す 1. JavaScriptで取得したラジオボタンの値をPHPに渡す index.htmlとindex2.phpの2ファイル構成です。 index.html <div class="tb-cell sample-form"> <form id="form" action="index2.php" method="post"> <div class="row"> <div
中も外も超シンプルに作りました。確認画面ありのタイプとなしのタイプの2種類です。どちらもレスポンシブデザインでスマホ対応です。 入力チェックはForm Validationでクライアントサイドで行います。 確認画面なしのメールフォームサンプル1 確認画面ありのメールフォームサンプル2 トッピング：メールアドレスの入力マッチ トッピング：その他 確認画面なしのメールフォームサンプル1 確認画面なしのメールフォームです。 入力フォーム部分がindex.html、送信部分のプログラムがmail.phpの2ファイルです。 index.html <div class="tb-cell mail-form"> <form id="form" action="mail.php" method="post"> <div class="row"> <div class="cell"> <label>name
こんにちは（・∀・） みなさんもご存知でしょうが、現在、pepsi x CHUMSのコラボキャンペーンでpepsiコーラを買うとCHUMSの保冷バッグがもらえるというキャンペーンをやっております。 ということで、昨日投稿しましたCHUMSのバッグに続きまして、またしても手を出してしまったCHUMS系アイテム、今度は保冷バッグです❗️ CHUMS x PEPSI キャンペーンをやっていたのは知っていたのですが、初めの頃は買うのをちょっと躊躇しておりました。 なのでキャンペーンが始まってからすでに10日以上経ってからの投稿となります😓 というのもpepsi500mlを4本か2ltを2本買うと一つもらえるのですが、我が家はあまりジュースは飲みません。 さらにカロリー0系の炭酸は美味しくないから個人的には好きではありません😂 でもバッグ3色揃えるなら500mlの、しかも0系コーラを12本か..
こんにちは（・∀・） 今日はAmazonで買ったバッグ達をご紹介します❗️ CHUMS アウトドアが好きな方ならご存知だと思いますCHUMSのバッグを購入しましたー❗️ アメリカのアウトドアメーカーのCHUMSですが、個 […]
雑誌付録 以前から雑誌付録が良くなっていることは知っておりました。 時々良さそうな物が雑誌の付録として売られていることもありましたが、買うまでには至りませんでした。 雑誌Famのミニ焚き火台やBE-PALのミニシェラカップなど、アウトドア好きならちょっと気になるところ。 しかし今回初めて付録付き雑誌BE-PALを購入してしまいました❗️ しかもBE-PALはDマガジンで読めるので実質買ったのは付録の方のようなものです😅 Haglofs x BE-PALコラボのビッグ・サコッシュ Haglofsは衣料品やバックパックなどを製造している北欧スウェーデンのアウドドア用品メーカーです。 そのHaglofsのサコッシュが¥780で買えるなんてこれは買うしかないと思い今回購入してしまいました。 今ならAmazonでも購入可能です。 右側の箱が付録のサコッシュです。 それでは開封していきます。 ダンボ
こんにちは（・∀・） 今日はGoogleアカウントのメールアドレスを変更する方法をご紹介します。 Contents Googleアカウントのメールアドレスを変更する方法 GMAILを削除する Googleアカウントのメールアドレスを変更する方法 Googleの何かしらのサービスを利用する上でGoogleアカウントを持っていると便利なのでGoogleアカウントを持っている人は多いと思います。 そのGoogleアカウントですが、最初にアカウントを開く時、GMAILのアカウントを作ってそのメールアドレスを使用しないとGoogleアカウントを開くことはできないと思っておりました。 ところがGoogleのアカウントはGMAILは必須ではないのを最近知りました。 GMAILは他にも持っているしメアドも増えて管理するのも大変です。 だったらそのGMAILは削除してメインで使っているメールアドレスをGoo
こんにちは（・∀・） MacでFinderを開いている時、開いている現在位置を知りたくなることはよくあることだと思います。今日は開いているフォルダのフルパスを簡単に知る方法をご紹介します。 Contents 開いているFinderのフルパスを知りたい場合 Finderのタイトル部分にフルパスを表示させる方法 パスバーを表示させる方法 開いているFinderのフルパスを知りたい場合 通常Macのデフォルト設定ではFinderのタイトル部分に表示されるのはフォルダ名です。 深い階層などで作業していると、今どこの階層のフォルダを開いているのだろう❓ということはよくあることだと思います。 そんな時Finderのタイトル部分にフォルダのフルパスが表示されると便利だと思いませんか。 Finderのタイトル部分にフルパスを表示させる方法 ターミナルを起動します。 Finder → アプリケーション →
こんにちは（・∀・） 今日はHTML5でFloatレイアウトのテンプレートサンプルをご紹介します。 1. HTML5でFloatレイアウトテンプレート 2カラム・3カラムのFloatレイアウトのテンプレートです。1カラムレイアウトにしたい場合、#containerの中の#column1・#column2のブロックを無くせば1カラムレイアウトになります。 どちらのサンプルも共にレスポンシブデザインとなっております。レスポンシブデザイン無しの通常のレイアウトにすることもできます。その場合、CSSの@media部分の2行を削除してください(中身は生きです)。 2. 2カラムレイアウト 2カラムFloatレイアウトのテンプレートです。 PC向けレイアウトで#column1と#column2の横幅を変更したい場合 #column1と#column2の横幅の合計と親要素#containerの横幅の値が
牛丼といえば大体松屋のプレミアム牛丼が味噌汁付きで定番だったのですが、昨日は初めてランチでなか卯に行ってみました。 定番のメニューなのでしょうか、コスパ最強とうたっている一番上にある牛丼のセットを注文してみました。 和風牛丼と言うらしいのですが、よそのお店の牛丼は和風ではないのでしょうか。 紅生姜たっぷり七味唐辛子そこそこが私の牛丼スタイルです。 感想ですが、牛丼はすき焼き風で美味しかったです。少し味が濃かったので生タマゴをトッピングしたら丁度よくなってもっと美味しかったかもしれません。 その他のメニューはこんな感じです。 一つ残念だったのは、うどんの薬味の葱があまり美味しくありませんでした。 時々美味しくない葱の薬味を出す店と出会うことがありますが、葱好きの私としては大減点です。 しかしそれ以外は美味しかったので、次もまた行ってみてもいいかなと思いました。
(奥さんが)お世話になった(奥さんの)友人へ何かお返しがしたいということで週末ショッピングへと行ってきました。 石系のアクセサリーが好きな彼女、ということでパワーストーン的なアクセサリーが売っているお店へ。 店内にはたくさんのアクセサリーが販売されていましたが、店頭にある商品の中では何だかこれといってピンと来るものに出会えません。 しばらく店内で何か良さそうな物がないか探しながら奥さんと「穴があいている石があるならそれに紐を通してネックレスが作れるのにね」と話していたら店員さんが「紐を通せるように穴の空いた石はございますし革紐等も売っておりますので、それらを組み合わせて作ってみては？」のアドバイスをいただきました。 早速穴の空いた石を見せてもらいました。 思ったよりも色や形が良さそうな石もあったので、ハンドメイドで石と紐を組み合わせてチョーカーを作ってプレゼントしようということに決まりまし
次のページ
このページを最初にブックマークしてみませんか？
『web design lab』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
