HTML HTMLテンプレートで時短サイト制作
自分のサイトを作りたい！そんな方のための学習帳。検査すれば沢山出てくるサイト制作のすすめ。どっとインストールとか、すごい分かりやすいじゃないですか！でもでもでも、学習の前にコピペでパッと作っちゃいましょう！覚えるのはそれからでいいと思います...
HTML 
CSS CSSのtransitionについて深く知る
普段使っている「transition」を、自分はあやふやにまとめて定義していました。自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。transitionとは？transitionとは、Google翻訳すると「...
javascript jQueryで画面遷移させる方法
jqueryで遷移する方法をご紹介します。画面遷移する場合、javascriptでは「window.location.href」と記述しjQueryだと「location.href」で遷移することができます。今回はすべてjQueryで書いて...
javascript jQueryでマウスカーソルの位置を取得する方法
マウスカーソルの取得でよく使う値は、トップからの位置ぐらいなものですが知っておくと便利な、色々な場所からのカーソル値の取得方法のご紹介です。さらに最後に、カーソルの値を使った面白いウェブサイトのご紹介もあります。カーソルの値だけ取れてもつま...
CSS 三角形の作り方｜CSS
CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。三角形を作るうえで必要になってくるプロパティが「border」だ。これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。borderで三角...
CSS 画像を丸く切り抜く方法｜CSS
TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。やりかたは2種類あり、自分は2つ目が好みでよく使用しています。１つめは、下記のみたいにHTMLでimgタグで画像を表示し周りを切...
CSS ページ幅をこれ以上広げないCSS
パソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。CSSでこれを表現するには、下記の記述をコンテンツの最も外のDivに付ければOK。【CSS】 .contents { width: 100%; max-width: 80...
javascript jQueryでボタンを押すと前面に広がるメニューの実装方法
スマホサイトでよく見るドロワーメニュー（三本線）を押すと前面に広がるメニューを実装してみようと思います。HTMLとCSSまずはメニューを出した状態で重なりを調節します。今回は、「 header 」が一番上でその下にメニューが来て、さらに下に...
javascript jQueryでページ内リンクを固定ヘッダー分ずらす方法
昨日、「スムーススクロールでページ内リンクをそっこう実装できるjQuery」を紹介しましたが、固定ヘッダーがあると、その分ずらさなくちゃいけない。。。。すごい手間。今回はそんな手間をそっこう解決できるjQueryのご紹介です。基本になるHT...
javascript jQueryでスムーズにページ内リンクを移動する方法
ページ内のリンクになにも設定しない場合、アニメーション無しでカクッと切り替わっちゃって大変不格好。そんな不格好なページ内リンクを優しくするする～っと移動する方法をご紹介します。下のコードをjsファイルに張り付けると、ページ内リンクのaタグ全...
javascript jQueryでmarginとpaddingを含めた値の取得方法
全ての親要素の値を取得するなら「.height()」でいい。でも、ちょくちょく「margin」や「padding」、「border」を含めた値が欲しくなる時があります。いつも忘れてしまうので、これを期に覚えようじゃないかと思いまして書いてゆ...
CSS 【CSS】文章（テキスト）の改行を禁止する方法
テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。
javascript jQueryでスル～っと表示/非表示する方法
1行で実現できるフェードイン・フェードアウトレシピの紹介です。表示させるボタンには、あらかじめCSSで「display:none;」をかけておきます。フェードインボタン 表示ボタン HTML<div class="fadein_btn"> ...
CSS CSSだけで出来るボタンのホバーエフェクト集
javascriptは使わずにCSSとHTMLだけで装飾できるボタンのホバーエフェクトをご紹介します。コピペですぐ実装できるので、このページをブックマークしておくと便利です。薄くなるボタンボタン01HTML<div class="btn01...
その他 デザイン｜FireFoxロゴ リニューアル
今年の6月11日、Mozillaは「FireFox」の新たなロゴを発表しました。今までブラウザやOSの名称として使われてきた「FireFox」が新たなサービスと共にロゴをリデザインした。新たなサービスロゴもリデザインされた「FireFox」のロゴと統一感のある色味で、サービス同士が連携できるのではと想像させるデザイン。
