ポートフォリオサイト作成と開発環境

最近は情シス的な業務やサイト制作でもサーバー廻りを担当することが多くなりました。 そのためフロント部分をキャッチアップする目的をかねて、自分のポートフォリオサイトを作成しています。 開発環境を備忘録としてまとめます。

サイト高速化のメモ

目的 サイトを高速化して検索ランキングを改善してサイトへの流入を増やす。 以下記事でGoogleは表示速度をモバイル検索ランキングの指標とすることに言及している。 ref. https://webmaster-ja.go […]

復習:CSS Floatボックス

floatを使ったレイアウトの復習。 FlexBoxは便利だが、floatもまだ使うことがあるので、思い出すためのメモ。

WordPressテーマ作成のCSS開発環境 : WordPress

久しぶりに1からWordPressテーマを開発している。 フリーランスのときは、タスクランナーとしてGrantを使っていたが、最近はタスクが少ないこともあってnpm-scriptsを使っている 使用しているパッケージ b […]

Bootstrapの開発環境 : CSS

今後、Bootstrapを使ったコーディングが増えそうなので、とりあえず開発環境を整えようと思った。

モバイル開閉メニュー : CSS

フリーランスでデザインが支給される場合は、(多少の誤差はあっても)それを再現する必要があるので、作業割合が高くなった。 しかし書いていないと、自分が考えているよりずっと忘れてしまっていることを痛感した。

動画全画面表示 : CSS

動画を全画面表示する覚書です。

擬似要素でFont Awesomeを使う方法 : CSS

a:afterでangle-rightを使うサンプルをします。

スタイルシートで背景を円にする作成するサンプル : CSS

スタイルシートで背景を円にする作成するサンプルです。

Lightboxの進む戻る矢印を画像枠の外に出すカスタマイズ

Lightboxの進む、戻る矢印を画像の外へ出すカスタマイズのメモ。 Lightbox lightbox.cssを変更 .lb-nav a.lb-prev { ….. position: absolute; // 追 […]

CSSのline-heightが設定されているさいに出る余白

CSSのline-heightが設定されているさいに出る余白のメモ。 <li> <a href=”..”><img src=”..”></a> </li> IE […]

IE8のフロートボックス内部の画像が表示されない対処 : WordPress

IE8のフロートボックス内部に配置した画像が表示されないことがある。 » なぜ、IE8では、画像が表示されないことがあるのか – ミショニポー

font-awesome

CSSのafter, before疑似要素でFont Awesomewebフォントを使うメモ。 通常利用 icon-chevron-right <i class=”icon-chevron-right”>&l […]

CSSの設計についてのメモ

メンテナンス性のよいCSSを設計するために参考になるスライド。 ちゃんとCSSを書くために – CSS/Sass設計の話 上記スライドで紹介されているサイト CSS Architecture — […]

WordPressのテーマ作成でStyleDoccoとCompassを使う : WordPress

WordPressのテーマ作成でStyleDoccoとCompassを使うメモ。

デフォルトのリンク(aタグ)の色

0000EE

CSS3でグラデーションと背景画像を両方指

CSS3でグラデーションと背景画像を両方指定する。 background: #f9f9f9; /* Old browsers */ background: url(listmark.png); background: u […]

clearfix

clearfixのメモ。

Bootstrapのタブ・モーダルの簡単なサンプル

スマートフォンサイトをBootstrapを使い作成するときのタブやモーダルダイアログのメモ。

SassインストールとPhpStormの設定(Mac) : CSS

SassをMacにインストールしてPhpStormから実行できるよう設定。 » Sass – Syntactically Awesome Stylesheets Sassの設定 Sassインストール sudo […]