自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

初心者向け

  • 【CSS3】スクロール時に奥行きを感じる背景(background)の作り方
    最近流行のスクロールしたら背景がスクロールせず、ページ全体に奥行きを感じることができるモダンデザインの背景を作る。 それほど難しくない。CSS習いたての初心者でも簡単に実装できるので、是非とも試してみたいところ。 奥行きのある背景の作り方 まず、HTML。bodyタグ内のみ記述する。 <main> <div class="fixed_bg bg_1"> <h1>見出し</h1> </div> <div class="scroll_bg"> <p>コンテンツ</p> </div> <div class="fixed_bg bg_2"> &l ...
    続きを読む

  • CSS3で折りたたみ式のサイドバーを実装させる【checkbox+transition+position】
    モダンなサイトでよく見かける折りたたみ式のサイドバー。これはCSS3の知識さえあればすぐに実装できる。 HTML5+CSS3を使用した折りたたみ式サイドバー まず、HTML。headerがページタイトルとサイドバーを兼ねている。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>折りたたみ式右サイドバー</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="onload.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header"> <h1>折りたたみ式右サイドバー ...
    続きを読む

  • CSS3を使用した簡単アニメーションの実装【transitionとtransform】
    CSS3のアニメーション関係の描画はanimationプロパティを使用しなくてもtransitionプロパティを使用すれば簡単に実装できる。 さらに、transformと組み合わせることで、傾きや回転まで自由自在。本記事ではレベルごとにアニメーションの作り方を解説していく。 対象読者はある程度のHTMLとCSSの基礎を身に着けている方、CSSにおける疑似要素(::beforeと::after)、擬似ク ...
    続きを読む

  • CSS3でiOS風のトグルスイッチを作る方法【transition+checkbox】
    CSS3で実装されたtransitionと兄弟要素のセレクタを組み合わせることでiOS風のトグルスイッチは簡単に作れる。 何も装飾を施していないinputタグのチェックボックスは小さくて見づらいが、この装飾を施すことで、視覚的にも押すことができるスイッチであると認識できるし、押せる範囲が広がる。 iOS風のトグルスイッチの作り方 まずはHTML5から。 <div class="ui_demo_area"> <input id="ios_chk_01" class="ui20-input_chk" type="checkbox"><label class="ui20-ios_conf" for="ios_chk_01"></label> </div> 続いて、CSS3。 /* ios button */ .ui20-input_chk { display:none; } ...
    続きを読む

  • Djangoで『このページを表示するにはフォームデータを..』と言われたときの対処法
    『このページを表示するにはフォームデータを再度送信する必要があります。フォームデータを再送信すると以前実行した検索、投稿や注文などの処理が繰り返されます。』 POST文を実行した直後に更新ボタンを押すと、こんなふうに表示される時。こういうときはリダイレクトすればOK。 views.pyを修正する redirectをimport。POST文のreturnにredirect関数を返せばいいだけ。 from django.shortcuts import redirect #P ...
    続きを読む

  • DjangoにPythonスクレイピングを実装した簡易検索エンジンの作り方【BeautifulSoup】
    DjangoにPythonスクレイピングを実装させるだけで簡易的な検索エンジンを作ることができる。 しかも、モデルの定義は不要でビューとテンプレートだけなので初心者の演習におすすめ。 流れ Djangoの環境構築、プロジェクトの作成等は割愛します。 アプリを作る urls.pyを修正 views.pyを作る テンプレートを作る スクレイピングのコードを作る views.pyを修正 テンプレートを修正 開発サーバーを起動 ...
    続きを読む

  • Djangoビギナーが40分で掲示板アプリを作る方法
    公式のDjangoチュートリアルではよくわからない方向け。 対象読者は既にDjangoをインストール済み、Linux系コマンド習得済み、Python及びHTMLの基本構文を把握済みとする。 Djangoのインストールをまだしていない場合は下記コマンドで。 pip install django 注意事項 40分はあくまでも私見に基づく目安である点をご留意いただきたい。 流れ 以下、流れ。 プロジェクトを作る(5分) アプリを作る(5分) setti ...
    続きを読む