img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによ…
cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例 frankiessportsbar.com 記述としては背景画像を固定したい要素に background-attachm…
Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
素材https://school.yachin29.com/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…
front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></meta></head></html>
ここでは、WordPressのオリジナルテーマを作成する為の下準備を行います。 WordPressのインストール ダウンロードした「wordpress」フォルダーをテストサーバーの「htdocs」フォルダー内にコピーし、新規データベースを作成する。テストサーバーにアクセスし…
1.既存のhtmlデータをphp化及びデータ構成やファイル名をwp用に合わせ、wpテーマ用の構成にする 例 トップページはfront-page.php style.cssは管理フォルダー直下に screenshot.jpgを作成 2.wp内にデータを移し、必要な個所をワードプレステンプレート化する…
felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能…
トンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要で…
wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…
バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。…
最近ではモバイル用のバナーのニーズもとても増えてきました。 モバイルバナー広告のサイズ 代表的なサイズ 320x50、320x100 モバイル用のバナーはPC用に比べ、サイズが小さいのでテキストや画像の選択が非常に難しくなります。さらにモバイル用であれば高解…
index..html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Column-layout</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
図形の組み合わせと整列を使ってイラストを描いてみましょう。 さらに効果を使ってシェイプをすばやく操作し、様々な表情のイラストに変化させてみましょう。 https://helpx.adobe.com/jp/illustrator/how-to/experiment-with-effects.html helpx.adobe.…
WebP（ウェッピー）は、圧縮率の高い非可逆圧縮で、透過した画像も書き出せるうえ、GIF同様にアニメーションにも対応している画像フォーマットで、言わば、jpgとpngとgifの良いとこ取りの画像形式です。 対応するブラウザが少ないというデメリットから普及が…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…
Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
インスタグラムの投稿一覧をWebサイトに表示させる場合、Instagram APIを使う方法やWordpress化させプラグインを使う方法がありますが、どちらも導入するには少し敷居が高く、専門知識が必要になってしまいます。 ja.wordpress.org LightWidget このLightWid…
入力画面 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームの作成|入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問合せ…</h1></body></html>
今回のお問い合わせフォームは php を使い、 ● 入力画面● 確認画面● 完了画面 の 3 つを作成します。 入力画面の作例 https://codepen.io/yachin29/pen/ZEBNENN 万が一、確認画面からアクセスしてしまった際にそのままでは post で値が送 られていな…
Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------…
入力画面 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームの作成｜入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問合せ…</h1></body></html>
今回のお問合せフォームの項目は 氏名（必須） メールアドレス（必須） 性別 好きな食べ物（複数選択可） プライバシーポリシーのチェック（必須） 入力画面 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームの作成｜入力画面</title> </head>…</html>
配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。 一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる…
コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか 適切な…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ドロップダウンメニューの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>ロゴ</h1> <…</header></body></html>
今回は入力画面、確認画面、完了画面の3ステップでお問合せフォームを作成します。 項目は お名前 メールアドレス お問い合わせ内容 入力画面input.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入力画面</title> </meta></meta></meta></head></html>
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
