クライアントサイドとサーバーサイドの違い 知っておくべきこと - deve.K
クライアントサイドとは？ サーバーサイドとは？ クライアントサイドレンダリング サーバーサイドレンダリング 静的サイト生成 3つの主な違い 最後に ここ数年の傾向は、Webサイトのデザインがアプリに似てきています。 高度な応答性と双方向性は、幅広いコンテンツと同じくらい重要です。 現代では、主にWebプロジェクトをレンダリングするために提示されている3つの戦略であるCSR・SSR・SSGがございます。 当記事ではWeb初心者のために最も基本的なCSRとSSRおよびSSGについて解説していきます。 SSRおよびSSGはこちらのReactでの静的Webサイト 制作 - deve.Kでも触れておりますので参照下さい。 また、4つ目のISRというレンダリング戦略もございますが本日では解説致しませんのでご了承下さい。 クライアントサイドとは？ ユーザーがコンピューターをサーバーに接続して動的なWeb
チェックボックスとラベルの話【HTML編】 - Little Strange Software
どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、 「勉強したいが、コードを見てもなんのことやら…」 という方向けに、仕組みの基本的な部分を解説してみます。 HTMLでの記述と、CSSでの記述の合わせ技となりますが、まずはHTML部分について。 CSSについ
【まだ作りかけ】<table>タグを書き出すツール【未完成】 - Little Strange Software
どうも！LSSです！！ 昨日の記事に引き続き色々やってました。 だいぶ ノってきたんですが、ちょっと制作過程のものを晒してみたくなったので、ここで一旦お見せしちゃいます！ 作りかけサンプル 使い方で分かりにくそうなところがちらほら… そんな感じで作っていますが、最終的な着地点はどこになるんだろう？ｗ 作りかけサンプル 列 行 行見出し背景色 列見出し背景色 stickeyを有効にする 枠線の重なりを共有 枠線色 枠線の幅 枠線のタイプ コード 使い方で分かりにくそうなところがちらほら… まず「stickeyを有効にする」のチェックボックス。 これをONにすると、縦横ともに画面表示領域よりも大きいテーブルになった時に、見出し部分が表示されたまま、テーブル内でスクロールできるようになります。 （例えるなら、Microsoft Excelの「ウインドウ枠の固定」みたいな状態になります） あと「枠
ブログで使える（かも知れない？）小ネタ - Little Strange Software
どうも！ＬＳＳです！！ やっと一週間終わった！ 桜もぼちぼち咲き始めてるようですね^^ さて今回は、JavaScriptを利用した、ブログで使える（かも知れない？）小ネタです。 サンプル コード 改変ポイント あとがき サンプル 問題！ 白色と黒色を混ぜると、どんな色になるでしょうか！？ はい いいえ コード <p>問題！ 白色と黒色を混ぜると、どんな色になるでしょうか！？</p> <div id="g1"> <a href="#" onclick="g1.innerHTML='正解！ もちろん「はい」色ですね！';return false;">はい</a> <a href="#" onclick="g1.innerHTML='モノトーンで描かれた「いい絵」になるかも知れませんね！';return false;">いいえ</a> </div> 改変ポイント まずは上記コードを「HTML編
迷路の舞台裏！（JavaScriptで迷路を書き出す方法） - Little Strange Software
どうも！LSSです！！ 昨日の記事、「超巨大（になりそこなった）迷宮」で多くの方にゴールまで遊んでいただき、ありがとうございました！^^ アーシさんに言及＆紹介までしていただきました！ あちらのブクマコメントにも遊んでくれた方の感想が書かれていてもうウハウハですｗ 今回は、JavaScriptで作ったその迷路ゲームの「迷路描画部分」だけ、解説してみたいと思います！ コードはこんな感じ ざっくりとした説明 tableタグで迷路を表現しています JavaScriptでtableタグを書き出してみます！ ループを２重にして、<tr>内の<td>も繰り返してみます！ もうひとひねり（というか脱線？） 実際に迷路を書き出してみるサンプル まとめ~ コードはこんな感じ <div id="mz"></div> function maze_w(){ txt="<table border=0>"; for(
自己学習８０時間目【レスポンシブデザイン】作成レビュー!! - 未経験WEBディレクターのススメ
WEB業界未経験の筆者がWebサイトの作成について触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はレスポンシブデザインを作成していきます！ Follow @nonnpnp 【レスポンシブデザインの作成】 レスポンシブデザインを使うメリット HTML viewportを記述する Viewportとは？ 正しく記述する（meta要素 content属性） 表示が切り替わる地点〜ブレイクポイント〜 メディアクエリを記述する C S Sに記述する C S S ブラウザでの表示確認 デベロッパツールを起動する メディアクエリの中にC S Sを記述する 文字サイズを指定する 見出しサイズを指定する ヘッダー要素のレイアウト調整 header要素の横幅指定 ロゴの位置調整 ナビの位置調整 メインエリアのレイアウト調整 コンテン
自己学習70時間目【グリッドレイアウト】作成レビュー!! - 未経験WEBディレクターのススメ
WEB業界未経験の筆者がWebサイトの作成について触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はグリッドレイアウト！ Follow @nonnpnp 【グリッドレイアウトの作成 】 グリッドレイアウトを使うメリット コンテンツエリアの作成 コンテンツエリアを２つにわける サイドバーを作成する メインコンテンツを作成する 見出しとリード文を入力する 一つ目のセクションと見出しを作成する 一つ目のセクションの画像ギャラリーを作成する alt属性で画像の内容を記述する ２つ目のセクションを作成する ３つ目のセクションを作成する メインビジュアルを設定する 背景画像を設定する 画像ギャラリーを作成する 画像を左寄せレイアウトする 画像に余白を設定する 擬似クラスで右の画像の余白をなくす 【ソースコードHTML】 【ソー
自己学習60時間【シングルカラム】作成レビュー!! - 未経験WEBディレクターのススメ
本日はWEB業界未経験の筆者がWebサイトの作成について触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はシングルカラムページを作成していきます！ 【シングルカラムページの作成】 HTML/見出しとプロフィール Section要素を配置し、class属性名前をつける＆クラス名を追加する プロフィール分のエリアを作成する セクション内のテキストをマークアップする 太文字にする為の印をつける 画像を配置する 経歴セクション 表組みを作成 CSS/メインビジュアルの設定 背景画像を設定する 背景画像の大きさを調整する 背景画像の表示位置を調整する コンテンツエリアのスタイル設定をする コンテンツエリアの背景を白くする コンテンツエリアの上部、内側に余白を設定する。 メインエリアの幅を指定する 見出しを装飾する 大見出しの
未経験からweb制作【基礎学習とHTML】 - 未経験WEBディレクターのススメ
本日はWEB業界未経験の筆者がHTMLについて触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。 W E Bデザインの作成フロー サイトマップ作成 ワイヤーフレームとカンプの作成 デザインのコード化 テキストエディタ HTMLを記述する コンテンツエリアを指定する ロゴを指定する リンクを設定する ロゴにC S Sでのスタイリング用の目印をつける メニューを設定する メニューの項目を設定 メニューにリンクを張る メニューにC S Sの目印をつける コピーライトを記述する インデント W E Bデザインの作成フロー サイトマップ作成 必要なページ、コンテンツなどを洗い出す。 デザインの大枠を決めていく。 ツリー形式で記載していくと、後々ディレクトリ構造やファイル名を決めておくと後の作業がスムーズになる。 ※ディレクトリとは
HTML超入門！…のさわりだけ！！ - Little Strange Software
どうも！LSSです！ 今回は「HTML超入門！…のさわりだけ！！」と題して、 「はてなブログ書いてるけど、HTMLは全く知らない。広告挿入のためにHTML編集画面を開くとドン引きする。」 という方に向けてちょっとだけ、HTMLってどういうものかを知る入口になったらいいな、って記事を書いてみます。 HTML編集画面を開いてみます HTMLとは？ タグとオプション タグの種類と、それぞれオプションの種類…は割愛します^^; はてなブログで即効で使えるHTMLタグ例２つ！ <hr>タグ＝区切り線 <table>タグ＝表 余録：HTMLと組んでWebページを賑やかにするお友達 CSS JavaScript PHP まとめ HTML編集画面を開いてみます 「編集 見たまま」画面で冒頭の文章を書いてから、適当に数回Enterキーを叩いて、HTML編集画面を開くと↑のような感じになります。 自分の書いた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
