コンテンツへスキップ

Shiro's secret base

とあるエンジニアの備忘録

  • Home
  • About
  • designs

カテゴリー: フロントサイド

2020年5月26日 master-shiro

HerokuでNuxt.jsを立ち上げる手順

最近作ったこちらのサービス(川柳を投稿するのに特化したSNS)をheroku+nuxt.jsの環境で立ち上げた(http://senryu-owarai.herokuapp.com/) サービス構成図 HerokuでNu

Continue reading
2020年5月5日 master-shiro

様々なアニメーションを簡単に実現可能なAnimate.cssを使ってみた

今回はいろんなアニメーションを簡単に実現するAnimate.cssを使って見ようと思います。 Animate.cssとは Animate.cssはフェードインやスライドインといったCSSのアニメーションをパッケージしたC

Continue reading
2020年1月15日 master-shiro

メガナビゲーションの作り方

どうも、シローです。 今回はメガナビゲーションの作り方についてまとめました。 メガナビゲーションとは メガナビゲーションとはマウスでカーソルを合わせたときに、下にさらに要素が表示される、ちょっと凝ったナビゲーションのこと

Continue reading
2020年1月11日 master-shiro

ナビゲーションメニューの作り方

どうも、シローです。 Webサイトで必ずといってあるナビゲーションメニューの作り方を今回はまとめようと思います。 ヘッダーナビゲーションの作り方 ヘッダーナビゲーションはサイトの上の方に横一列で配置されているナビゲーショ

Continue reading
2019年8月18日 master-shiro

CSS,PNG,SVGなどで様々なボタンを作る

どうもシローです。 今回は、UIの要素であるボタンを色々な方法で作成してみようと思います。 CSSのみで作成する シンプルにCSSのみで作成する方法です。 擬似要素:hover, activeを使って、ホバー時にボタンを

Continue reading
2018年12月24日 master-shiro

レスポンシブ対応の書き方

WebサイトをPC用とスマホ用でレイアウトを別々にするときの僕なりの方法をまとめます。 HTML内にPC用、SP用のDOMを構築 以下のように、PC用のDOMとSP用のDOMを用意します。 [crayon-6011166

Continue reading
2018年12月23日 master-shiro

[CSS]:vertical-alignについて

vertical-alignは主にインラインボックス内で画像の高さを文字の高さに合わせたり、 テーブル内の文字の位置を調整するために使われる。 テーブルのサンプルコード   HTML [crayon-60111

Continue reading
2018年11月21日 master-shiro

jQueryでスクロールに応じて、ナビゲーションを移動する方法

おしゃれなウェブサイトって、だいたいスクロールでナビゲーションが移動したりしますよね。僕のこのサイトもそういうおしゃれな事がしたい!っということで、jQuery+CSSでスクロールによってナビゲーションを移動するような仕

Continue reading

カテゴリー

  • Nginx (14)
  • Docker (6)
  • AWK (4)
  • Linux (2)
  • プログラミング (1)
  • Shell (3)
  • インフラ (4)
    • Fluentd (1)
    • さくらVPS (1)
    • EC2(AWS) (1)
    • Heroku (1)
  • サーバサイド (13)
    • Laravel (4)
    • PHP (8)
    • CakePHP (1)
  • WEB (1)
    • HTTP (1)
  • セキュリティ (3)
  • フロントサイド (8)
    • Vue.js (1)
    • HTML/CSS (5)
    • jQuery (1)
    • Nuxt.js (1)
  • ShellScript (3)
  • Firebase (1)
  • UML (1)
  • Gulp (1)
  • Apache (1)
  • Vim (1)
  • Git (1)
  • MySQL (1)
  • phpMyAdmin (1)
  • 雑記 (1)
  • 未分類 (2)
WordPress Theme: Wellington by ThemeZee.