ヘッダーなどナビをhover（ホバー）すると英語⇔日本語に変更させるやり方を紹介します。 cssのdisplay:none;を使用！ 今回はナビで使うように簡単に記載いたします。＜html＞ <nav> <ul> <li><a href="#"><span class="1">Home</span><span class="2">ホーム</span></a></li> <li><a href="#"><span class="1">Menu</span><span class="2">メニュー</span></a></a></li> </ul> </nav> ＜css＞ ul li a .2{…

今回はサイトに例として、「東京タワー」のマップを埋め込みする方法です。１）まずGoogleマップで目的地を調べます。 https://www.google.co.jp/maps/?hl=ja２）左上のハンバーガーメニューを開き、「地図を共有または埋め込む」をクリック ３）「地図を埋…

SNSでサイトのURLを共有・シェアされることが多くなってきたかと思います。 その際にURLだけでなく、画像と一文が表示されますがその画像と一文の設定が「OGP」です。①画像の制作 だいたいコーポレートサイトやお店のサイトだとロゴを使うことが多いです。 …

まずは公式サイトからファイルをDLしてリンクします。 getuikit.comDLしたファイルの中で必要なのは、下記3つです。 <link rel="stylesheet" href="css/uikit.min.css" /> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> Ulkitのメディアクエリは4つに設定されております。 変えたい場合はuikit.min.cssの数字を置換するしかないですね… クラス名 uk-hidden@s</link>…

定義型リスト 定義型リストとは「ul」、「ol」リストと少し違い、 「dt」= 用語の指定 「dd」= dtで指定した用語の定義 「dl」= 「dt」「dd」を挟む例 <dl> <dt>レモン<dt><dd>酸っぱい黄色い果物</dd> <dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd> </dl> 以下の文を定義型リストを使ってマー…

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

Googleカレンダーのhtmlの埋め込みですが、レスポンシブ対応にさせる場合、カレンダーの設定によってはスマホ時に画面からカレンダーの右側がはみ出してしまいます。 はみ出してしまう原因はカレンダーの上部にある「印刷」や「月・週」の表示切り替えタブな…

object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…

「writing-modeプロパティ」を使用し、縦書きにします。 p { -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/ -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/ writing-mode: vertical-rl; /*Firefox用はベン…

スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリンク扱いにな…

mg要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみで…