ar0のブックマーク - はてなブックマーク

ヘッダー・ナビゲーションを固定表示させるアイデア5つ
ヘッダー・ナビゲーションを固定表示させるアイデア5つ公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__it em"><a href="">About</a></li> <li class="gnav__menu__it em"><a href="">W
ar0 2022/12/05
リンク
【Web デザイン】縦書きを取り入れたデザインの優れたサイト10選
【Web デザイン】縦書きを取り入れたデザインの優れたサイト10選公開日:2017/10/25 /最終更新日:2019/02/09 Web デザイン以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。 1.和風デザインで縦書きまずは王道の和風デザインで縦書きを取り入れたサイトです。あきた舞妓 -akitamaiko- ファーストビューが和紙のような背景にロゴマークのみ。ファーストビューは色々盛り込みたくなりますがこのいさぎよいシンプルさがグッド。こちらのサイトは縦書きは画像で表示しています。【公式】灯屋　迎
ar0 2021/10/04
デザイン

レイアウト
リンク
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
WEBDESIGNDAY > INSPIRATION > Technique > CSS > 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー公開日:2020/05/03 /最終更新日:2020/05/25 CSS PICKUP Technique CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々
ar0 2021/08/30
css

トリミング
リンク
Googleマップをレンスポンシブに対応する方法
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレンスポンシブに対応させる方法」をやっていきたいと思います。まずはGoogleマップを埋め込むご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。 Googleマップにアクセスします。 https://www.google.co.jp/maps/ 画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。そして同じく左のメニューにある「共有」をクリックします。するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。 iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサ
ar0 2021/07/07
google

レスポンシブ

map

GoogleMaps
リンク
1