ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
Webサイトをコーディング模写するやり方と使用するツール | HPcode（えいちぴーこーど）
模写の対象サイトを決める まずはどのサイトを模写するかを決めましょう。難しすぎても途中で諦めてしまいますし、簡単すぎたら時間の無駄になりかねません。 わたしはここから選んでいます（難易度高め・・・） 画像がメインのLPとかのサイトはあまり練習にならないので、テキストベースのサイトを選ぶのがいいかと思います。模写コーディングするサイトの選び方は以下の記事にまとめたので、まだ対象サイトが決まっていない方はまずはこちらを参考に選んで見てください！ https://haniwaman.com/select-mosha/ より実践的なコーディングを練習したい場合は、実務で行うようなデザインカンプからのコーディングを練習できるnoteもあるので、ぜひお試しください！ → Photoshop、Illustrator、XDからのコーディングに慣れよう！ コーディングルールとツール なんの計測も行わずに目視
FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）
この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の
Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode
Photoshopから各種値を取得する 続いてはPhotoshopから色々な値を取得していく方法です。正確なコーディングをするには正確な値を取得しないといけません。 文字テキスト自体を取得 画像と対になるくらい基本的なものだと思います。「文字ツール」を選択してテキストエリアをクリックしてCtrl + A → Ctrl + Cしてコピペしていく感じでやっています。 文字ツールはTのアイコンのものです。Tのショートカットで切り替えることもできます。 コピーしてる様子はこんな感じです。 文字に関する値を取得 ウインドウ → 文字 を選択して「文字パネル」を開きます。 文字パネルからは、CSSプロパティで表現すると以下の情報が得られます。 font-familyfont-weightfont-sizeline-heightletter-spacingcolor 選択ツール or 文字ツールで知りた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】 | HPcode
