My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

HTML/CSS

テキストや要素を簡単に上下中央揃えするCSS

今日は、テキストや要素を簡単に上下中央揃え(縦位置中央揃え)したい時に使えるCSSのご紹介です。今回の方法は、 「display:flex;」と「align-items:center;」 を使うのがポイントです。 「display:table-cell;」や「 vertical-align:middle;」で縦位置中央…

Scssコンパイル時のエラー「Invalid Windows-31J character」 原因と解決策は?

「Invalid Windows-31J character」 エラーって? 発生プロセス Webページ追加に伴い、scssファイルを新規作成、 いつものようにコンパイルしようとしたところ、エラー発生。 症状 以下、その際 Sass プリプロセッサーである Koala で出力されたエラーメッセ…

favicon読み込み時のエラー 「Failed to load resource: the server responded with a status of 404」への対応

本日ほぼ完成したBootstrapサイトをBlisk(※)で検証していたところ、Errors Notifierでエラーを検出! ※Bliskについては、以下記事をご参照のこと times-diary.hatenablog.com さらに確認すると、以下のようなメッセージが。 Failed to load resource: the se…

Koala 2.2.0にアップデートするとエラーが発生

以前ご紹介したSass編集用 GUIツール、Koala について、 ここ最近頻繁にアップデートを促すメッセージが表示されるようになったため、更新をしてみました。しかし、その結果、最新版 2.2.0 バージョンでエラーが続出することに。「一体どうなっているのか?…

同一ページ 別タブ内アンカーリンクへの移動実現方法

同一ページ内の異なるタブ内アンカーリンクに移動するには 通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。 <li><a href="#ID名">リンクテキスト</a></li> しかし、アンカーリンク先が他のタブ内だったりす…

リファラ (REFERRER) 制御方法を確認しました

リファラ (REFERRER) 制御方法を確認しました こちらについてご説明する前に、「リファラって何?」という方のために、以下ご説明いたします。 リファラ (REFERRER) とは? どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。 ※…

CSSで実装する タブ機能

[jQuery不要] ラジオボタン + CSSで出来る タブ機能 以下記事を参考に、Webページにタブ機能を設置してみました。【参考記事】 qiita.com上記にてご紹介いただいたコードで、 おかげさまで思った通りのタブができました。と喜んだのも束の間、一つ問題が発覚…

おススメ Div要素 丸ごと スライド可能なスライダー 「Swiper」

jQuery不要の高機能スライダー 「Swiper」を実装してみました 今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。Swiperのダウンロードはこちらから可能です。 Swiperの使用に至ったキッカケ 見出しやボタン等の…

CodePenを使ってみました

CodePenを使ってみました 以前から話題になっていたCodePenを使ってみましたちょっと戸惑うところもありましたので、以下より、その使い方(ユーザー登録から本ブログにコードを貼り付けるまでの手順)をご紹介いたします。 1. ユーザー登録 まず、以下のサイ…

数字型リストマーカー (箇条書き)

<目次> 数字型リストマーカー 標準的な数字タイプ (decimal) 2桁数字タイプ(decimal-leading-zero) ローマ数字[小文字] タイプ(lower-roman) 漢数字タイプ (cjk-ideographic) 数字型リストマーカー 今日は以下のような数字型の箇条書きをマークアップする…

【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト

パラメータ引き継ぎスクリプト 今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。【目的】 遷移元URL情報が引き継がれているため、 どういった被リンク…

【CSS3】 アニメーションボタン

CSS3によるアニメーションボタン No.2 拡大・縮小するアニメーションボタンを作成しました。 Demo css3 アニメーションボタン(拡大・縮小) | WebStock 以下、ソースを記載します。[ソース] html <a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a> ※上記、サイト名、パス、画像ファイル名は適宜変更してくださ…

グローバルナビのテキストをhoverで切り替える方法

グローバルナビのテキストをhoverで切り替える方法 グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。ここでは、下図のように、 ↓ 標準時英語表記のグローバルナビメニュー ↓ (マウスホバー) ↓ 日本語表記するという動作を実…

Sass の編集にはこれがオススメ「Koala」

今日は、Sass編集時に役立つ、こちらのツールをご紹介させていただきます。 ダウンロード先: http://koala-app.com/ Sass (サス) とは Syntactically Awesome Stylesheets の略だそうです。 一言で言うと、拡張版CSSといったところでしょうか。 CSSが入れ子…

【CSS3】 アニメーション(ゆらゆらバナー)

