2022-01-01から1ヶ月間の記事一覧
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした…
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
PCレイアウト SPレイアウト 767px以下になったらspレイアウトに 使用するテキスト Cafe de Felicaは食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、スペイン料理に「東京」のエッセンスを取り入れたモダンスパニッシュ。 店内は…
jQuery jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptラ…
JavaScript JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round(…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
Photoshopには非常に多くの機能があるので目的から逆算して学習した方がとても効率的です。自身で以下の機能が使えるか確認してみましょう。 上記のリストが大丈夫であれば次に、 レイヤーマスクの仕組みが理解出来ているか クリッピングマスクの仕組みが理…
for文は繰り返し（ループ）処理です。 for ( 変数ｉの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for ( 変数の初期値； 繰り返し条件； 変数の変更(最後は;がいらない) ) { </script>…
「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script> 実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。このままでは使いづらいので「 new …
Photoshop 元画像 Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。まずはレイアー構造をしっか…
JavaScript 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。 関数は、function文を使って定義する。定義した関数を実行するとき…
リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 /*! * ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress * 全ての要素にbox-sizing: border-box;. * 全ての背景画像…
描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 焼き印のようなロゴを作る 白い台紙とロゴ画像を1つのレイヤーに結合する 結…
<html lang="ja"> <head> <meta charset="utf-8" <meta name="viewport" content="width=device-width"> <title>Net Smart</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </link></link></meta></head></html>
<html lang="ja"> <head> <meta charset="utf-8" <meta name="viewport" content="width=device-width"> <title>Net Smart</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </link></link></meta></head></html>
リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…
css3 アニメーション carlbrenner.co tympanus.net gardenestudio.com.br jakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。ベクター画像は画像をビットマップ…
プログラムとは？ いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…
Illustrator 長方形を作り、オブジェクト>パス>グリッドに分割で7x7のグリッドを作成 7x7のグリッドを書式>「スレッドテキストオプション」 テキストをパスの中に入れる チェック柄を作る 好きなサイズでオブジェクトを作り、上で作ったパターンを適応させる…
「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…
WEBの基礎 www.theheadline.jp baigie.me
