模写コーディング 架空のカフェサイトを作りました。クロスフェードスライダー。nth-childやnth-of-typeが効かない！
あるHTML CSS学習本（前回の記事参照）で作るサンプルサイトを参考に、架空のカフェのサイトを作りました。画像は、無料画像素材サイトの「写真AC」から取ってきてます。出来栄えはこんな感じ↓ここの画像はクロスフェードスライダー（画像が徐々に...
模写コーディング
模写コーディング 
JavaScript jQuery ゴディバのサイトを模写しました。jQueryのプラグイン、「slick」スライダー。
ブログの更新が空いてしまいましが、その間ゴディバのサイトを模写してました。スマホ画面、PC画面両方作り、約3週間で完成。なぜゴディバのサイトを模写？最初はコーポレート(企業)サイトを模写しようと思っていたのですが、ゴディバのサイトがコーポレ...
模写コーディング PAS-POL模写完成。ブロックリンク。
PAS-POLの模写が終わりました(スマホ画面とPC画面)。かかった期間は約10日間。時間にすると、15時間位でしょうか。今回はスマホ画面とPC画面を同時に作っていきました。スマホ画面のヘッダー作ってPC画面のヘッダー作って、スマホ画面の「...
模写コーディング 「PAS-POL」サイトの模写を始めました。リセットCSSとBootstrapを導入。
PAS-POLの模写を始めました。見本サイト↓PAS-POL -旅のモノづくりブランド-｜TABIPPO新たに模写を開始するに当たり、今回は以下の事に挑戦しようと思います。 リセットCSSを使う。 Bootstrapを使う（パーツだけ）。 ...
模写コーディング ISARA[イサラ]のレスポンシブデザイン模写終了。
ISARAのレスポンシブデザイン（スマホ画面）の模写が終了しました！かかった期間は約半月。pc画面と合わせると、イサラの模写に約2か月かかりました。出来栄えはこんな感じ↓isara.life模写制作LPisara.life模写制作LPこの「...
模写コーディング ISARAのレスポンシブ半分終了。pc画面とスマホ画面とで文字の改行を変える方法。
ISARAのレスポンシブデザイン、スマホ画面の模写コーティングが半分くらい終わりました。一部お見せします↓isara.life模写制作LPisara.life模写制作LPisara.life模写制作LPisara.life模写制作LPisa...
模写コーディング ISARAのレスポンシブデザインの模写を始めました。スマホ画面だとposition:fixedが効かない！
ISARAのレスポンシブデザイン(スマホ画面)の模写を始めました。スマホからの見た目を確認するには、デベロッパーツールを開き左下のアイコンをクリックします。機種を選択できたり、「Responsive」で横幅を伸び縮みできます↓スマホ画面だと...
模写コーディング レスポンシブデザインを作るコツ。
現在レスポンシブデザインの勉強中です。そんな中わかってきた、レスポンシブデザインを作るコツを書いていきたいと思います。 レスポンシブデザインは横幅可変を前提としたデザインを作るのが基本なので、最初から(pc画面から作るにしてもスマホ画面から...
模写コーディング ISARA[イサラ]の模写コーディング完成！アコーディオンの実装。
ISARAの模写コーディング完成しました！（pc版）長かった。分厚い壁に少しずつ穴を開けるようなイメージでコツコツ積み重ね、ついに終わりました。かかった期間は約1か月半。私はたぶん1日平均1時間もできてない。45日として、時間にすると約40...
模写コーディング サイトにSNSボタンを設置する方法(ツイッターとフェイスブック)。
今回は、ツイッターとフェイスブックのSNSボタンを設置する方法を書いていきます。ISARAの模写コーディングを例にやっていきます。ツイッターの「ツイート」ボタンを設置する方法。まずTwitter Publishにアクセス。ここをクリック↓一...