ECサイト設置用 CSS3のアニメーションバナー ECサイト設置用にCSS3のアニメーションバナー、 作りました。 ※以下はDemo用ダミーです。Demo 以下、サンプル用のソースを共有します。 <style> /* 基本設定 */ html, body { margin: 0; padding: 0; } body { font-fami…

CSSのみで簡単実装 ハンバーガーメニューの作り方

スマホサイトでおなじみ、ハンバーガーメニュー 今日は、CSSのみで実装可能、 開閉動作付きハンバーガーメニューを作成しました。 Demo 以下、このたびのソースを公開しておきます。 ソース公開 HTML <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </meta></meta></head></html>

【CSS3】transparent で右向き三角を表現する

CSSで右向き三角ボタンを作る transparentを使って下のボタンを作ってみました ECサイトなどに使えそうなボタンです。 備忘録として、ソースを記載します。 [ソース] html <a href="#" class="see_detail">詳細を見る</a> [ソース] css a.see_detail { width: 160px; font-size: 16px; } .see_de…

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

本日の授業テーマ CSS3確認テスト Webフォントの活用 SVG画像の活用 Syntax Highlighter Zen-coding(Emmet)の活用 本日の学習内容 CSS3確認テスト 【問題】【問1】CSS3で影をつける場合の、2つのプロパティ名を書きなさい答え: box-shadow text-shadow参…

6/17 [HTML5/CSS] レスポンシブサイト(固定レイアウト)/ [CSS3] 角丸 / [PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト(固定レイアウト) [CSS3] 角丸 [PHP] 各種RSSを取得 [HTML5/CSS] レスポンシブサイト(固定レイアウト) 以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。[課題] 固定レイアウトパターン:構造 - W…

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

[PHP] 確認テスト(データベースへの接続) [HTML5/CSS] レスポンシブサイト(可変レイアウト) [CSS3] シャドウ(ボックス・テキスト) [PHP] 確認テスト(データベースへの接続) 前回の授業の復習として、以下の課題を実施 【課題】 ブラウザの画面に、以…

6/10 [HTML5] レスポンシブWebデザイン

[HTML5] レスポンシブWebデザイン 参照: http://d.hatena.ne.jp/web-0127/20140701/p1 レスポンシブWebデザイン デバイスごとのマルチソースではなく、ワンソースで対応する参考: slideshare 「レスポンシブWebデザインの基礎」 http://www.slideshare.net…

3/31 ①[CSS] HTML5でグリッドスタイルのページを作成 / ②[Illustator] ペンギン画像を作成

[CSS] HTML5でグリッドスタイルのページを作成 [Illustator] ペンギン画像を作成 グリッドスタイルのページを作成 【見本】 【HTML/CSS模範例】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>演習:HTML5でCSSレイアウト</title> <style> article, section, figure, header, nav { display: block; } </style> </meta></head></html>

3/18 カラムレイアウトの設計B

- カラムレイアウトの設計[CSS]【見本】 今日の課題は以下のレイアウトを再現すること 【習作】 以下、自身の習作です。 自己の感想: 見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。 なお、以下が…

3/11 2カラムレイアウト(応用)

2カラムレイアウト 応用 [Photoshop]境界線を調整(複雑な選択範囲) 【演習】2カラムレイアウト 応用 課題:昨日の2カラムレイアウトに以下変更を加える -ロゴとビルボードの空きを「10px」に変更 -ナビボタンの縦の面積を広げる -#contentのデザインを変更…

3/5 ①floatを使ったレイアウト / ②Flashの復習

本日の授業テーマ floatを使ったレイアウト Flashの復習 本日の学習内容~まとめと感想~ CSS対象ブラウザ IE8以上 (IE6) CSSがほとんど認識できない。 例えば、「auto」が分からない。 参考記事: IE6でよく遭遇するCSSのバグとその解決方法 | コリス [演習…

2/25 CSS基礎確認テスト / はじめてのFlash

本日の授業テーマ CSS基礎確認テスト Flashについて 本日の学習内容~まとめと感想~ CSS基礎確認テスト 基礎確認テストとして、以下の課題に取り組みました。[課題04] 素材: [HTML] <html lang="ja"> <head> <meta charset="utf-8"> <title>課題04 ナビボタン</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="nav"> <ul> <li id="service"><a href="#">サ…</a></li></ul></div></body></html>

2/19 復習 2カラムレイアウト(1) - レストランサイト

復習 2カラムレイアウト 復習 2カラムレイアウト レストランサイト作成 課題:以下のレストランサイトを2カラムで作成します。[見本] [ポイント] 写真挿入 pタグ内文頭に以下タグを使用して挿入 <img src=""> pタグの前方に置いた画像はfloatで回り込ませる headerの背景…

2/17 [HTML] class と id

class と id class と id 原理原則では、汎用性(class)と個別性(id) 現実的には必ずしもその通りではない横並びの時 divが必要 縦並びの時 divが不要 【演習】floatを使ったレイアウト 問題:以下のように表示されるように記述しなさい 各空き(白色部)は「…

2/13 ①[CSS] ナビゲーションブロック / ②[Photoshop] 色調補正

CSS(ナビゲーションブロック) Photoshop(色調補正) CSS(ナビゲーションブロック) 縦並びボックス・横並びボックスの設定 li 文字だけ テキストリンクとして扱う li a 文字の上に面を構成 ボタンのように扱う li a link は文字の上だけ【縦並びメニュー…

2/12 ①CSS(CSSによるページ構築) / ②Photoshop(写真の補正)

本日の授業テーマ CSSによるページ構築 Photoshop(写真の補正) 本日の学習内容~まとめと感想~ CSSによるページ構築 文章構造によるグループ化 → DIV要素 - グループ化とは、div要素によるコンテンツのブロック化 - 見出しと本文のまとまりとを一緒に構造化…